Quando um navegador lê uma folha de estilo, ele irá formatar o documento de acordo com ela. Existem três maneiras de inserir uma folha de estilo:

Folha de estilo externa

Uma folha de estilo externa é ideal quando o estilo é aplicado a muitas páginas. Com uma folha de estilos externa, você pode mudar a aparência de um site inteiro, alterando um único arquivo. Cada página deve indicar a folha de estilo usada como base por meio da tag "link", como já vimos anteriormente. A tag link deve estar dentro da seção "head" do arquivo HTML. Veja:


O browser lerá as definições de estilo a partir do arquivo meuestilo.css e formatará o documento de acordo.

Uma folha de estilos externa pode ser escrita em qualquer editor de texto. Porém, sugiro os editores bem "simples", como nano, gedit ou mesmo o vim ou emacs. Nada de OpenOffice e companhia, pois esses editores mais sofisticados alteram o conteúdo do arquivos para melhorar sua aparência e seu uso pelo programa. O arquivo .css não deve conter quaisquer tags HTML. E, obviamente, a folha de estilo deve ser salva com extensão .css. Veja um exemplo de folha de estilo:


Lembre-se: Não deixe espaços entre o valor da propriedade e as unidades! Por exemplo, usar "margin- left: 20 px" (e não usar "margin-left: 20px") só irá funcionar no IE, mas não funcionará no Firefox ou Opera.

Folha de estilo interna

Uma folha de estilo interna deve ser utilizada quando um determinado documento tem um estilo único.

Você define os estilos internos na seção "head" usando a tag <style>, como neste exemplo:


O browser agora lê as definições de estilo e formata o documento de acordo com elas.

Lembre-se: Um browser normalmente ignora tags desconhecidas. Isto significa que um browser que não suporta estilos, vai ignorar a tag "style", mas seu conteúdo será exibido na página. É possível evitar que um browser antigo faça isso, ou seja, não exibir o conteúdo das definições de estilo. Para isso incluímos as definições entre comentários do HTML. Veja:

Estilos em linha

Um estilo "em linha" perde muitas das vantagens das folhas de estilo, misturando conteúdo com apresentação. Use este método o mínimo possível, por exemplo quando um estilo será aplicado uma única vez em um elemento.

Para utilizar estilos "em linha" usar o atributo "style" na respectiva tag. Este atributo style pode conter qualquer propriedade CSS. Veja um exemplo de como alterar a cor e a margem esquerda de um parágrafo:

Múltiplas folhas de estilo

Se algumas propriedades foram indicadas para o mesmo seletor em diferentes folhas de estilo, os valores serão herdadas da folha de estilo mais específica. Por exemplo, uma folha de estilos externa tem estas propriedades para o seletor h3:


E uma folha de estilo interna tem estas propriedades para o seletor h3:


Se a página com a folha de estilo interna também tem links para a folha de estilo externa, as propriedades de h3 serão:


O que aconteceu? A cor foi herdada da folha de estilos externa, mas o alinhamento do texto e o tamanho da fonte foram substituídos pela folha de estilo interna. Traduzindo, o que estiver indicado na folha de estilos mais específica será utilizado, depois a segunda folha de estilos mais específica é usada, e assim por diante.

Conclusão

É isso, pessoal. Para os iniciantes, já serviu como uma boa base para começar. E para os avançados, aí está uma referência rápida. No próximo artigo veremos pontos mais específicos: como aplicar estilos de background (cor, imagem, etc), de texto, de fonte, e o importante conceito do modelo da caixa.

Até o próximo!

O segundo artigo desta série está na página Manual de Estilo - Parte 2.