Aprendendo CSS 04: Experimentando

Certo, vamos trabalhar agora com algumas propriedade. A seguir está uma "caixa de texto" azul com texto em branco e borda preta. Antes, vamos ver o código necessário para criá-la:

<div id="exemplo1">Um quadrado azul com texto branco e borda preta.</div>

E no CSS:

#exemplo1 {
background-color:blue;
color:white;
border:3px solid black;
}

O resultado é esse:

Um quadrado azul com texto branco e borda preta.

Agora vamos brincar um pouco com isso. Tente mudar essas propriedades utilizando o Firebug. Primeiro, abra o Firebug. Depois, clique com o botão direito na caixa e então em "Inspecionar Elemento". O CSS desta caixa deve aparecer logo abaixo, à direita. Clique em "blue" para que a característica do background se torne editável. Agora, aperte as tecla para baixo e para cima, para navegar entre as opções de cores pré-selecionadas pelo Firebug. Mude a cor para "green" (verde). Viu como é fácil?

Vamos experimentar isso um pouco, para depois vermos as propriedades uma a uma. Tente mudar a cor do texto (a propriedade color: define isso), de "white" (branco) para "yellow" (amarelo).

Percebeu como funciona? Esse Firebug é realmente ótimo, não é não?

Ok, vamos tentar mudar algo maior agora: clique com o botão direito no fundo xadrez aqui na esquerda do blog. Inspecionar Elemento. Mude a cor de "black" para "red" ou qualquer outra, e veja o resultado.

Aliás, falando nisso... eu tô precisando urgentemente fazer uma reforma no layout desse blog, não é não? Enfim, essa lição acaba aqui. Na próxima vamos ver como funcionam as cores.