La herencia permite a los diseñadores CSS escribir menos. En lugar de establecer todas las propiedades de estilo, se pueden crear primero los valores por defecto y después enumerar las excepciones. Para dar a los elementos 'EM' contenidos en un 'H1' un color diferente, se puede especificar lo siguiente:
H1 { color: blue }
EM { color: red }
Cuando esta hoja de estilo tenga efecto, todas las secciones enfatizadas saldrán en rojo, estén dentro o fuera de un 'H1'. Es probable que sólo quisiéramos que salieran en rojo los elementos 'EM' contenidos en un 'H1', y eso se puede conseguir de la siguiente manera:
H1 EM { color: red }
El selector es ahora un patrón de búsqueda en la pila de elementos abiertos. Este tipo de selectores se conoce como selectores contextuales. Los selectores contextuales consisten en varios selectores simples separados por espacios (todos los selectores descritos hasta ahora eran selectores simples). El selector sólo hará referencia a los elementos que se correspondan con el último selector simple (en este caso el elemento 'EM'), y sólo si concuerdan con el patrón de búsqueda. En CSS1 los selectores contextuales sólo buscan relaciones de descendencia, pero pueden introducirse otros tipos de relación (p.ej. padre-hijo) en revisiones posteriores. En el ejemplo anterior, el patrón de búsqueda concuerda si 'EM' es descendiente de 'H1', es decir, si 'EM' está en el interior de un elemento 'H1'.
UL LI { font-size: small }
UL UL LI { font-size: x-small }
Aquí, el primer selector corresponde a elementos 'LI' que tengan al menos un ascendiente 'UL'. El segundo selector corresponde a un subconjunto del primero, es decir, elementos 'LI' que tengan al menos dos ascendientes 'UL'. El conflicto se resuelve a favor del segundo selector por ser más específico, debido a que el patrón de búsqueda es más largo. Véase el orden de cascada (sección 3.2) para más información a este respeto.
Los selectores contextuales pueden buscar tipos de elementos, atributos CLASS, atributos ID o combinaciones de éstos:
DIV P { font: small sans-serif }
.rojizo H1 { color: red }
#x78y CODE { background: blue }
DIV.notaalmargen H1 { font-size: large }
El primer selector corresponde a todos los elementos 'P' que tengan a un 'DIV' entre sus ascendientes. El segundo selector corresponde a todos los elementos 'H1' que tengan un ascendiente de clase 'rojizo'. El tercer selector corresponde a todos los elementos 'CODE' que sean descendientes del elemento de 'ID=x78y'. El cuarto selector corresponde a todos los elementos 'H1' que tengan un ascendiente 'DIV' de clase 'notaalmargen'.
Los selectores contextuales también se pueden agrupar:
H1 B, H2 B, H1 EM, H2 EM { color: red }
que es equivalente a:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
Los comentarios literales en hojas de estilo CSS son similares a los del lenguaje de programación C [7]:
EM { color: red } /* ¡¡rojo, pero que muy rojo!! */
No se pueden anidar comentarios. Para un analizador CSS1, un comentario equivale a espacio en blanco.