Iniciando com o CSS

 

Introdução

Esse tutorial é uma introdução ao Cascading Style Sheets (CSS) e aos seus recursos básicos, com exemplos práticos que você mesmo pode tentar no seu próprio computador. Está dividido em duas partes:

  • A Parte I ilustra as características padrão do CSS que funcionam em todos os navegadores Mozilla e também em qualquer outro dentre os mais modernos.
  • A Parte II conta com alguns exemplos de características especiais que funcionam nos navegadores Mozilla mas não necessariamente em outros ambientes.

Esse tutorial é baseado na Especificação do CSS 2.1.

Quem deve usar esse tutorial?

Esse tutorial é, principalmente, para iniciantes no CSS.

Se você é um iniciante, utilize a parte I deste tutorial para entender o CSS e como usá-lo. Depois utilize a parte II para entender seu escopo nas plataformas Mozilla.

Se você já conhece alguma coisa de CSS, sinta-se à vontade para pular as partes deste tutorial que já conhece, focando apenas no que interessa.

Se você já é um desenvolvedor CSS experiente mas não com Mozilla, você pode pular para a parte II.

O que você precisa saber antes de começar?

Para seguir a maior parte deste tutorial você precisa de um editor de texto e, especificamente para a parte II, um navegador Mozilla (Firefox, Camino ou SeaMonkey). Você também vai precisar saber como utilizá-los.

Se você não quiser trabalhar com arquivos, então você pode apenas ler o tutorial e observar as imagens, embora essa seja a maneira menos proveitosa de se aprender.

Algumas partes desse tutorial exigem outro software Mozilla, mas elas são opcionais. Se você não quiser baixar este outro software Mozilla, você pode ignorá-las. O software referenciado por esse tutorial inclui:

Nota: O CSS fornece alguns modos de se trabalhar com cores e algumas partes desse tutorial dependem de cores. Para que você possa seguir facilmente por essas partes, você vai precisar de um monitor colorido e visão colorida normal.

Como usar esse tutorial

Para usar esse tutorial, leia as páginas cuidadosamente e em sequência. Se você perder alguma página pode ser que encontre alguma dificuldade para entender as seguintes.

Em cada página, use a sessão de Informação para entender como o CSS trabalha. Use a sessão de Ação para tentar usar o CSS no seu próprio computador.

Para testar seu entendimento, faça o desafio do fim de cada página. Os links para as soluções podem ser encontrados no próprio desafio, dessa forma você não precisa olhá-las caso não queira.

Para entender mais do CSS, leia as informações que você pode encontrar nos campos com a legenda Mais detalhes (More details). Utilize os links para encontrar informações de referência sobre o CSS.

Parte I do Tutorial

Parte II do Tutorial

Exemplos do uso do CSS juntamente com outras tecnologias

  1. JavaScript
  2. Gráficos SVG
  3. Dados XML
  4. Ligações XBL
  5. Interfaces de usuário XUL