Vamos lá. Quando um navegador lê uma folha de estilo CSS, ele interpreta e formata a página de acordo com as instruções escrita na folha. Existem três maneiras de inserir CSS nas páginas HTML.
Em um arquivo externo
Logo de cara eu digo que esse é o melhor jeito de escrever estilos CSS. Com a folha de estilo externa, você pode alterar o estilo inteiro da página ou das páginas alterando apenas um único arquivo!
Lembre-se de que cada página deve conter esse arquivo, você faz isso incluindo uma referência da folha de estilo através do elemento HTML <link>. O elemento <link> fica dentro da seção <head>. Veja um exemplo de como isso é feito.
<!DOCTYPE html>
<html>
<head>
<title>Estilo CSS</title>
<link rel="stylesheet" type="text/css" href="meuestilo.css">
</head>
<body>
</body>
</html>
As folhas de estio podem ser escritas dentro de qualquer editor de texto, eu gosto muito do Sublime Text, mas você escolhe o que for melhor, pode até mesmo usar o bloco de notas. O que você não pode fazer é escrever tags HTML, códigos PHP, JavaScript ou de qualquer outra linguagem que não seja CSS. Os arquivos devem ser salvo com extensão .css. Veja um exemplo do arquivo meuestilo.css
body {
background-color: lightblueazul;
}
h1 {
color: navyazul;
margin-leftazul: 20px;
}
NOTA! Não adicione espaços em branco entre o valor e a unidade de medida pois não irá funcionar e você irá ficar se perguntando, “Mas porque p*&@#$ isso não funciona?” .
Maneira errada: font-size: 20 rem;
Maneira correta: font-size: 20rem;
Folhas de escritas interna
Você pode escrever o estilo CSS dentro das páginas HTML. Geralmente quando uma página tem um estilo próprio e único, essa é a maneira mais utilizada. Eu não gosto, não recomendo, mas em alguns casos pode ser a melhor maneira, há quem diga que é.
O estilo CSS interno é escrito dentro da tag <style> e fica na seção <head>. Veja o exemplo abaixo da maneira correta de escrever CSS interno.
<!DOCTYPE html>
<html>
<head>
<title>Estilo CSS</title>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style >
</head>
<body>
</body>
</html>
Estilo Inline
Se você acompanha a série “Aprenda a criar sites com HTML5” você deve ter visto eu dizer muitas vezes sobre esse estilo. Esse é o estilo escrito diretamente em um elemento HTML, usado para dar uma formatação exclusiva para esse elemento.
Não é recomendado utilizar essa técnica em todo o conteúdo de uma página, muito menos em todo o site, mas quando você tem um site dinâmico e gera conteúdo de acordo com preferências de usuários ou com qualquer outra forma que está sempre se alterando, pode ser que seja uma boa técnica.
Eu gosto de pensar nessa técnica quando tenho uma peça na página que é gerada totalmente fora do estilo geral do site, nesse caso eu prefiro usar CSS inline do que ter que escrever um arquivo apenas com esse propósito e inseri-lo na página.
Veja um exemplo de CSS inline que altera a cor e o tamanho da fonte de um elemento <h1>
<h1 style="color: #F00; font-size: 20rem;">Titulo aqui</h1>
DICA! O estilo inline perde muitas das vantagens de um arquivo externo, misturando estilo com apresentação, dificuldade de manutenção e outros como a baixa pontuação nos buscadores. Veja Como aparecer na primeira página do Google sem pagar?
Posso ter várias folhas de estilo dentro de uma página?
Sim, você pode, mas se algumas propriedades tiverem sido definidas para o mesmo seletor (elemento) em diferentes folhas de estilo, o valor da última folha terá preferência.
Por exemplo, se você definir um estilo para o elemento <h1> dentro de um arquivo externo (meuestilo.css) e escrever outro estilo diferente dentro de <style> na seção <head> da página (estilo interno), então o estilo interno terá preferência se for escrito depois da inclusão do arquivo (meuestilo.css). Veja o exemplo abaixo para ficar mais claro.
<!DOCTYPE html>
<html>
<head>
<title>Estilo CSS</title>
<link rel="stylesheet" type="text/css" href="meuestilo.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
</body>
</html>
Se fizer o contrário o efeito será contrário, lógico.
<!DOCTYPE html>
<html>
<head>
<title>Estilo CSS</title>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="meuestilo.css">
</head>
<body>
</body>
</html>
Ordem em cascata
Com tantas maneiras de escrever estilos CSS, como saber qual será interpretado pelos navegadores se tivermos mais de um estilo especificado para um elemento?
Os navegadores seguem a ordem em cascata, ou seja, todos os estilos serão colocados um em baixo do outro em uma nova “folha de estilo virtual”, veja as regras para essa montagem onde o número 1 tem prioridade 1 e assim por diante.
1 – Estilo inline, css no elemento HTML pela propriedade style.
2 – Folha de estilo interna e externa na seção <head>. A que estiver escrito por último terá prioridade sobre a outra. Como no exemplo acima.
3 – Padrão do navegador. Pois é, os navegadores tem um padrão CSS interno, se não for escrito nada, eles obedecerão o que eles tem.
