Cargar el CSS en el Sigil

Las reglas CSS sirven para actuar sobre las etiquetas HTML. Siguiendo un ejemplo simple, una regla CSS que actúe sobre los párrafos <p> hace que TODOS los párrafos <p> se vean modificados en mi eBook. Por eso es importante y útil el CSS, porque con unas pocas reglas podemos dar formato a documentos HTML muy extensos.

Pero para eso tenemos que vincular las reglas CSS con los documentos HTML. Sigil nos va a ayudar:

Sigil tiene una carpeta específica para guardar los estilos CSS. Estos estilos se almacenan en un archivo propio, con el sufijo .css.

En la columna izquierda de Sigil, justo debajo que nuestra carpeta Text, hay una carpeta que se llama Styles:

Si pinchas en esa carpeta con el botón derecho, podrás crear un archivo nuevo dentro de esa carpeta Styles. Dile “Añadir una hoja de estilos en blanco”:

Ahora el archivo de la hoja de estilos aparecerá dentro de la carpeta Styles. Se llama Style0001.css. Las hojas de estilo CSS se almacenan en archivos propios que tiene ese sufijo .css. Si haces doble click para abrir el archivo Style0001.css, aparecerá totalmente vacío. Ahí es donde hemos de escribir nuestras reglas CSS.

Pero antes de nada, hemos de vincular este archivo CSS a nuestros archivos HTML. De momento sólo tenemos un archivo HTML, pero lo normal es que tengamos muchos, a veces docenas de archivos HTML por cada libro electrónico, y a todos ellos tenemos que vincularlos a nuestro archivo CSS. Eso se hace escribiendo una línea de código en el <head> de los archivos HTML. Así:

1.- Vete (o ábrelo) el archivo Section0001.xtml. Activa la Vista de Código para ver el código HTML.
2.- Pega tal cual esta línea de código dentro del head:

<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" />

Ten cuidado de no pegarlo dentro de alguna otra etiqueta. Si quieres estar seguro, escríbelo justo antes de la etiqueta de cierre </head>, por ejemplo.

Esta línea le dice al archivo HTML Section0001.xhtml que a partir de ahora y para siempre está vinculado a un archivo de tipo CSS que se llama Style0001.css. Si lo haces así, todo funcionará a la perfección.

Sólo recordar lo obvio: si tú varías una regla CSS en tu archivo Style0001.css, todos los archivos HTML vinculados a él se verán afectados. Imagina un libro con 20 capítulos. Imagina además que cada capítulo es un archivo HTML separado (suele hacerse así, de hecho). Todos los Capítulos de mi libro comienzan con un Título que está etiquetado con <h2>, por ejemplo, algo así:

Capítulo Primero

Que trata de la condición y ejercicio del famoso hidalgo don Quijote de la Mancha

Si yo tengo una regla CSS que actúa sobre los <h2>, por ejemplo esta:

h2 {
text-style: uppercase;
}

La regla text-style: uppercase hace que el texto se convierta en mayúscula, con lo cual todos los nombres de los Capítulos se verán afectados, todos los que estén en cualquier archivo HTML de mi libro etiquetados como <h2> se verán en mayúsculas.

Y si yo rectifico, y cambio la regla CSS, poniendo lowercase (minúscula), en lugar de uppercase (mayúscula):

h2 {
text-style: lowercase;
}

automáticamente todos los nombres de los Capítulos que estén etiquetados como <h2> se rediseñarán poniéndose en minúscula:

Capítulo Primero

Que trata de la condición y ejercicio del famoso hidalgo don Quijote de la Mancha

Como es obvio, este sistema permite ajustar el diseño de docenas de archivos y etiquetas HTML de una vez, sin necesidad de ir reajustando etiqueta por etiqueta.

Esa es la ventaja y el poderío del CSS.