Tutorial: CSS Parte 1

No último tutorial, deixei todos no suspense em como mudar o visual das páginas (X)HTML. A resposta são as CSS, cujo básico irei explicar neste tutorial.

Pré-requisitos: XHTML Parte 1
Objetivo: aprender a mudar o visual de uma página usando CSS. Seletores e propriedades básicas.

História

Inicialmente, o visual das páginas HTML era definido no próprio documento. Por exemplo, para se fazer um parágrafo colorido, utilizava-se algo como:

  
    Este texto tem tamanho 2 e cor azul
  

Só que essa abordagem tem uma grande desvantagem. Suponha que você possua um site com muitas páginas, e você resolva mudar o visual dele (mudar todo o texto para branco, por exemplo). Você terá que alterar todos os arquivos para poder fazer isso! Não é nem um pouco prático. O problema é que se está misturando o conteúdo com a forma. Separando-se os dois, você tem muito mais flexibilidade, e isso é o que o CSS faz: ele define a forma da página, deixando somente o conteúdo no HTML.

Conceitos básicos

CSS significa Cascading Style Sheets, ou “Folhas de estilo em cascata”. Existem três formas de se associar um CSS a um XHTML: colocando o CSS em um arquivo separado, e indicando o uso dele no XHTML; colocando o CSS dentro do próprio XHTML ou usando o atributo “style” dos elementos. A primeira forma é a mais prática, é a única da qual vou falar aqui.

Uma folha de estilos consiste em regras; cada regra possui um seletor que define quais partes do XHTML serão afetadas por ela, e declarações que definem quais efeitos serão aplicados nessas partes do XHTML.

Como disse, gosto de abordagens práticas, então salve este arquivo zipado no seu computador e extraia-o. Abra o html com o seu navegador e com um editor de texto (pode ser o notepad). É uma página fictícia de um blog. Examinando o código fonte XHTML você verá que quase tudo é familiar.

A primeira novidade é o elemento link, dentro do head da página (no head definem-se informações sobre a página):

Nele, quando seu atributo “rel” é “stylesheet”, você define uma folha de estilos para ser usada no documento. O atributo “href” define o endereço da folha de estilos, caso a url não seja completa, ele presume que seja relativo ao documento XHTML. O “type” deve ser “text/css”. No “title” você pode dar um título para aquela folha de estilos. Por último, o “media” deve ser “screen”.

Agora crie um arquivo vazio e salve-o como “tutorialcss.css” e salve na mesma pasta em que salvou o XHTML. Como você pode ver, o XHTML está apontando para exatamente esse arquivo. Agora vamos editá-lo e começar a definir o visual da nossa página!

Nota: Editores

Você pode estar fazendo tudo no bloco de notas, mas é um sacrifício desnecessário. Existem editores de HTML/CSS que facilitam sua vida, por exemplo, com o “syntax highlighting” que deixa os elementos, atributos etc com cores diferentes deixando mais fácil a visualização. Eu recomendo o HTML Kit mas existem vários outros. Não se assuste com a quantidade de recursos; simplesmente trate-os como um bloco de notas melhorado e vá aprendendo a usar as facilidades que eles fornecem aos poucos.

DIVs, ids e classes

OK, eu menti, ainda não estamos prontos para mexer no CSS. Vendo o XHTML de exemplo você deve ter visto outras coisas novas. Uma delas é o elemento div. Basicamente, ele é um elemento que não faz nada. Ele serve para agrupar coisas em blocos lógicos. No exemplo, todos os posts estão dentro de um div, assim como a lista de links está em outro, e cada post separado também.

Ids e classes fazem a ponte entre o XHTML e CSS. Ambos são atributos que podem ser definidos em quase todos os elementos XHTML. O id define um identificador para um elemento. No exemplo, o div contendo a lista de links possui o id “sidebar”. Os posts estão num div com id “content”. Um documento XHTML não pode ter id’s repetidos.

O atributo class define a classe à qual um elemento pertence. A utilidade disso vai ficar mais claro depois, mas por enquanto note o uso no exemplo: todos os divs contendo posts possuem a classe “post”; os parágrafos contendo os horários dos posts possuem a classe “postdatetime”; etc.

