Não satisfeito com a maneira que as páginas da Internet eram formatadas o Norueguês Håkon Wium Lie cria em 1994 as CSS.
CSS é a abreviação para o termo em inglês Cascading Style Shet, traduzido para o português como folha de estilo em cascata. A definição para CSS que está no site do W3C é:
“Folha de estilo em cascata é um mecanismo simples para adicionar estilos (por exemplo: fontes, cores, espaçamentos) aos documentos Web”
As CSS tem por finalidade criar a apresentação das informações marcadas com (X)HTML. A (X)HTML foi criada para ser uma linguagem de marcação e estruturação de conteúdos na Web. Não cabe à (X)HTML fazer apresentação dos elementos, como por exemplo: cores, tamanhos de fontes, alinhamentos. Para a (X)HTML fica apenas a marcação, por exemplo: definir qual é o título principal da página, estruturar os parágrafos, citações, etc. Resumidamente podemos dizer:
(X)HTML para estruturar e CSS para apresentar
Assim em nosso projeto não temos um acoplamento, temos em uma camada a estrutura do documento e em outra camada a apresentação do mesmo. Não se misturam.
Sintaxe CSS
Uma regra CSS pode ter mais de uma declaração que devem ser separadas por “ ; ”.
Por exemplo:
P{
color:#000000;
text-align:right;
background:#cccccc;
font-family:”times new roman”, verdana, arial;
}
A regra CSS acima estiliza os parágrafos da seguinte forma: Cor do texto preto, alinhamento à direita e uma cor de fundo cinza, definimos também uma família de fontes. O navegador do usuário procura primeiro a fonte Times New roman, caso esta fonte não esteja instalada no computador do usuário a próxima a ser procurada será verdana e assim por diante. Repare que no primeiro nome de fonte tivemos que usar “ “ (aspas) porque o nome da fonte é uma palavra composta.
A regra acima também pode ser escrita assim:
p{color:#000000;text-align:right;background:#cccccc; font-family:”times new roman”, verdana, arial;}
O ponto e virgula é facultativo no caso de uma declaração ou após a última declaração.
As regras CSS não são case sensitive (você pode usar letras maiúsculas e minúsculas)
Você pode também dar múltiplos espaços, que serão tratados como espaços simples.
Exemplo:
p{ color: #000000; }
Vinculando folha de estilos aos seus documentos.
Temos três formas de utilizar CSS nos documentos.
Estilo inline: Escrever a regra CSS diretamente dentro da tag de abertura do documento.
<p style=”color:#ffffff;font-size:16px;”>
Estilo incorporado: Outra forma de escrever estilos diretamente no documento. Nesse método você escreve as regras dentro das tags
...
<head>
...
<style type=”text/css”>
h2{color:#000000;}
... mais regras...
</style>
Estilo externo: Nesse método não escrevemos as regras dentro dos documentos (X)HTML e sim em um arquivo externo, salvo com a extensão .css.
... <head>
<link rel=”stylesheet” type=”text/css” href=”estilos.css”>
</head>
O atributo href aponta para o endereço do seu arquivo css externo.
Esse artigo teve por finalidade mostrar os fundamentos básicos das poderosas CSS.