Necesitamos un modo de relacionar la presentación situada en nuestra hoja .css, con el contenido situado en nuestro documento xhtml.
Esta relación se establece mediante los selectores situados en la hoja de estilo, y sus correspondientes elementos, fragmentos, y atributos en el documento xhtml.
En los selectores de la hoja de estilo indicamos qué reglas de estilo serán relacionadas con las diferentes partes y elementos del xhtml para presentar su contenido.
Luego en el xhtml identificamos esas partes mediante los nombres de atributo, tipos de elemento, etc.
Este atributo presenta la siguiente forma:
<elemento class=”nombreClase”> contenido </elemento>
Mediante el nombre del atributo class identificamos aquellos elementos o fragmentos del documento “xhtml” a los que se aplicarán las reglas de estilo que están definidas en el selector del mismo nombre situado en la hoja de estilo
Una de las características de este atributo es que admite valores múltiples, con lo que podríamos asignarle reglas de estilo procedentes de diferentes selectores.
Este atributo se presenta de la siguiente forma:
<elemento class=”nombreClase1 nombreClase2...”> contenido</elemento>
Si en la hoja de estilo tenemos definidos los selectores :
.nombre1 { Fuente arial; }
.nombre2 { Texto en color verde;}
.nombre3 { Fondo en color gris; }
El elemento múltiple recibirá las tres reglas mostrando su contenido de acuerdo a esa presentación.
Este atributo tiene un funcionamiento similar al atributo “class”, ambos identifican un elemento o fragmento mediante un nombre que se corresponde con el de un selector en la hoja de estilo.
Pero a diferencia de “class”, cada nombre de atributo “id” solo podrá identificar a un elemento o fragmento del documento. Por lo tanto es el atributo que emplearemos para identificar aquellas partes del documento que no se repetirán.
Los fragmentos de bloque “div”, identificados mediante su atributo “id”, forman el mejor modo de dividir un documento en sus partes principales e irrepetibles, como la cabecera, columnas, cuerpo, y pié del documento, y atribuirles de forma única las reglas de estilo del selector id correspondiente.