Cores

Agora sim, vamos editar o CSS! Como eu não gosto de preto em branco, vamos inverter as cores do nosso documento. Coloque isto no seu arquivo CSS:

body {
  color: #FFFFFF;
  background-color: #000000;
}

Salve, e recarregue a página de exemplo no seu navegador. O fundo deverá ficar preto e o texto branco.

Essa é uma regra. Tudo antes do abre-chave “{” é o seletor. Um seletor pode ser o nome de um elemento: no caso, o elemento body, que representa o documento todo.

Dentro das chaves (“{“, “}”), tem-se as declarações. Cada declaração tem uma propriedade e um valor para ela, terminando num ponto-e-vírgula. No caso, temos duas declarações: uma definindo a cor (“color”) como branca e a cor de fundo (“background-color”) como preta.

Caso não seja familiar com a notação em tripletos hexadecimais, consulte essa lista de cores para ter vários exemplos. Preto é #000000, branco é #FFFFFF. Você também pode usar color pickers na internet ou em programas de edição de imagem para achar o código da cor que você quer.

Note que definimos as cores do elemento body, mas mesmo assim mudamos a cor do texto contidos nos parágrafos (p), por exemplo. Isso acontece porque vários elementos herdam certos atributos de seus pais. No exemplo, os parágrafos herdam de seus pais, que herdam de seus pais, etc, que herdam de body. Os links não herdam as cores porque o padrão azul é definido pela folha de estilos padrão do navegador. O background-color não é herdado, só que como o valor padrão para os outros elementos é “transparent” (transparente), eles acabam ficando com a cor de fundo do body.

Voltando, agora vamos mudar a cor de fundo de certas partes do documento para podermos entender melhor a estrutura dele. Ainda não estou preocupado em deixar as coisas bonitas =) Coloque isto no CSS (abaixo da regra anterior):

#header {
  background-color: #880000;
}

#content {
  background-color: #008800;
}

#sidebar {
  background-color: #000088;
}

Atualize a página. Agora você poderá ver o cabeçalho em vermelho, os posts em verde e a lista de links em azul. Os seletores aqui são diferentes: quando começam com “#”, eles se referem a elementos com aquele determinado id. Então “#sidebar” se refere ao elemento com id “sidebar”.

Vamos colorir os posts separadamente. Insira uma nova regra:

.post {
  background-color: #888888;
}

Atualize. Os posts ficarão cinzas; aparecerá um barra verde entre eles, que é a cor de fundo do div de id “posts” onde eles estão contidos. Note que usamos outro tipo de seletor: quando ele começa com ponto (“.”), ele se refere a todos os elementos com aquela determinada classe. Então “.post” se refere a todos elementos com classe “post”.

Vamos aproveitar e arrumar a cor dos links:

a:link {
  color: #FFFFFF;
}

a:visited {
  color: #AAAAAA;
}

a:hover {
  color: #FFFF00;
}

Salve, atualize. Os links ficarão brancos e os links visitados, cinzas. E quando você passar o mouse por cima deles, ficarão amarelos. Usamos aqui outro tipo de seletor: o de elemento (“a”) combinado com o de pseudo-classe (“:link”, “:visited” e “:hover”). O “:link” serve para links não visitados pelo usuário, portanto só funciona com o elemento “a”. O “:visited” é para links já visitados, também só vale para “a”. O “:hover” serve para momentos quando o mouse passa por cima de um elemento. Teoricamente ele serve para qualquer elemento, mas no Internet Explorer até a versão 6, só funciona para links. (Aqui você começa a entender porque webdesigners odeiam a Microsoft.)

Posicionamento

Nossa página está feia como o capeta, mas não vamos nos preocupar com a harmonia das cores e sim com o posicionamento. Existem várias técnicas para se montar o layout de uma página e aqui vou ensinar a mais simples. Não é a melhor, nem a mais flexível, mas a mais fácil de entender.

