Continuando con la explicación sobre el uso de id y class en HTML, ahora corresponde revisar la segunda parte, cómo utilizamos estos atributos en CSS para aplicar diseño al contenido.
CSS utiliza selectores para identificar a qué parte de un documento se aplican los estilos. Los selectores son declaraciones de diversos tipos que permiten indicar con un nivel de detalle bastante preciso a qué se aplicarán las reglas de estilo. El selector más simple es el de elemento. Este selector identifica un elemento de HTML y aplica las reglas a todas las instancias de ese elemento en el documento. Por ejemplo:
p { font-size: 1em; }
En este caso, el selector determina que todos los elementos p utilizarán la regla indicada, según el ejemplo, su texto tendrá un tamaño de 1em. En consecuencia, este selector es uno genérico, que no permite un nivel de discriminación muy detallado. Se aplicará a todos los elementos que definamos, sin excepción.
Pero frecuentemente necesitamos seleccionar elementos con un grado de discriminación más refinado. Aquí es cuando entran los selectores id y class.
Cuando necesitamos seleccionar un elemento único dentro del documento para asignarle una regla específica, lo haremos a través del atributo que los identifica de modo exclusivo: el id. Como vimos en el post anterior, id permite identificar de modo único a un elemento, no puede haber dos elementos con un id con el mismo valor. Si por ejemplo tenemos un elemento definido como id="contenido", en CSS nos referiremos él del siguiente modo:
#contenido { margin: 1em 2em; }
Siempre que deseemos referirnos en CSS a un elemento con un id n, antepondremos el caracter # y luego, sin espacios, el id: #n.
En otras ocasiones necesitamos referirnos a un grupo de elementos que comparten una clase común. En el ejemplo del post anterior, mencionábamos una clase nota para identificar a párrafos usados como notas al pie. En este caso seleccionaríamos a estos elementos del siguiente modo en CSS:
p.nota { border: 1px solid #CCCCCC; }
El uso de class nos permite seleccionar un rango mayor de elementos. Hay una serie de usos más avanzados de este selector, además de otros más avanzados. Incluso es posible combinar diferentes tipos de selectores, pero eso queda para otro post, recordemos que esto es una introducción.
Para finalizar, en un post anterior titulado CSS y Semántica
traté este tema un poco más profundamente.
