Lo más del CSS: las clases

CSS tiene una cosa que se llama Clases. Fíjate en este código HTML:

<p> Esto es un párrafo cualquiera </p>

y en esta regla CSS que nosotros hemos escrito en el archivo CSS:

p {
font-style: bold;
}

Este es muy sencillo: esta regla CSS hace que mis párrafos etiquetados con <p> tengan un estilo de letra Negrita.

Bien. Pues las Clases nos permiten ser mucho más específicos, porque nos van a permitir identificar individualmenete a etiquetas o grupos de etiquetas HTML.

Fíjate ahora en esta línea de código:

 <p class=”negrita”> Esto es un párrafo cualquiera, pero tiene la Clase “negrita”. </p>

Nuestro párrafo ahora tiene una Clase, pertenece a la clase “negrita”. Ahora tengo dos clases de párrafos, los que están etiquetados con una simple <p> o los que están etiquetados con una Clase, que en este caso es la clase a la que hemos llamado “negrita”.

Ahora fíjate cómo escribimos el CSS:

.negrita {
font-style: bold;
}

p {
font-style: italic;
}

Fíjate en el punto que hay delante de “negrita”. Eso significa que esa regla CSS solamente afecta a las etiquetas HTML etiquetadas con la Clase “negrita”.

El punto en CSS se refiere a eso, a las clases. Es muy importante que no se te olvide si usas clases.

¿Qué significa esto entonces? Significa que ya no todos los párrafos <p> se comportarán igual. Los párrafos etiquetados simplemente con etiqueta HTML <p>, y que no pertenezcan a ninguna clase aparecerán en cursiva (italic). En cambio, los párrafos HTML que estén etiquetados con la clase “.negrita” aparecerán en negrita (bold).

La cosa se puede complicar aún más. Fíjate en estas líneas HTML:

<h1 class=”negrita”> Encabezamiento con clase </h1>

<p class=”negrita”> Esto sigue siendo un párrafo cualquiera, pero tiene la Clase “negrita”. </p>

¡¡Hemos etiquetado con la misma Clase CSS dos etiquetas HTML distintas!! ¿Y ahora qué?

Pues siguiendo con la lógica del CSS, tanto el <h1 class=”negrita”> como el <p class=”negrita”> se verán afectados por la regla CSS “.negrita”:

.negrita {
font-style: bold;
}

y ambos aparecerán en estilo negrita.

¿Y para qué complicarlo tanto?

Pues porque la vida es así de complicada. En un libro habrá cientos de párrafos, pero no todos serán iguales. Algunos serán citas, que tal vez deban ir en cursiva; otros serán párrafos de versos, que tal vez deberían llevar un sangrado específico. Habrá párrafos dentro de diálogos, o en varios idiomas... Multitud de casos. Para cada ocasión lo que deberemos hacer es localizar y etiquetar minuciosamente cada uno de esos párrafos o grupos de párrafos, agruparlos y etiquetarlos con una clase específica, y aplicarle a cada clase el diseño adecuado con la Hoja de Estilos CSS.

Así, ni más ni menos, se programan los eBook con HTML y CSS y la ayuda de Sigil. ¡No era tan difícil!