Identificadores, clases y estilos.

Hoy me gustaría escribir acerca de cómo identificar elementos, aplicar clases en un documento HTML o XHTML (enlace en inglés) y como darles estilo con CSS (enlace en inglés).

Un identificador sirve para identificar un elemento único en un documento HTML o XHTML. Sirve para dar nombre a determinados elementos de la estructura de la página, para luego poder referenciaros. Por ejemplo se usan para identificar la cabecera de la página, el menú de navegación, el pie de página, los contenidos, las migas de pan (breadcrumbs, en inglés), el buscador de la página, etc. Cualquier elemento de una página (h1...h6, div, p, strong, em, span, ul, ol, li, dl, dt, dd, table, th, td, a, etc.), contenido en el body, puede ser identificado. Para dar una identificación a un elemento se usa el atributo id disponible en todos los elementos.

Las clases sirven para definir tipos de estilos en un documento CSS y aplicarlos sobre elementos de un documento HTML o XHTML según el rol que desempeñen, que depende de la información que contengan. Para aplicar un estilo a cualquier elemento contenido en el body se utiliza el atributo class. Por ejemplo, imagina que tenemos un elemento div identificado como mensaje y queremos que tenga un estilo según el tipo de mensaje que contenga. Los tipos de mensaje pueden ser error, o advertencia. Podríamos disponer de dos clases definidas en el documento CSS y utilizarlas de este modo:

<strong id="mensaje" class="error">
Error en el formato de la fecha.
</strong>

<strong id="mensaje" class="advertencia">
Advertencia, sus datos serán enviados sin encriptar.
</strong>

Como se puede ver, el elemento mensaje toma el rol error o advertencia según la información que contiene, y le aplicamos un estilo u otro para mostrarlo de diferente manera según el caso.

En muchas ocasiones, me he encontrado con documentos sin un solo identificador y llenos de clases del tipo:

Esto no es correcto. El nombre de un estilo no ha de referirse al color, tamaño de letra, ni nungún otro aspecto que la defina, tiene que nombrar el rol para el que fue creado. Además, esta manera equivocada de usar las clases tiene como consecuencia la aparición del atributo class en muchos elementos, cuando lo deseable, es que aparezca lo menos posible para separar convenientemente información de presentación.

Identificar bien los elementos de la página y usar clases correctamente tiene como ventaja la disminución de código en el documento HTML o XHTML, y la posibilidad de cambiar cualquier aspecto de la presentación de la página desde el fichero CSS. Para ello, lo único que hay que hacer, es crear un documento CSS y decir a cada elemento, a través de identificadores y selectores, donde debe situarse y cómo presentarse.

Por ejemplo, si tenemos un documento XHTML, donde aparece un menú de navegación con unos enlaces y un texto, en el fichero CSS podemos decir donde queremos que se sitúe el menú, y qué color deben de tener sus enlaces, y donde situar el texto y qué aspecto debe tener los párrafos y los enlaces de los párrafos. El código sería:

[...]
<h1 id="cabecera">Ejemplo de identificadores, clases y estilos</h1>

<map id="menu">
<ul>
<li><a href="#quiensoy">¿Quién soy?</a></li>
<li><a href="#dondevoy">¿A dónde voy?</a></li>
</ul>
</map>

<div id="textos">
<h2 id="quiensoy">¿Quién soy?</h2>
<p>Soy Álex, y tengo un blog llamado <a href="http://www.lacoctelera.com/gigo">Garbage In, Garbage Out</a> en <a href="http://www.lacoctelera.com">La Coctelera</a>.</p>
<h2 id="dondevoy">¿Dónde voy?</h2>
<p>Trato de impulsar un nuevo proyecto personal.</p>
</div>
[...]

El fichero CSS asociado sería como este:

#cabecera {
text-align: center;
border: 1px solid #BBF;
background-color: #F0F0FF;
color: #007;
}

#menu ul {
display: block;
margin: 0; padding: 0;
text-align: center;
}

#menu li{
display: inline;
}

#menu a:hover {
background-color: #700;
color:#FFF;
}

#menu a {
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
color: #700;
}

#textos {
clear: both;
margin: 5em; 40px 0 20px;
padding: 10px;
background-color: #F7F7F7;
border: 1px solid #EEE;
}

#textos p {
text-align: justify;
font-family: Century Gothic, Arial, sans-serif;

}

#textos a:hover {
text-decoration: underline;
border-style: none;
}

#textos a {
text-decoration: none;
border-bottom: 1px dashed #007;
}

Y el aspecto final, este:

Aspecto final del ejemplo, en el que se ve la cabecera en azul, sobre un fondo azul claro y enmarcado en un borde, un menú horizontal de dos enlaces granate, y un texto enmarcardo sobre un fondo gris.