Por questões de compatibilidade entre os navegadores, nós adotamos como padrão a unidade de medida “em”, principalmente para definição do tamanho das fontes.

“em” é uma medida relativa, isso quer dizer que ela pega como base um valor de referência anteriormente definido.

Exemplo

Coloque em um arquivo html, as seguintes marcações:

Dentro do body:

<div id="conteudo">
  <h1>Olá, aqui é o título</h1>
  <p>E aqui é um <strong>paragráfo</strong>.</p>
</div>

Defina o css abaixo para o html de cima:

html { font-size: 100%; }
body { font-size: .68em; }

#conteudo h1 { font-size: 1.45em; }
#conteudo p { font-size: 1.1em; }
#conteudo p strong { font-size: 1.16em; }

Explicação

1. html “100%”. Isso atribuí ao html o tamanho da fonte padrão dos navegadores, que é 16px.
2. body “.68em”. Como o tamanho da fonte padrão dos navegadores é 16px, pegamos 11px que é o valor que queremos e dividimos por 16px. Com isso chegamos no valor “0.68″.

Cálculo feito: 11/16 = 0.68

A idéia é que 11px é igual a 0.68em de 16px.

Em outros casos será da mesma forma, pegamos o valor que queremos e dividimos pelo valor de referência que foi definido anteriormente.

Na tabela abaixo estão os dados sobre as medidas dos elementos h1, p e strong.

Para compreender melhor esses valores definidos, veja a tabela:

O valor do strong é dividido por 12 porque ele pega o valor do elemento de referência dele, que é o parágrafo e que tem 12px de tamanho da fonte.

Então temos uma fórmula para conversão de “px” para “em” que é:

(valor a ser convertido) / (valor de referência) = (valor que desejamos)

Usando essa medida conseguimos a compatibilidade desejada entre os navegadores.

Veja mais conteúdo sobre unidades de medida usadas no css:

• Unidades de medida de comprimento CSS – Maujor
• Font size: the ‘font-size’ property

A forma seguinte de alinhamento vertical e horizontal é uma combinação de:

• Posicionamento absoluto
• Margens negativas

Para começar entender como funciona esse método copie o código XHTML abaixo e insira dentro da tag body:

  <div id="limites">
    <div id="conteudo">
      <h1>Alinhamento vertical e horizontal com <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr> e <abbr title="Cascading Style Sheets">CSS</abbr></h1>
      <p>Olá mundo!</p>
    </div>
  </div>

Nesse exemplo o elemento que precisa posicionar no meio da tela será a div#limites.

Como padrão de documento base para CSS coloque o seguinte reset:

  * { margin: 0; padding: 0; z-index: 1; }

E agora para começar a posicionar a div#limites no meio da tela declare o seguinte código:

  #limites { position: absolute; top: 50%; left: 50%; width: 680px; height: 400px; background-color: #eee; }

Isso vai fazer que a div#limites tenha os seguintes estilos:

• posição absoluta
• canto superior esquerdo a uma distância igual a 50% do tamanho da tela
• largura e altura
• fundo cinza.

Com isso o resultado será meio estranho visualmente, mas esta tudo ok.

Veja ampliado

Agora é preciso puxar a div#limites para cima e para esquerda usando margim negativa, é por esse motivo que é necessário a div#limites ter uma largura e altura definida.

Puxe então a div#limites para cima ↑ com um valor igual à metade da sua altura ( margin-top: -200px; ) e o mesmo deve ser feito para o lado esquerdo ←, puxe para esquerda à metade da sua largura ( margin-left: -340px; ).

Veja ampliada

Com isso é possível posicionar a div#limites exatamente no meio da tela.

Veja ampliada

Veja o arquivo pronto do exemplo sobre alinhamento vertical e horizontal deste post.

Outros exemplos e links interessantes

• Exemplo de alinhamento horizontal e vertical relativo a um elemento
• Posicionamento relativo
• Alinhamento horizontal e vertical