O layout que usaremos vai ser o comum de blogs: uma imagem no topo contendo o nome do blog, o conteúdo numa coluna mais ou menos larga (usaremos 500 pixels) e uma coluna de links à direita com largura de 200 pixels.

Uma nota para quem não sabe o que são pixels: são a unidade básica de medida na tela de um computador. Um ponto (.) geralmente ocupa 1 pixel na tela. A maioria dos monitores opera numa resolução de 1024×768: isto é, 1024 pixels de largura por 768 pixels de altura. Tempos atrás o predominante era 800×600. Como você não tem como adivinhar qual vai ser a resolução do monitor do usuário, é bom montar a sua página de forma que caiba numa resolução conservadora, no caso, 800×600. Aí vai de sua escolha.

Existem vários modos de se posicionar elementos numa página. Um deles é o absoluto: você define exatamente em qual ponto da tela o elemento irá estar, e opcionalmente qual a largura e altura dele.

Na imagem de cabeçalho de nossa página, vamos usar uma imagem de 700×400 pixels. Vamos decidir alinhar nosso blog no lado esquerdo da tela. Então já temos o posicionamento do nosso cabeçalho (o div com id “header”, e que está com fundo vermelho): no canto superior esquerdo da tela, com largura 700 pixels e altura 400 pixels.

Para especificar a posição do elemento, damos a coordenada do ponto superior esquerdo dele. Nosso cabeçalho está justamente no ponto superior esquerdo da tela, portanto suas coordenadas são 0 na horizontal e 0 na vertical. Agora podemos especificar nossa regra:

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 700px;
  height: 400px;
}

A propriedade “position” define o tipo de posicionamento. Por padrão ele é “static”, o que significa que ele segue o “fluxo” da página. Quando ele é “absolute”, isso indica que deve-se definir a posição exata do elemento na tela através das propriedades “top” e “left”. No “top” você especifica a distância entre a parte de cima do elemento até o topo da tela, e no “left” a distância da parte esquerda do elemento até a borda esquerda da tela. (Você também pode definir “right” e “bottom”, mas não vou usá-los nesse tutorial.)

Note que tanto no “top”, “left”, “width” e “height” precisamos especificar um valor e uma unidade. No caso, “px”, que significa pixels. Nunca esqueça de especificar a unidade!

Ah sim, detalhe técnico: na verdade eu menti. O posicionamento “absolute” é referente ao elemento que contém o elemento sendo posicionado. No nosso caso, o #sidebar, #content e #header estão dentro do div #page. Como não estamos especificando o posicionamento do #page, ele segue o “fluxo” da página e ficará, de qualquer forma, no canto superior esquerdo da tela. Logo, estamos posicionando tudo em relação ao canto superior esquerdo da tela.

Por último, “width” define a largura do objeto, e “height” a altura dele.

Salve a folha de estilos e atualiza a página. Você verá o cabeçalho posicionado exatamente onde queríamos. Note que o resto do conteúdo ficou escondido atrás do cabeçalho: os outros elementos estão como “position: static” e seguem o fluxo normal da página, e elementos com “position: absolute” não interferem com o fluxo normal da página.

Vamos posicionar nossa coluna de conteúdo agora, lembrando que queríamos deixá-la com 500 pixels de largura. Para posicioná-la é só raciocinarmos um pouco: o “left” vai ser “0px” como no cabeçalho, mas e o “top”? Simples, queremos que o conteúdo fique logo abaixo do cabeçalho, portanto o seu “top” vale o mesmo que a altura do cabeçalho: “400px”. E a altura do conteúdo? Simplesmente não damos um valor à ela; desse modo, ela terá a largura necessária para conter todo o texto contido nela. Teremos:

#content {
  position: absolute;
  top: 400px;
  left: 0px;
  width: 500px;
}

Salve e atualize: está começando a ficar mais organizado! Só temos que posicionar a coluna de links agora. Seguindo o mesmo raciocínio: qual será o “top” dela? Claro que “400px”, o mesmo da coluna de conteúdo. E o “left”? Queremos que a coluna de links fique logo ao lado direito da coluna de conteúdo, portanto seu “left” vale a largura da coluna de conteúdo: “500px”. Temos:

