Um estilo é um conjunto de formatações a que foram atribuídas a uma classe, tag html ou a uma identidade do documento.
Há 3 maneiras de adicionar estilos CSS ao seu documento HTML5, inline, ou seja, na própria tag usando o parâmetro style=””, você pode usar CSS interno e incluir toda formatação entre o par de tags <head> do documento, pode usar um link para um arquivo externo com extensão .css
CSS Interno
Código CSS interno é colocado na seção <head> de um documento HTML. As classes e IDs nos elementos HTML podem ser usados para se referir ao código CSS que contém a formatação, mas eles só estão ativos nessa página específica. Estilos incorporados desta forma são baixados cada vez que a página carrega, ou seja, vai sempre fazer parte do carregamento da página. No entanto, existem alguns casos quando a pagina de estilos interna é útil. Um exemplo são as Newsletter ou mesmo e-mails comuns onde podemos criar um documento e formatá-lo com estilos CSS, nesse caso o estilo deve ser interno, assim os serviços de e-mails não vão bloquear os estilos. Isso acontece quando você tenta fazer isso usando um estilo externo porque a busca do estilo acontece através de um link. Um exemplo de pagina de estilo interna:
<head>
<style type="text/css">
p {color:white; font-size: 10px;}
.center {display: block; margin: 0 auto;}
#button-go, #button-back {border: solid 1px black;}
</style>
</head>
Vantagens de CSS Interno:
- Apenas uma página é afetada pela pagina de estilos.
- Classes e IDs podem ser usados por stylesheet interno.
- Não há necessidade de carregar vários arquivos. HTML e CSS podem estar no mesmo arquivo.
Desvantagens de CSS Interno:
- Aumento do tempo de carregamento da página.
- Ela afeta apenas uma página – não é útil se você quiser usar o mesmo CSS em vários documentos.
CSS Externo
Provavelmente a melhor maneira de adicionar CSS ao seu site, é vinculá-lo a um arquivo .css externo. Dessa forma, quaisquer alterações feitas em um arquivo CSS externo serão refletidas em seu site globalmente.
Outra vantagem é que os navegadores fazer cache desse arquivo e isso melhora o desempenho do site diminuindo o tempo de carregamento.
Uma referência a um arquivo CSS externo é colocada na seção <head> da página:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
O arquivo style.css contém todas as regras de formatação, classes, IDs, querys e todo o resto.
Vantagens de CSS Externo:
- Tamanho menor de páginas HTML e estrutura mais limpa.
- Velocidade de carregamento mais rápida.
- O mesmo arquivo .css pode ser usado em várias páginas.
- Facilita a manutenção do site
Desvantagens de CSS Externo:
- Até que o CSS externo seja carregado, a página pode não ser processada corretamente. Acontece, eu já vi.
CSS Inline
Como aqui não é o curso de CSS, vamos focar mais nesse estilo, mas deixo bem claro que não é o melhor estilo, recomendo fortemente que você estude CSS3 e aprenda a formatar seus documentos usando folhas de estilo externa. Nós temos o curso básico de CSS3 aqui também caso se interesse pelo assunto.
Voltando para o CSS inline, ele é usado na própria tag caso você queira formatar uma tag específica no documento, para isso usamos o parâmetro style. Como eu disse, isso não é recomendado. Imagine que você use essa mesma tag em várias páginas e ela tenha o mesmo estilo em cada uma delas, quando você resolver atualizar isso terá que fazer uma por uma. Contudo, em alguns casos pode ser bastante útil e por isso ela existe. Para quem escreve para um blog por exemplo, usa-se muito este estilo de formatação pois você está formatando apenas aquele texto e a formatação do paragrafo pode ser única.
Veja abaixo um exemplo de um documento HTML formatado usando o estilo inline.
<!DOCTYPE html>
<html>
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Tutoriais ClickArt</h1>
<p style="color:white;">Somente aqui.</p>
</body>
</html>
Vantagens do CSS Inline
- Útil se você quiser testar e visualizar alterações.
- Útil para correções rápidas.
- Reduzir solicitações HTTP.
Desvantagens do Inline CSS:
- CSS Inline deve ser aplicado a cada elemento.
Conclusão
Agora você está familiarizado com diferentes maneiras de adicionar CSS ao seu site e conhece as diferenças entre as páginas de estilo internas, externas e inline, veja alguns estilos que você pode aplicar em seu documento.
Cor de fundo HTML
A propriedade background-color define a cor de fundo para um elemento HTML. Este exemplo define a cor de fundo de uma página para blue:
<body style="ackground-color:blue;">
<h1>Isso é um cabeçalho</h1>
<p>Aqui é um paragrafo.</p>
</body>
Cor do texto em HTML
A propriedade color define a cor do texto para um elemento HTML:
<h1 style="color:blue;">Isso é um cabeçalho</h1>
<p style="color:red;">Aqui é um paragrafo.</p>
Fontes HTML
A propriedade font-family define a fonte a ser usada para um elemento HTML:
<h1 style="font-family:verdana;">Isso é um cabeçalho</h1>
<p style="font-family:courier;">Aqui é um paragrafo.</p>
Tamanho do texto em HTML
A propriedade font-size define o tamanho do texto para um elemento HTML:
<h1 style="font-size:300%;">Isso é um cabeçalho</h1>
<p style="font-size:160%;">Aqui é um paragrafo.</p>
Alinhamento de texto HTML
A propriedade text-align define o alinhamento horizontal do texto para um elemento HTML:
Resumo do capítulo
- Use o atributo style para estilizar elementos HTML
- Use background-color para cor de fundo
- Use color para cores de texto
- Use font-family para fontes de texto
- Use font-size para tamanhos de texto
- Use text-align para alinhamento de texto
