Aprenda a estilizar sites com CSS – Aula 2 - Como escrever?

Hoje você vai aprender onde escrever seu estilo CSS, como inseri-lo em suas páginas e a ordem em que os navegadores interpretam as folhas de estilo, no caso de ter mais de uma folha em uma página.

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.

 

Aprenda as principais linguagens usadas na WEB.

Aqui você tem acesso gratuito às principais linguagens de programação web, não perca tempo, acesse nosso conteúdo e comece a programar agora mesmo.

Compartilhe:

Sobre o autor

Analista de Sistemas com foco atual na área de WEB. Amante de boa música, estratégias criativas. Gosto de trabalhar com quem tem talento, se não for para ser perfeito, melhor nem começar. Gosto de liderança, estratégias e, principalmente, pôr a mão na massa.