#sidebar {
  position: absolute;
  top: 400px;
  left: 500px;
  width: 200px;
}

Salve e atualize: terminamos o posicionamento!

Texto e fontes

Agora vamos mudar a aparência do texto de nossa página. A fonte usada por padrão pelo navegador é geralmente a Times New Roman, mas ela não é muito usada na web. Acredito que a mais popular seja a Verdana. Outras boas candidatas são a Arial e Georgia. Por favor, nunca use a Comic Sans MS. Nunca.

Infelizmente você não terá muita opções quanto às fontes: você não tem como garantir que seus visitantes tenham instaladas as mesmas fontes que você, então você deve se restringir às fontes que já vêm instaladas na maioria dos PC’s (lembrando que nem todo mundo usa Windows!).

Vamos ficar com a Verdana. Agora temos que escolher o tamanho da fonte: isso é um tópico um tanto complicado e controverso, mas não vou entrar em detalhes aqui. Simplesmente vamos definir o tamanho absoluto da fonte que desejamos, em pixels. (Note que a medida em pixels não é usada no Word, por exemplo). Um bom padrão é 12 pixels. Portanto teremos:

body {
  font-family: Verdana, sans-serif;
  font-size: 12px;
}

Salve e atualize: ficou mais bonito, não? Note que especificamos a fonte no “body”: os outros elementos herdarão essas propriedades dele. Mas… o que é aquele “sans-serif” ali? Na propriedade “font-family” você pode definir uma lista de fontes a serem usadas: caso a primeira não esteja disponível, ele tenta usar a segunda, e assim por diante. Na última você é fortemente recomendado a especificar uma das fontes “genéricas”. Elas são:

• “serif”: fontes no estilo Times New Roman
• “sans-serif”: no estilo Verdana, Arial
• “cursiva”: imitando escrita normal, por exemplo, Monotype Corsiva
• “fantasy”: coisas mais viajantes estilo Comic Sans MS
• “monospace”: fontes com largura fixa, tipo Courier New

Definindo uma fonte genérica, você garante que o navegador escolherá um tipo de fonte parecido com a que você queria, caso ela não esteja disponível. E uma nota importante: fontes com espaço devem estar entre aspas. Por exemplo: ‘Verdana, “Times New Roman”, sans-serif’.

Uma coisa que se deve notar é que os títulos (h1, h2) tiveram a fonte mudada, mas não o tamanho. Isso acontece porque o navegador usa uma folha de estilos padrão, e nela está definida os tamanhos dos elementos h1, h2, etc. Para mudarmos isso, é só sobrescrevê-la:

#content h2 {
  font-size: 20px;
}

#sidebar h2 {
  font-size: 14px;
}

Vamos com calma porque aproveitei para demonstrar outro tipo de seletor. Quando você especifica dois seletores um seguido do outro, as regras valerão somente para todas as ocorrências do segundo dentro do primeiro. No nosso exemplo, “#content h2” significa: “todos os elementos h2 que estão dentro do elemento de id “content”. Você pode misturar várias coisas, por exemplo, “#content .post p” significa “todos os elementos p dentro de elementos de classe “post” por sua vez dentro do elemento de id “content”.

Portanto, aqui especificamos um tamanho diferente para os títulos dos posts (20px) e para o títulos das seções da coluna de links (14px).

Também podemos alterar alguns atributos do texto em si. Uma tendência do webdesign atual, e bastante recomendável, é aumentar o espaçamento entre as linhas do texto. Também podemos alterar o alinhamento do texto: esquerda, direita, centralizado, justificado. Aumentar o espaço entre as letras também facilita a legibilidade. Então vamos fazer tudo isso de uma vez só:

body {
  line-height: 150%;
  letter-spacing: 1px;
}

#content p {
  text-align: justify;
}

#header {
  text-align: center;
}

Salve e atualize, e você notará a diferença. Só colocamos os parágrafos do #content justificados, no sidebar fica estranho (tente para ver). Centralizamos também o cabeçalho só para mostrar o alinhamento.

