Los selectores ID trabajan en una forma muy similar a las clases con algunas excepciones. En primer lugar, en la definición de un selector ID el nombre del elemento es seguido por un símbolo "#" y un identificador (valor "id").
Con la excepción del símbolo "#" y el nombre (que debe ser un identificador), el resto funciona exactamente como las clases.
La forma de aplicar este tipo de propiedades CSS a elementos HTML es mediante el atributo "id". Como ya debes saber el atributo "id" está diseñado para actuar como identificador para elemento (por lo que debe ser único), lo que significa que las propiedades definidas usando este método serán únicamente aplicables a un solo elemento por documento.
En este caso podríamos decir que las propiedades son agrupadas y se refieren a un elemento específico en lugar de las clases que son diseñadas para que los elementos se refieran a ellas. En este ejemplo, un párrafo tiene un valor "id" que concuerda con una de las declaraciones previas.
Herencia y cascada son las dos características que dan forma al lenguaje CSS y lo hacen poderoso. Estos dos conceptos darán a los autores completo control sobre la aplicación de propiedades a los elementos del documento.
La jerarquía de la estructura CSS es una de sus más importantes características, de donde obtiene su denominación "Cascada". La idea de cascada viene del efecto causado por el orden en que las propiedades son aplicadas a un solo elemento desde diferentes definiciones de estilo. Esto ayuda a los autores a mezclar propiedades de diferentes clases y declaraciones de estilo y aplicarlas a elementos en diferentes etapas.
Para ilustrar esto, miremos este documento ejemplo:
Puedes analizar la aplicación de propiedades en dos formas: desde la más específica hacia la más global o viceversa. La declaración de estilo más específica en este ejemplo es aquella hecha con el atributo "style" y la menos específica es aquella hecha para el elemento "p" en el bloque "style". Sin importar la forma en que quieras verlo, la declaración con mayor nivel de especificidad suprime al resto.
En el ejemplo anterior, el párrafo recibirá un estilo de fuente "arial,helvetica" y un valor de color "black" de las propiedades definidas para el elemento "p", pero no tendrá un tamaño de fuente de "10px" ya que este será suprimido por la propiedad definida en la clase "importante" que es aplicada al elemento. Asimismo, el elemento recibirá de la clase "importante" un tamaño de fuente de "12px" pero el estilo de fuente "bold" será suprimido por la propiedad definida en el atributo "style".
La siguiente lista muestra el orden de especificidad usado para aplicar propiedades CSS a elementos HTML, desde el más específico al más global.
<p style="...">).p#help {...}).p.second {...}).*.second {...}).p {...}).* {...}).El mismo análisis puede ser utilizado para propiedades heredadas de otros elementos. En el próximo ejemplo, Las propiedades definidas para el párrafo suprimirán a aquellas definidas para el cuerpo (tag HTML body). Las propiedades del cuerpo que no son suprimidas, son heredadas por el párrafo (debido a que está contenido por el cuerpo).
Este documento se verá exactamente igual al anterior, con la excepción del tamaño de la fuente que no será heredada por el párrafo desde el cuerpo debido a que la declaración de estilo para el elemento "p" lo suprimirá, y el tipo de fuente "bold" que sí será heredado de las propiedades del cuerpo.