En el primer ejemplo, se establecía que el color de los elementos 'H1' fuera azul. Supongamos que hay un elemento 'H1' que contiene un elemento enfatizado:
<H1>¡El título <EM>es</EM> importante!</H1>
Si no se ha asignado ningún color al elemento 'EM', la palabra "es" enfatizada heredará el color del elemento padre, es decir, también aparecerá en azul. Otras propiedades de estilo se heredan de la misma manera, p.ej., 'font-family' y 'font-size'.
Para establecer una propiedad de un documento a un "valor por defecto", basta con establecer esa propiedad en un elemento del que desciendan todos los elementos visibles. En los documentos HTML, el elemento 'BODY' puede servir para este propósito:
BODY {
color: black;
background: url(textura.gif) white;
}
Esto funcionará incluso si el autor ha omitido la etiqueta 'BODY' (lo cual es legal), ya que el intérprete HTML sobreentenderá la etiqueta ausente. El ejemplo anterior establece que el color del texto es negro y que el fondo es una imagen. El fondo será blanco si la imagen no está disponible. (Véase en la sección 5.3 más información a este respecto.)
Algunas propiedades de estilo no se heredan del elemento padre al elemento hijo. El porqué de esto se comprende intuitivamente en la mayoría de los casos. P.ej., la propiedad 'background' no se hereda, pero el fondo del elemento padre se verá por defecto a través del elemento hijo.
Muchas veces el valor de una propiedad es un porcentaje que se refiere a otra propiedad:
P { font-size: 10pt }
P { line-height: 120% } /* relativo a 'font-size', es decir, 12pt */
Para todas las propiedades que admiten como valor un porcentaje, se define a qué propiedad se refiere éste. En el ejemplo, los elementos hijos de un elemento 'P' heredarán el valor calculado de 'line-height' (es decir, 12pt), no el porcentaje.
Para incrementar el grado de control sobre los elementos, se ha añadido un nuevo elemento a HTML [2]: el atributo 'CLASS'. Se pueden clasificar todos los elementos contenidos en el elemento 'BODY', y en la hoja de estilo se puede hacer referencia a cada clase:
<HTML>
<HEAD>
<TITLE>Titulo</TITLE>
<STYLE TYPE="text/css">
H1.pastoral { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>Verde que te pasas</H1>
</BODY>
</HTML>
Las reglas normales de herencia también se aplican a los elementos clasificados: heredan valores de su padre en la estructura del documento.
Se puede hacer referencia a todos los elementos de la misma clase omitiendo el nombre de la etiqueta en el selector:
.pastoral { color: green } /* todos los elementos de la clase pastoral
(CLASS=pastoral) */
Sólo se puede especificar una clase por selector. Por lo tanto, 'P.pastoral.marino' es un selector no válido en CSS1. (Los selectores contextuales, descritos más adelante, pueden tener una clase por cada selector simple.)
El CSS le da tanta potencia al atributo 'CLASS' que en muchos casos ni siquiera importa a qué elemento HTML se le asigne la clase. Puede conseguirse que un elemento cualquiera emule prácticamente a cualquier otro. No es recomendable aprovecharse de esta característica, ya que así se elimina un nivel de estructura que tiene significado universal (elementos HTML). Una estructura basada en 'CLASS' sólo es útil dentro de un dominio restringido, en el que el significado de una clase se haya establecido de antemano.
HTML [2] también introduce el atributo 'ID', del cual se garantiza que tiene un valor único en todo el documento. Por tanto puede ser de especial importancia como selector en una hoja de estilo, y se puede hacer referencia a él anteponiendo el símbolo '#':
#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }
<P ID=z98y>Texto ancho</P>
En este ejemplo, el primer selector corresponde al elemento 'P' debido al valor de su atributo 'ID'. El segundo selector especifica tanto un tipo de elemento ('H1') como un valor ID, y por tanto no corresponde al elemento 'P'.
Usando el atributo ID como selector se pueden establecer propiedades elemento por elemento. Si bien las hojas de estilo han sido diseñadas para acrecentar la estructura de los documentos, esta característica permitirá a los autores crear documentos que se verán bien en el lienzo sin sacar provecho de los elementos estructurales del HTML. Se recomienda encarecidamente no hacer uso de las hojas de estilo de esta manera.