Bordas, Margens e Paddings

Essa é a parte um pouco mais complicada. Bordas são o que você espera que sejam: linhas em torno de elementos. Margens são espaços do lado de fora das bordas, e paddings (“enchimentos”) são espaços entre a borda e o conteúdo do elemento. A melhor forma de entender é com um exemplo, portanto vamos mexer com o cabeçalho:

#header {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 680px;
  height: 380px;
}

Colocamos uma borda de 10 pixels ao redor do cabeçalho. “margin-top” é a margem do topo, “margin-left” da esquerda, “margin-right” da direita e “margin-bottom” a de baixo. Mas… porque mudamos a largura e altura do cabeçalho?

Porque a largura real de um elemento é calculada assim: width + margin-left + margin-right + border-left-width + border-right-width + padding-left + padding-right. Como queremos deixar o cabeçalho com largura de 700px, devemos diminuir do “width” dele a largura das duas margens, que somadas, dão 20px. Logo, “width” passa a ser 680px. O mesmo vale para a altura, similiarmente.

(Note que nós já tínhamos especificados a largura e altura do cabeçalho antes, e estamos redefinindo elas aqui. Isso não é recomendado; o melhor seria alterar a largura e altura onde as especificamos anteriormente. Mas como vamos alterar bastante essa regra que colocamos agora, vou deixar assim para ser mais prático.)

Vamos colocar uma borda agora. Substitua a regra que colocamos antes com essa:

#header {
  margin: 10px 10px 10px 10px;
  border: 2px solid #FFFFFF;
  width: 676px;
  height: 376px;
}

Existem várias coisas importantes aqui então vamos por partes. Primeiro, note a forma como estou definindo as margens agora. Para não precisar ficar escrevendo aquele monte de coisa, você pode especificar as margens numa declaração “margin” só, nessa ordem: top, right, bottom, left (sentido horário partindo de cima). Caso você use um valor só, ele será usado nas quatro margens (portanto poderíamos ter usado simplesmente “margin: 10px”). Caso use dois valores, o primeiro será top/bottom, e o segundo left/right.

Agora a borda. Na verdade existem 12 propriedades para especificar as bordas: “border-top-width”, “border-top-color”, “border-top-style”, etc. Mas é um saco fazer assim, então você pode usar “border-top: width style color” se quiser especificar as bordas uma a uma, ou simplesmente “border: width style color” para especificar todas as bordas numa declaração só. Foi o que fizemos: uma borda de 2 pixels, tipo solid, de cor branca.

Os tipos (style) que você pode usar são “solid” (linha), “dotted” (pontilhado), “dashed” (traços), “double” (duas linhas), “inset” (tipo caixa de texto), “outset” (tipo botão), “groove” (como se fosse uma fenda) e “outset” (como se fosse uma borda 3D).

Note que reduzimos a largura e altura do cabeçalho em 4 pixels por causa das bordas (2px em cada lado).

Vamos mudar o padding agora. Como não existe muito texto dentro do cabeçalho, não poderemos ver direito o efeito dele, então vou exagerar bastante de forma a deixar o título quase no centro do cabeçalho. Para isso vou mudar só o padding-top. Substitua a regra anterior por essa:

#header {
  margin: 10px;
  border: 2px solid #FFFFFF;
  padding-top: 150px;
  width: 676px;
  height: 226px;
}

Note que mudei a especificação do margin como expliquei antes. Veja que eu mudei só a altura agora: como existe um padding de 150px (apenas no topo), diminuí a altura em 150px também. Salve e atualize: o título ficará no centro do cabeçalho.

Uma nota importante: o Internet Explorer, antigamente, usava outro modelo para as bordas – quando você definia um elemento com 500 pixels de largura, ele sempre ficava com 500 pixels de largura, não importa o tamanho das margins, paddings e borders que você especificasse. Pode até fazer mais sentido assim, mas isso é contra a especificação do CSS. Na versão 6 eles consertaram a burrada de modo um tanto estranho, para manter a compatibilidade com sites antigos: o navegador só usa o modelo de bordas certo se você colocar o “DOCTYPE” no início do HTML (abra o HTML que estamos usando, você verá ele lá). Não expliquei o que é o DOCTYPE ainda, mas só saiba que se você removê-lo, o layout do seu site ficará completamente diferente no Internet Explorer!

