O primeiro browser compatível com a tecnologia CSS foi o Internet Explorer 3.0, porém o Netscape Communicator e o Internet Explorer, nas versões mais atuais implementam melhor as folhas de estilo. Na verdade, o browser da Microsoft atende bem melhor as especificações recomendadas pelo W3C.
Como criar estilos
Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:
elemento {atributo1: valor; atributo2: valor ...}
Explicação desta sintaxe:
Elemento: descreve o elemento de design ao qual o estilo será aplicado. A mesma tag HTML, mas sem os sinais de maior e menor. Essa parte da regra é, às vezes, chamadas de seletor.
Atributo: o aspecto específico do elemento que você quer usar como estilo. Deve ser um nome de atributo CSS válido, como o atributo font-size.
Valor: a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo em questão, como 20pt (20 pontos) para font-size.
Atributo: valor: a parte declaração da regra. Você pode atribuir múltiplas declarações, se desejar. Deve separá-las com ponto-e-vírgula (;). Não coloque um ponto-e-vírgula depois da última declaração.
Agora é hora de exemplos. Eis uma regra CSS que especifica que todos os títulos de nível 1 (tags <H1>) sejam exibidos em uma fonte de 36 pontos:
H1 {font-size: 36pt}
Aqui está um exemplo de regra que diz que todos os títulos de nível 2 (tags <H2>) devem ter tamanho de 24 pontos e cor azul;
H2 {font-size: 24pt; color: blue}
Você pode inserir quebras de linha e espaços em branco dentro da regra como quiser. Assim, é possível ver mais facilmente todas as declarações e certificar-se de que colocou todos os sinais de ponto-e-vírgula e colchetes nos lugares corretos. Por exemplo, aqui está uma regra que diz que os parágrafos aparecerão em fonte Times, 12 pontos, azul e recuados meia polegada a partir da margem esquerda da página:
P {font-family: Times;
font-size: 12pt;
color: blue;
margin-left: 0.5in}
Note como é fácil aplicar todas as declarações ao elemento parágrafo (P) e como cada declaração, exceto a última, é seguida pelo caracter de ponto-e-vírgula exigido.
Para incluir as especificações CSS na sua página, há três maneiras. Uma delas é acrescentando as especificações diretamente em cada página, como no exemplo abaixo, dentro da marcação de cabeçalho.
<HEAD>
<TITLE>Bira's Webstation 2000</TITLE>
<STYLE type="text/css">
<!--
a: hover { color: #00FF80}
a {text-decoration:none}
body {
margin-left: 5%;
margin-right: 5%
}
-- >
</STYLE>
</HEAD>
Neste caso, você deverá copiar e colar as especificações em todas as páginas para que elas tenham a mesma aparência. Porém uma maneira mais fácil, que diminuirá o código HTML e tornará muito mais fácil a mudança total de visual do site, é acrescentar um link, colocado também dentro da marcação <HEAD> e </HEAD> apontando para o arquivo de estilo. O arquivo de estilo deverá ter, obrigatoriamente a extensão .css.
Exemplo:
<LINK HREF="scripts/body_style.css" REL=StyleSheet TYPE="text/css">
Neste exemplo, o arquivo de estilo se chama body_style.css e está dentro da pasta scripts. Veja aqui o arquivo body_syle.css
Os estilos inline são os que têm menos efeitos. Eles afetam somente a tag atual - não outras tags na página e tampouco outros documentos. A sintaxe para definir um estilo inline é a seguinte:
<TAG STYLE="regras css">
Exemplo:
<A STYLE="color: green; text-decoration: none"
HREF="http://youngfaces.areCool.net">
Note que em vez das tags <STYLE>...</STYLE>, você apenas utiliza um atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, você as coloca entre aspas, separando as com ponto-e-vírgula como de costume.
Clique aqui para conhecer a unidade "em".
Aqui você terá uma tabela de referência sobre os principais valores e atributos para CSS, recomendados pelo próprio W3C. O texto está em inglês. Reference table.
