[HaRtEr]

Nos velhos tempos, lembra-se de como você formatava o texto de um parágrafo alinhado ao centro?
Acho que era alguma coisa mais ou menos assim:

<center>
    <p>
        <font size="2">
            <font face="Verdana">
                E aqui dentro ia o texto.
            </font>
        </font>
    </p>
</center>

Isso tudo dentro do arquivo HTML, deixando o código complicado, sujo e, conseqüentemente, maior.
Sem falar naqueles problemas típicos do chefe mudando de idéia sobre o tamanho ou a cor da fonte, fazendo você perder um tempo precioso procurando as tags para mudar um simples valor.

Com CSS temos total controle sobre a formatação do texto: alinhamento, cor, família de fonte, altura de linha, espaçamento das letras, etc...

Mais abaixo, vamos conhecer as propridedades mágicas que usaremos para formatar nosso texto.

Propriedades de FONT
O CSS tem uma propriedade chamada FONT. Com ela podemos manipular: estilo do texto, peso do texto, tamanho, família de fonte, etc.

Font-Family
Serve para: Define o tipo da fonte.
Valores possíveis: Nome de fontes específicas: Verdana, Arial, Tahoma, etc
                                    Nome de famílias de fontes: Sans-Serif, Serif, etc.
Exemplo: p { font-family: Verdana; }

Font-Size
Serve para: Define o tamanho da fonte.
Valores possíveis: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, Tamanho em unidades %
Exemplo: p {font-size: 5px;}

Font-Weight
Serve para: Define o "peso" da fonte.
Valores possíveis: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 e 900
Exemplo: p {font-weight: bold;}

Font-Style
Serve para: Define o tipo de letra.
Valores possíveis: normal, italic e oblique
Exemplo: p {font-style: italic;}

Você pode definir todas estas propriedades numa mesma declaração. Por exemplo:

p {font: italic bold 10px Verdana;}

Definimos acima que o parágrafo deverá ter as seguintes características: itálica, negrito, com tamanho de 10 Pixels e fonte Verdana.

Algumas dicas importantes ao formatar fontes:

Use sempre uma família de fontes - Digamos que você queira usar Arial, mas se o computador do visitante não tiver Arial, você quiser Verdana como alternativa. Para isso, você escreveria: {font-family: Arial, Verdana;}. Mas o que acontecerá se o computador do visitante também não tiver Verdana? Quantos nomes possíveis de fonte você vai escrever? Experimente: {font-family: Arial, Verdana, sans-serif;}. Se não houver Arial nem Verdana, o computador vai selecionar uma outra fonte da família sans-serif (não serifada).

Escreva para a maioria - A esmagadora maioria das fontes disponíveis suporta apenas os pesos "bold" e "normal", e os estilos "italic" e "normal". Então não perca tempo com os outros valores por enquanto.

Use tamanhos relativos - Se você usar tamanhos em pixels ou outra medida absoluta, o Internet Explorer vai impedir o usuário de aumentar o tamanho da fonte se ele não conseguir ler.

Propriedades de Text
Estas propriedades definem as características do bloco de texto.

Color
Serve para: Define a cor do texto.
Valores possíveis: Por extenso (blue, orange), Hexadecimal (#FFFFFF) e RGB ( rgb(255,255,255) )
Exemplo: p { color: orange; }, p { color: #FFFFFF }

text-align
Serve para: Define o alinhamento do texto.
Valores possíveis: right, center, left e justify 
Exemplo: p {text-align: center;}

text-decoration
Serve para: Aplica uma decoração de linha ao texto. none
Valores possíveis: underline, overline, line-through e blink 
Exemplo: p {text-decoration: underline;}

text-indent
Serve para: Identa a primeira linha de texto.
Valores possíveis: px ou %
Exemplo: p {text-indent: 10px; }

text-transform
Serve para: Controla as letras do texto (maiúsculas/minúsculas).
Valores possíveis: none, capitalize, uppercase, lowercase 
Exemplo: p {text-transform: uppercase;}

letter-spacing
Serve para: Controla o espaço entre as letras.
Valores possíveis: normal, Tamanho em unidades 
Exemplo: p {letter-spacing: 10px;}

line-height
Serve para: Define a altura da linha do texto.
Valores possíveis: normal, Tamanho em unidades 
Exemplo: p {line-height: 10px;}

Uma dica interessante: se a cor que você escolher tiver valores hexadecimais em duplas, como #EE6699, você pode abreviar o código escrevendo apenas uma vez cada caractere. Assim: {color: #E69;}

Aqui fazemos referência a um arquivo CSS externo, que possui o seguinte conteúdo:

Aqui definimos a fonte para o corpo do documento e para as tabelas

body, td{
  font: 10px 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
}

Aqui fazemos com que os links dentro das tabelas apareçam em negrito

td a{
  font-weight:bold;
}

Aqui definimos o tamanho da fonte para títulos dentro das tabelas

td h1{
  font-size:10px;
}

Bom é isso, tentei explicar da melhor forma possível.
Abraços pessoal!

[Thony Conde]

Muito bom HaRtEr!

Parabens e mantenha-se presente! A ideia é esta, todos participando criando cada vez mais conteúdo em nosso Fórum. Que vai tornar-se importante em futuras pesquisas de usuários novatos!

Continue assim.

[spellller]

Complementando...
Outro tutorial beeeeeeem basicão que explica que a sintaxe CSS é composta de3 partes:
um seletor, uma propriedade e um valor.
seletor {prpriedade: valor;}

No Bloco de Notas Cliquem e verão o beabá básico mesmo.
Exemplo de página com seu código muito bem implementado: Exemplo

[Fabio Fermo]

Parabéns pelo tutorial. É de grande importância para os que estão iniciando em CSS.
Parabéns mesmo!

[Maurivan]

Muito interessante este post, acabei de favoritá-lo aqui, muito útil para quem está iniciando com CSS, pode ter certeza! :]

[Manzano]

Achei muito interessante este Post sobre CSS. Gostaria de complementar com um link que uso sempre que necessito algo
me ajuda muito

http://www.maujor.com/