Y ahora: el CSS

Como ya hemos visto, programar en HTML consiste en etiquetar contenidos: ponerle a cada parte de la web una Etiqueta HTML. 

Ahora vamos a ver cómo se hace para decorar mi página web / libro electrónico: vamos a ver cómo cambiar de letra, cómo hacer los titulares más grandes o más pequeños, cómo hacer que los bloques de textos tengan márgenes, cambiar los interlineados, etc. HTML ya trae de fábrica un aspecto predeterminado, cada etiqueta se muestra de una manera. Pero la clave del diseño web es que nosotros seamos capaces de alterar el aspecto de una web / libro electrónico de la manera que más nos guste o más se adapte a las necesidades específicas del texto que tenemos entre manos.

Para eso contamos con las Reglas CSS.

Una Regla CSS actúa sobre las etiquetas HTML, dotándolas de un comportamiento determinado.

Una Regla CSS tiene un aspecto así:

p {
font-style: bold;
}

Al igual que HTML, el CSS tiene sus manías: las reglas siempre van escritas entre llaves { } ; al final de cada atributo tiene que haber un punto y coma (;). Si se nos olvida cerrar alguna llave, o si no ponemos algún punto y coma al final de la línea, toda la programación se va, una vez más, al carajo.

¿Qué significa esta Regla CSS?:

p {
font-style: bold;
}

Fácil: si uso esta regla, todos los párrafos marcados con una <p> (o sea, casi todo mi texto), va a tener un estilo de letra Negrita (bold).

¿Y esta otra regla?:

h1 {
font-style: italic;
}

También es muy sencilla. Significa que todos los textos (encabezados) marcados con <h1> serán puestos en Cursiva (Italic)

¿Y ésta?

h2 {
font-style: bold;
margin-top: 0em;
margin-bottom:0em;
text-indent: 2em;
}

Parece un poco más compleja, pero en el fondo es igual, lo que ocurre es que en la misma regla hay varios atributos (en este ejemplo cada atributo ocupa un renglón). Por eso es importante que al final de cada atributo se ponga un punto y coma, para que el HTML sepa cómo interpretar la regla completa.

¿Qué significa esta regla? Te lo explico:

font-style: bold;

Esto significa que los textos etiquetados como <h2> tendrán un estilo de letra negrita (bold).

margin-top: 0em;

margin-bottom:0em;

Esto significa que los textos etiquetados como <h2> no tendrán margen (espacio vacío) ni por arriba (margin-top: 0em) ni por abajo (margin-bottom: 0em). Es decir, la línea inmediatamente anterior al <h2> y la inmediatamente posterior irán pegadas como si fueran líneas de texto normal, sin añadir el típico espacio en blanco que suele tener asociado un encabezamiento.

text-indent: 2em;

Esto significa que los textos etiquetados como <h2> tienen una sangría a la izquierda, es decir, los encabezamientos etiquetados como <h2> (en nuestro ejemplo son las Secciones), comenzarán con un espacio de sangrado a la izquierda, no empezarán alineados a la izquierda como los demás renglones.

¿Y qué es eso de los “0em” ó “2em”?

Son unidades de medida. Pero no vayamos tan rápido. Primero, vamos a ver cómo se meten las reglas CSS en Sigil y veremos cómo funcionan.