Mais um conceito prelimar, antes que a gente entre nos detalhes da especificações dos estilos. Como veremos nas páginas que se seguem, as especificações para estilo dos style sheets em link e das tags de style inseridas são feitas com relação a vários elementos de HTML como <p>, <h1>, <li>, <table>, e assim por diante. Mas alguma flexibilidade nos estilos pode ser ganha através da herança de estilo. A herança significa que você pode especificar classes adicionais a cada elemento, e cada classe herdará algumas características de estilo de elementos básicos, a não ser que ela as substitua por valores novos ou essa característica não seja herdada. (A tabela de propriedades indica quais são herdadas e quais não.)

Exemplo

P
{
font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif', 'Helvetica';
font-weight: bold;
font-size: 11pt;
color: #000066;
position: relative;
margin-left: 1cm;
}

produz um parágrafo que se parece com isto... enquanto que

P.small
{
font-family: 'Arial', 'Sans-Serif';
font-weight: normal;
font-size: 8pt;
text-align: center;
}

produz um parágrafo que se parece com isto.

Para produzir um parágrafo básico, você deve usar simplesmente uma tag <p>, e para produzir o parágrafo pequeno e centralizado, você deve acrescentar o atributo class=small (<p class=small>). Observe que também podem ser declaradas classes gerais, que podem então ser usadas com qualquer elemento HTML:

Exemplo

.note
{
font-size: 10pt;
color: #006600;
background: #FFFFFF;
position: relative;
padding: 2pt;
border-width: thin;
border-style: ridge;
}

Com esta classe definida, uma parágrafo designado por <blockquote class=note> se pareceria com este. (A borda não será visível se você estiver usando IE 3.x)

Observe que somente um nível de classes é permitido: uma classe do tipo P.note.red não funciona.

Classes Especiais para Links

Você deve conhecer também as classes pré-definidas para a tag <a>:

A.link { color: #FFFF00 }
A.visited { color: #990099 }
A.active { color: #FF0000 }

Se você quiser que links e links visitados apareçam com cores distintas, como estamos acostumados a ver na maioria das páginas web, então estas classes devem ser especificadas nos seus style sheets. E uma complicação adicional: a classe A.active ainda não é suportada pelo Internet Explorer. Isto não é muito bom, porque o link ativo pode ser útil para páginas com frames, onde um frame carrrega o conteúdo das diferentes seções de páginas (isto é, a mudança de cor para o link ativo indicaria automaticamente a localização presente do usuário na lista de conteúdo, um efeito que os web designers geralmente têm que atingir através de meios complicados e ineficientes). Entretanto, devido ao fato de que a classe A.active é potencialmente útil, eu recomendo colocá-la desde já nos seus style sheets, porque então ela estará presente quando chegarem os novos navegadores que a suportem -- enquanto isso ela não causará nenhum dano.

Existem ainda algumas outras "pseudo-classes" pré-definidas para a primeira linha e primeira letra de blocos, mas elas até agora não são suportadas pelo Internet Explorer.

Falando em geral, a herança é um atalho poderoso para criar variações dentro de um estilo (style), do mesmo modo que a herança permite aos programadores em linguagens orientadas a objetos criarem variações de objetos (criar style sheets é de fato uma forma muito simples de programação orientada a objetos). Existem poucas ocasiões em que a herança pode ser uma perturbação, nos casos em que certas propriedades são herdadas sem que você queira (nós vamos ver um exemplo mais adiante).