Fundamentos da linguagem CSS

Nós já revisamos as principais tags da linguagem HTML e agora é hora de embelezar. Gostaríamos de ter a capacidade de mudar a cor do texto, seu tamanho, plano de fundo e muito mais. Isso é feito usando a linguagem CSS.

Normalmente, os comandos CSS (estilos) são armazenados em um arquivo separado, que é conectado por uma tag especial a todas as páginas HTML do nosso site.

A vantagem dessa abordagem é que o arquivo CSS é único, enquanto pode haver qualquer quantidade de arquivos HTML, mesmo mil. Se fizermos uma alteração em um único lugar do arquivo CSS, por exemplo, pintar todos os parágrafos de vermelho, essas alterações serão aplicadas em todas as mil páginas HTML às quais nosso arquivo CSS está conectado. Muito conveniente e rápido.

O arquivo de estilos deve ter a extensão .css. Para conectar tal arquivo a uma página HTML, na tag head deve-se escrever a seguinte construção:

<link rel="stylesheet" href="fileName.css">

No exemplo a seguir, o arquivo CSS styles.css é conectado ao nosso arquivo HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>This is the title</title>
		<link rel="stylesheet" href="styles.css">
	</head>
	<body>
		<p>
			This is a paragraph with text.
		</p>
	</body>
</html>

Crie e conecte a todas as suas páginas o arquivo styles.css.