Aprendendo CSS 02: Por onde começar?

(Lição anterior)

Certo, você quer aprender CSS, né? Então faça o seguinte: baixe o Firefox e depois instale o complemento Firebug. Se você realmente não gosta do Firefox, existe o Firebug Lite que é compatível com outros navegadores.

Ok, instale o Firebug aí. Pode acreditar, isso facilita muito as coisas.

Pronto? Já instalou tudinho? Podemos começar?

Vamos lá. Com o Firebug você consegue modificar qualquer coisa da página que você está acessando. Faça um teste aqui. Pressione F12 para abrir o código da página logo abaixo. Agora, clique com o botão direito aqui (é, aqui mesmo) e selecione "Inspecionar Elemento". Na esquerda, você verá o código HTML da página, e, na direita, o CSS do elemento selecionado. Você pode ver que existe um botão "Editar" ali na esquerda. Se você clicar nele, poderá editar o conteúdo da página (tente apagar tudo o que tem ali e substituir por um texto aleatório). Mas eu não me preocupo com isso, porque a alteração acontecerá apenas no seu computador, e depois que você atualizar a página (F5) tudo voltará ao normal.

Mas quase nunca é necessário modificar o HTML da página via Firebug. Como estamos aprendendo CSS aqui, vamos nos concentrar no lado direito. Eu acho que essa é a melhor forma de se aprender CSS porque assim ficamos livres para experimentar qualquer coisa e ver na mesma hora a mudança na tela.

Para que possamos nos familiarizar com a forma que é escrito o CSS, observe o seguinte exemplo (as propriedades estão destacadas em verde e as suas características em azul):

#exemplo {
__color: white;
__background-color: blue;
__border: 2px solid black;
__margin: 0 25px;
__padding: 12px;
}

Enquanto isso, no HTML, teremos o seguinte:

<div id="exemplo">Aqui vai o conteúdo.</div>

No HTML, uma div serve para abrigar um conteúdo. Este blog, por exemplo, tem uma div com id="main", que abriga todos os posts. Nós podemos definir um id ou uma class para uma div. Isso muda a forma como escrevemos o CSS. Se tivéssemos definido uma class no exemplo anterior, logo no início do código, ao invés de # (jogo-da-velha) nós deveríamos ter usado . (ponto).

Na prática, id e class não tem diferença, mas geralmente id são utilizados para elementos que aparecem apenas uma vez, enquanto class são utilizados para elementos que aparecem várias vezes na mesma página. Os títulos dos posts desse blog, por exemplo, recebem a class="post-title".

Não existem apenas div. Na verdade qualquer elemento HTML pode ser modificado pelo CSS. Exemplos: div (para "caixas"), p (para texto comum), h1 (para grandes títulos), h2 (para subtítulos), h3 (para títulos menores e assim por diante), a (para links), blockquote (para blocos de citações), etc.

Mas alguns exemplos práticos:

<div class="exemplo">Aqui vai o conteúdo.</div>

.exemplo {
__color: black;
}

<h2>Aqui vai o conteúdo.</h2>

h2 {
__color: green;
}

Ok, vamos acabar essa lição por aqui. Na próxima, veremos como escrever esse código passo-a-passo e como incorporar o CSS ao HTML.

(Próxima lição)