Há diversas maneiras de definir determinadas propriedades do CSS como background, font, margin, padding, etc.

Background

Como o próprio nome diz, a propriedade background define o fundo do elemento, com uma cor sólida ou uma imagem. Neste último caso, pode-se dizer se esta será repetida, seu posicionamento e comportamento.

seletor {
background-color: #fff;
background-image: url(imagem.jpg);
background-position: bottom;
background-repeat: no-repeat;
}

Como pode-se perceber, esta maneira deixa seu código muito extenso, então vamos abreviar estas propriedades em uma única linha. Neste caso, não há importância na ordem pela qual você dispõe os valores, mas é interessante manter um padrão de escrita:

seletor { #fff background: url(imagem.jpg) bottom no-repeat; }

Color

Como nem todos ainda sabem, é importante comentarmos sobre a abreviação na declaração da escrita das cores. Quando utilizamos os valores hexadecimais, há casos nos quais podemos escrever apenas 3 caracteres, ao invés dos 6 que estamos acostumados.

seletor { color: #aaff00; }

Podemos abreviar desta forma:

seletor { color: #af0; }

A lógica da abreviação é simples: cada caractere representa um par de caracteres da escrita não abreviada.

Margin e padding

A lógica para abreviação das propriedades margin e padding é a mesma. Vejamos o exemplo da escrita sem abreviação:

seletor {
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
}

Para abreviar existem algumas maneiras:
Neste caso, os valores são aplicados para todos os lados do elemento:

seletor { margin: 1px; padding: 1px; }

Se as unidades do topo e rodapé forem as mesmas (1px), esquerda e direita forem iguais entre si (5px), podemos escrever de outra forma:

seletor { margin: 1px 5px; padding: 1px 5px; }

Mas há situações nas quais precisa-se utilizar uma unidade para o topo (1px), outra (igual) para os lados (5px) e mais uma para o rodapé (6px):

seletor { margin: 1px 5px 6px; padding: 1px 5px 6px; }

E, por fim, uma maneira simplificada de escrever as dimensões para todos os lados, mas deve-se seguir o sentido horário, ou seja: top (1px), right (2px), bottom (3px) e left (4px):

seletor { margin: 1px 2px 3px 4px; padding: 1px 2px 3px 4px; }

Border

Para abreviar a propriedade border é tão fácil quanto a background, pois não exige uma ordem padrão. Segue abaixo exemplo da escrita sem abreviações:

seletor {
border-width: 1px;
border-style: solid;
border-color: #000;
}

Para abreviar esta propriedade é simples:

seletor { border: 1px solid #000; }

Caso queira estilizar somente a borda do topo, por exemplo, é só acrescentar “-top” após o “border”:

seletor { border-top: 1px solid #000; }

Font

Esta propriedade tem a função de estilizar o tamanho da fonte, sua linha, família, peso, etc. A forma mais complexa de escrita é a seguinte:

seletor {
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 1.3em;
font-family: "Trebuchet MS", Arial, sans-serif;
}

Muitos não sabem que a propriedade line-height se inclui nesta abreviação, por não ter o prefixo “font”. Veja agora a maneira simplificada de escrever a propriedade font:

seletor { font: normal small-caps bold 1em/1.3em "Trebuchet MS", Arial, sans-serif; }

Fique atento para a ordem de escrita e, caso o nome da fonte tenha espaço, escreva utilizando aspas duplas, como no exemplo acima.

List-style

A propriedade list-style é utilizada para estilizar a marcação de itens de lista. A escrita não abreviada é a seguinte:

seletor {
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);
}

Para escrevê-la de forma simplificada não é necessária uma ordem certa das propriedades. Veja o exemplo da abreviação:

seletor { list-style: circle inside url(bullet.gif); }

Há outras propriedades que podem ser simplificadas, como a outline mas, devido sua falta de suporte, não é necessário exemplificá-la aqui.