Agora, espero que você tenha entendido todo o esquema de bordas no CSS. Vamos continuar especificando as bordas e etc das duas colunas. Adicione as regras:

#content {
  margin: 10px;
  border: 2px solid #FFFFFF;
  padding: 10px;
  width: 456px;
}

#sidebar {
  margin: 10px;
  border: 2px solid #FFFFFF;
  padding: 10px;
  width: 156px;
}

Salve e atualize: está ficando bonito, não? =) (Sim, ainda vamos arrumar as cores). Veja que diminuímos as larguras em 44px: 20px de margens, 20px de paddings, e 4px de bordas. A coluna de links ficou meio apertada, e provavelmente o navegador irá violar o padding especificado para poder mostrar algum texto. Agora você poderá ver bem o efeito do padding, na coluna de conteúdo.

Está vendo as datas e tags dos posts? Seria melhor se elas ficassem mais próximas do título. O navegador coloca margens no “top” e “bottom” dos elementos “p” e “h2” por padrão, então vamos sobrescrevê-las usando:

.postdatetime, .postmetadata, #content h2 {
  margin: 5px 0px;
  line-height: 100%;
}

.postdatetime, .postmetadata {
  font-size: 10px;
}

.post {
  margin-bottom: 3em;
}

Seletor novo! Você pode especificar regras para vários seletores diferentes separando-os por vírgulas. Nesse caso, as regras valerão tanto para elementos da classe “postdatetime”, da classe “postmetadata”, e para elementos h2 dentro do elemento com id “content”. Restauramos o “line-height” de tudo para 100% porque ele também contribuía para aumentar o espaço entre os elementos.

Aproveitei também para diminuir o tamanho da fonte no horário e tags, para chamar menos atenção. Também aumentei a borda inferior dos posts, para deixá-los mais espaçados. A unidade “em” é relativa ao tamanho da fonte presente naquele elemento, no caso, como a fonte é de 12px, 3em valem 36px.

Listas

Na colunas de links usei listas para separar as seções, e mais listas para os conjuntos de links. A primeira lista de seções tem mais efeito lógico e não queremos que realmente pareça uma lista. Vamos eliminar os paddings e os quadradinhos desnecessários dela:

#sidebar ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

A propriedade “list-style-type” especifica o tipo das “bolinhas” que ficam na frente de cada elemento da lista. Ela pode valer “disc”, “circle” ou “square” (disco, círculo e quadrado). Para elementos “ol” (lista numerada) você também pode usar “decimal” (números), “lower-roman” (números romanos, minúsculas), “upper-roman” (números romanos, maiúsculas) entre outros.

Salve e atualize. Note que não só a lista principal foi alterada, mas as listas com os links também. Lembre que o seletor “#sidebar ul” especifica “qualquer elemento ul dentro do #sidebar”. Porém, se fizermos uma regra específica para as listas de links:

#sidebar ul li ul {
  list-style-type: circle;
}

Salve e atualize: as listas de links terão círculos na frente de cada item. No CSS, regras mais específicas têm prioridades maior, então embora a regra “#sidebar ul” se aplique também às listas de links, a regra “#sidebar ul li ul” é mais específica e sobrescreve ela. (Se você for muito atento pode perceber que eu poderia ter usado o seletor “#sidebar ul ul”, mas é uma boa prática especificar o “caminho completo” até o elemento desejado.)

Só que os círculos ficaram numa posição estranha! Sem problemas, aumente o padding da esquerda. Substitua a regra anterior:

#sidebar ul li ul {
  list-style-type: circle;
  padding-left: 20px;
}

Salve e atualize. Agora está do jeito que queríamos. Só que não estou gostando muito do espaçamento entre as seções da coluna de links, então vamos mudá-los, parecido com o que fizemos entre os posts:

#sidebar ul li {
  padding-bottom: 1em;
}

