| Apresentação | GuestBook | Links | Contato |
| Introdução | |
 | Sobre |
| Vantagens |
| Limitações |
| Implementando |
| Precêdencia |
| Trabalhando com CSS | |
| Unidades de Medida |
| Herança |
| Especificando um estilo |
| Propriedades e Valores | |
| Fontes |
| Textos |
| Background e Cores |
| Caixas |
| Listas |
| Posicionamento |
| Impressão |
| Filtros |
| Amostras de Filtros |
| Outras Propriedades |
| Contribuições dos Usuários | |
| Dicas e exemplos |
| Novidades |
| Fórum de discussão |
 |
Conceito de Herança |  |
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-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.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 }
Tal como em qualquer outra definição de classes, você pode colocar cores ou outros valores que desejar; nós vamos ver como fazer isto nas páginas seguintes.
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.
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).