Reglas y selectores
Un documento CSS está compuesto por una colección de reglas. Como lo más probable es que haya más de una regla, una colección de reglas se llama frecuentemente rule-set o juego de reglas.
Como ya hemos dicho, una regla consiste en un selector acompañado de un bloque de declaración. El selector determina a que elementos, en el árbol del documento, se aplicarán las reglas. El bloque de declaración es una lista, encerrada entre llaves { }, de uno o varios pares propiedad/valor, donde la propiedad y el valor se separan con dos puntos :.
La declaración indica "qué hay que hacer" y el selector indica "a quién hay que aplicarlo". Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página.
A un mismo elemento HTML se le pueden aplicar varias reglas CSS y cada regla CSS puede aplicarse a un número ilimitado de elementos. En otras palabras, una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas.
En el ejemplo, el documento CSS contiene 5 reglas. Los selectores de estas tres reglas serian *, body, h1,h2,h3,h4,h5,h6, #contenedor y .cuaIndice1 respectivamente.
Cada regla define un bloque de declaración propio. En la primera regla el selector es el selector universal * y el bloque de declaración es todo lo comprendido entre las llaves, incluidas éstas.
El bloque de declaración del selector de tipo body tiene 5 pares propiedad/valor separados por punto y coma. Como el punto y coma sólo es requerido para separar pares, el punto y coma final no es necesario, pero es legal y se suele poner.
El bloque de declaración del selector de clase .cuaIndice1 (comienza por un punto .) y tiene 5 pares propiedad/valor separados por un punto y coma.
El bloque de declaración del selector de id #contenedor (comienza por #) y tiene 4 pares propiedad/valor separados por un punto y coma.