Trabalhando com a Folha de Estilo

Em primeiro lugar, veja como estão aparecendo estas styles, abrindo o arquivo css_test.html no browser (note que você deve usar necessariamente IE 3 ou 4, ou Netscape 4, e o que você vai ver depende de que browser estiver usando. O IE 3.0x, por exemplo, não vai mostrar as bordas).

Agora que você já viu as styles iniciais, nós vamos começar experimentando com a edição do arquivo amostra1.css (veja que você pode querer salvar todo conjunto de novas modificações em um novo arquivo -- como uma amostra2.css, por exemplo --, mas se você fizer isso, lembre-se também de modificar o valor do atributo href na tag de link do arquivo css_test.html para poder ver os resultados).

Observação: você pode dar uma olhadinha na tabela de propriedades de estilo para refrescar sua memória e checar a sintaxe.

Comece com algumas modificações simples:

1. modifique a cor da fonte e do background nas tags H1, H2, e H3
2. modifique o tamanho das fontes nos parágrafos para 12pt

Agora veja os resultados no arquivo css_test.html, usando o seu browser.

(Este novo conjunto de modificações só vai afetar a aparência no IE 4.0 ou no Netscape 4.0)

1. modifique a largura da borda nos elementos de borda das classes .first e .last para "thin"
2. modifique o estilo da borda do elemento H1 para "solid"

Veja os resultados.

Agora tente acrescentar novas classes:

1. crie uma classe chamada .highlight -- ajuste a cor do background para amarelo (#FFFF00)
2. crie uma classe chamada .ufo -- ajuste a font-family para "monospace", o tamanho para "large", a cor para verde (#00FF00), e o background para preto (#000000)
3. modifique o arquivo css_test.html para poder acomodar as novas classes. Você vai poder vê-las usando qualquer tag com um atributo de classe ajustado para o nome da classe (sem o ponto inicial) -- exemplo: <div class="ufo">esta é a classe ufo</div>

Veja os resultados.

Agora você já possui a idéia geral da coisa. Trabalhando a partir da amostra, ou de um novo arquivo CSS, comece a criar alguns styles por conta própria. Lembre-se das tabelas de propriedade e valores que você pode usar como referência, e lembre-se de que os arquivos de HTML nos quais você cria um link para os seus style sheets podem precisar também de atributos de classe adicionados às tags.