#sidebar ul li ul li {
  padding-bottom: 0em;
}

Note que tive que usar a mesma técnica para mudar somente o padding da lista principal, sobrescrevendo o padding nas listas de links.

Imagens

Vamos colocar a imagem no nosso cabeçalho:

#header {
  background-image: url("tutorialcss.jpg");
}

Simples, não? Para não ficar só nisso, vou explicar toda a família de propriedades “background”:

• “background-image”: acabei de mostrar, o endereço da imagem na forma ‘url(“endereço”)’.
• “background-color”: a cor de fundo, já apareceu no tutorial.
• “background-repeat”: como a imagem de fundo se repete, se houver. Pode ser “repeat” (repete na horizontal e vertical, tipo ladrilho), “repeat-x” (só repete na horizontal), “repeat-y” (só na vertical) e “no-repeat” (não repete). No caso eu deveria ter usado “no-repeat”, mas como a imagem é do tamanho exato do div em que ela está contida, tanto faz especificar ou não.
• “background-attachment”: como a imagem de fundo se comporta quando você navega pela página. Se for “scroll”, a imagem se move junto, se for “fixed”, a imagem fica parada na tela sempre.
• “background-position”: posição da imagem de fundo. Pode aceitar várias combinações de valores, por exemplo, “top center” é no topo (vertical) e centro (horizontal), “bottom left”, etc.
• “background”: você pode especificar tudo isso numa declaração só, especificando nessa ordem: color image repeat attachment position (pode omitir alguns, mas tem que ser na ordem).

Finalizando

Agora peço desculpas a todos, mas eu não sou um webdesigner, sou um programador =) Vou ajeitar as cores para ficar uma coisa mais decente mas o resultado final não vai ficar fantástico (até consigo fazer layouts um pouco melhores, mas eles seriam mais complicados de explicar).

Enfim: primeiro retire a cor cinza de fundo da classe .post. Agora mude a cor de fundo do #sidebar para #3E4B59 e a cor do #content para #2D230A. Salve e atualize. Estamos quase prontos! O único problema é o título do blog que está voando em cima da imagem do cabeçalho. (Eu devia ter colocado o título na imagem, mas esqueci). Então vamos sumir com ele:

h1 {
  visibility: hidden;
}

E pronto! Nosso layout está terminado. Sim, está meio feinho, mas aí vai de você ir explorando as possibilidades e usar sua criatividade. Note que não tocamos em uma letra do HTML, fizemos tudo pelo CSS!

Lembre-se de sempre testar seu layout com todos navegadores principais: Internet Explorer, Firefox e Opera.

Outras propriedades interessantes

• “font-style”: quando é “italic”, deixa texto em itálico.
• “font-weight”: quando é “bold”, deixa o texto em negrito. Pode ser um valor de 100 a 900 (de 100 em 100) indicando o “peso” da letra.
• “overflow”: às vezes você pode querer colocar parte do conteúdo dentro de um div de tamanho fixo. Quando o texto dentro de um elemento é maior que ele, essa propriedade determina o que acontece. “visible” (padrão) faz o texto sair do elemento, “hidden” esconde a parte do texto que “vaza” do elemento, “scroll” fazem aparecer barras de rolagem (obrigatoriamente), e “auto” faz apareceram barras de rolagem só se o texto “vazar”.
• “text-decoration”: “underline” põe um sublinhado (padrão em links), “overline” uma linha em cima, “line-through” uma linha através, “blink” pisca o texto (nunca use isso, obrigado) e “none” não coloca nada (use “none” em links para tirar o sublinhado).

Links

A melhor referência é a especificação do CSS 2.1, lá tem tudo o que você pode desejar encontrar. O único porém é que está em inglês. Lá tem a lista com todas as propriedades, e a folha de estilos padrão dos navegadores (podem existir variações).

Para se inspirar, tem o CSS Zen Garden (uma página HTML fixa com vários CSS’s para você escolher e poder ver a flexibilidade do CSS) e o CSS Reboot.

Como sempre, deixem suas dúvidas nos comentários que responderei o mais rápido possível.