Qué es una hoja de estilo

Qué es una hoja de estilo

En las primeras versiones del HTML el código fuente de una página web contenía tanto la información (el contenido) como la presentación (el diseño o formato), pero ya en 1994 hubo propuestas para separar todo lo relacionado con el diseño en un documento aparte llamado hoja de estilo, propuestas que fructificaron en 1996 con la aprobación de la recomendación CSS 1. Así, la página web (el documento html) puede contener únicamente información, mientras que la hoja de estilo define el formato.

El nombre oficial en inglés de las hojas de estilo para páginas web es CSS, Cascading Style Sheets, es decir, Hojas de Estilo en Cascada. El término "cascada" hace referencia a la forma jerárquica en que las propiedades de estilo se aplican a los distintos elementos de la página web.


El funcionamiento de las hojas de estilo es el siguiente:

página web (ejemplo.html) ... <link rel="stylesheet" href="estilo.css"> enlace a la hoja de estilo ... <p>Esto es un párrafo.</p> etiqueta html ... hoja de estilo (estilo.css) color: red; } p   { etiqueta html + resultado en el navegador Esto es un párrafo.

Las ventajas de utilizar hojas de estilo son muchas, sobre todo permiten hacer un diseño consistente y fácil de modificar. Si varias páginas web hacen referencia a la misma hoja de estilo, para cambiar la apariencia de todas las páginas es suficiente con hacer los cambios en un único lugar, en la hoja de estilo.

Sintaxis de las hojas de estilo

Una hoja de estilo es un fichero de texto plano (sin formato) en el que se define el aspecto de las etiquetas de una página web:

h1 { color: white; background-color: black; } p { color: red; background-color: lightyellow; }

Una hoja de estilo está formada por una o varias sentencias:

@import url("mclibre-pie.css"); h1 { color: white; background-color: black; } p { color: red; background-color: lightyellow; } sentencias

Existen dos tipos de sentencias: las reglas-arroba y las reglas:

@import url("mclibre-pie.css"); h1 { color: white; background-color: black; } p { color: red; background-color: lightyellow; } regla-arroba reglas

Las reglas-arroba empiezan por el símbolo de arroba (@) pegado a un identificador y terminan por un punto y coma (;):

@import url("mclibre-pie.css"); regla-arroba identificador punto y coma

Algunas reglas-arroba (@import o @namespace) deben aparecer al principio de la hoja de estilo, pero el resto (@font-face, @media, etc.) pueden escribirse en cualquier lugar de la hoja de estilo.

Las reglas están formadas por un selector y un bloque de declaración. El bloque de declaración empieza y acaba con llaves { }.

h1   { color: white; background-color: black; } p   { color: red; background-color: lightyellow; } selectores llaves declaraciones

Cada declaración está formada por una o varias propiedades y sus valores correspondientes. Las propiedades van separadas entre sí por puntos y comas. El valor (o valores) van separados de las propiedades por dos puntos. En general, si una propiedad necesita varios valores, los valores van separados por espacios en blanco. En general, si una propiedad admite varios valores alternativos, los valores van separados por comas.

h1   { color :   white ; background-color :   black ; } propiedad dos puntos espacio en blanco valor punto y coma

Enlaces a varias hojas de estilo

Se pueden enlazar dos o más hojas de estilo, con lo que el código fuente contendrá tantas etiquetas <link> como hojas enlazadas:

<link rel="stylesheet" href="estilo-1.css">
<link rel="stylesheet" href="estilo-2.css">

En este caso, el navegador aplica las dos hojas de estilo a la página web, una tras otra. Si un elemento está definido en las dos hojas, el navegador hará lo que diga la última hoja de estilo de la lista.

Errores más comunes

Un error bastante habitual es escribir los caracteres < y > en la hoja de estilo.

Incorrecto
<p> {
  color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Estilos en cascada

El formato final de cualquier elemento depende de la combinación de todas las propiedades que afectan al elemento. La denominación de hojas de estilo en cascada hace referencia precisamente a este hecho. En la lección Estilos en cascada se detallan las reglas que emplean los navegadores.

Por ejemplo, una de esas reglas es que a un elemento le afectan todas las propiedades de los elementos en los que está incluido, como muestra el ejemplo siguiente, en el que el color de texto del párrafo <p> viene determinado por la propiedad establecida para el elemento <body>:

body {
  color: white;
}

p {
  background-color: lightcoral;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Definir varios selectores simultáneamente

Se pueden definir varios selectores simultáneamente escribiendo los selectores separados por comas, como muestran los siguientes ejemplos:

p, address {
  color: red
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Lo que no es correcto es definir varias propiedades simultáneamente, como muestran los siguientes ejemplos:

Incorrecto
p {
  border-top, border-bottom: red 3px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto
p {
  border-top: red 3px solid;
  border-bottom: red 3px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Repetir selectores

Aunque no es incorrecto, no se aconseja repetir selectores, ya que distribuye la información en varios lugares de la hoja de estilo y eso dificulta la lectura e interpretación de la hoja de estilo a los lectores humanos.

Si se repiten las propiedades, el navegador aplica la propiedad que aparece en último lugar, como muestra el siguiente ejemplo:

Desaconsejado
p {
  color: red;
}

p {
  color: blue;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Si no se repiten las propiedades, el navegador aplica todas las propiedades, como muestra el siguiente ejemplo:

Desaconsejado
p {
  color: white;
}

p {
  background-color: black;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Enlaces a la hoja de estilo

Los enlaces a las hojas de estilo que se escriben en el atributo href pueden ser caminos absolutos (http://... si están en otro servidor público o /... si están en el mismo servidor), pero normalmente son caminos relativos, desde el directorio que contiene la página web hasta el fichero CSS.

La imagen siguiente muestra cuatro ejemplos de enlaces a hojas de estilo, dependiendo de la estructura de directorios del sitio web.

HTML y CSS en el mismo directorio 🗀 directorio 🗎 pagina.html 🗎 estilo.css href="estilo.css" CSS en subdirectorio 🗀 directorio 🗀 subdirectorio 🗎 estilo.css 🗎 pagina.html href="subdirectorio/estilo.css" HTML en subdirectorio 🗀 directorio 🗀 subdirectorio 🗎 pagina.html 🗎 estilo.css href="../estilo.css" HTML y CSS en subdirectorios distintos 🗀 directorio 🗀 subdirectorio-1 🗎 pagina.html 🗀 subdirectorio-2 🗎 estilo.css href="../subdirectorio-2/estilo.css"

Comentarios en las hojas de estilo

Una hoja de estilo puede contener comentarios. Los delimitadores del comentario son /* ... */ (como en el lenguaje de programación C). Los comentarios pueden extenderse varias líneas, como ilustra el siguiente ejemplo:

/*
  Autor: Bartolome Sintes Marco
  Fecha: 3 de octubre de 2014
*/

h1 {
  background-color: black ;      /* fondo negro */
  color: white ;                 /* texto blanco */
}

Hoja de estilo básica

No hay ningún elemento que sea necesario incluir en todas las hojas de estilo, por lo que en estos apuntes no se proporciona ninguna hoja de estilo básica que se puede utilizar de plantilla para los ejercicios propuestos en este curso.