MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

CSS (Del inglés Cascading Style Sheets) permite crear páginas web con un diseño agradable, pero ¿Cómo funciona por dentro? Este artículo explica lo que es CSS, cómo el navegador transforma HTML en un DOM, y cómo se aplica el CSS a las partes del DOM, algunos ejemplos muy básicos de sintaxis y el código necesario para incluir nuestro CSS en nuestra página web.

Prerrequisitos: Conocimientos básicos de ordenadores, SW básico instalado, conocimiento básico de manejo de ficheros, y HTML básico (ver Introducción a HTML).
Objetivos: Aprender qué es CSS y su funcionamiento básico.

Qué es CSS?

Como ya hemos mencionado, CSS es un lenguaje que se usa para diseñar la forma de presentar los documentos a los usuarios — su estilo, diseño, etc.

Un documento suele ser un archivo de texto estructurado usando un ienguaje de marcadoHTML es el más común, pero hay otros como SVG o XML.

Presentar un documento a un usuario implica convertirlo en algo que este pueda utilizar. Navegadores (Browsers), como Firefox, Chrome o Internet Explorer, están diseñados para presentar documentos de forma visual, por ejemplo en una pantalla de ordenador, un proyector o una impresora.

¿Cómo afecta CSS a un HTML?

Los navegadores Web, al aplicar las reglas CSS a un documento, modifican la manera en que este es presentado. Una regla CSS se compone de:

  • Un conjunto de propiedades (properties), con valores establecidos para actualizar la presentación del contenido HTML, por ejemplo quiero que el ancho de un elemento sea el 50% de su elemento padre, y que su fondo sea rojo.
  • Un selector, que seleccionará los elementos afectados por el nuevo valor de la propiedad. Por ejemplo, quiero que mi regla CSS afecte a todos los párrafos (p) de mi documento HTML.

El conjunto de reglas CSS contenidas en el documento de estilos (stylesheet) afectará a la presentación de la página web. Profundizaremos en la sintaxis CSS en el siguiente artículo del módulo — Sintaxis CSS.

Un ejemplo rápido de CSS

Las definiciones anteriores pueden tener sentido o no, vamos a asegurarnos que quedan claras presentando un ejemplo rápido. Primero que nada, tomemos un documento sencillo en HTML que contiene un título <h1> y un párrafo <p> (observemos que el documento de estilos se aplicará a HTML utilizando un elemento <link> desde la sección head):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

Ahora echemos un vistazo a un sencillo CSS con dos reglas:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

La primera regla comienza con un selector h1, que hará que los valores de sus propiedades se apliquen a los elementos <h1>. Contiene 3 propiedades con sus valores correspondientes (a cada par propiedad:valor se le llama declaración):

  1. La primera establece el color del texto en azul.
  2. La segunda establece el fondo en amarillo.
  3. La tercera establece un marco alrededor de la cabecera de 1 pixel de ancho, sólido (no punteado, o con guiones etc.) y de color negro.

La segunda regla comienza con el selector p, que implica que los valores de esta propiedad afectarán a los elementos <p>. Solo contiene una declaración que establece el color en rojo.

En un navegador, el código anterior producirá el siguiente resultado:

A simple webpage containing a header of Hello World, and a paragraph that says This is my first CSS example

No queda muy bonito, pero basta para hacernos una idea del funcionamiento de CSS.

Aprendizaje activo: Escribamos nuestro primer CSS

Escribamos pues nuestro primer CSS. Usaremos las áreas editables a continuación. Siguiendo el diseño del ejemplo anterior; tenemos varios elementos HTML, y varias propiedades CSS. Intentemos añadir varias declaraciones sencillas al CSS para dar estilo al HTML.

No te preocupes por errar, siempre puedes usar el botón reset para reiniciar. Si te atrancas, pulsa Show solution para ver una respuesta posible.

¿Cómo funciona CSS en realidad?

Cuando un navegador muestra un documento, debe combinar su contenido con su información de estilos. Procesa el documento en dos fases:

  1. El navegador convierte HTML y CSS en un DOM (Objeto Documento Modelo). Este DOM representa el documento en la memoria del ordenador. Combinando el contenido del documento con su estilo.
  2. El navegador muestra el contenido del DOM.

El DOM

Un DOM tiene una estructura de árbol. Cada elemento, atributo y sección de texto en el leguaje de marcado se convierte en un nodo DOM node en la estructura del árbol. Los nodos se definen por su relación con otros nodos DOM. Algunos elementos son padres de nodos hijos, y los hijos tienen nodos hermanos.

Entender el DOM nos ayudará a la hora de diseñar, depurar y mantener el CSS, ya que DOM es donde se unen el CSS y el contenido del documento.

Represtación del DOM

En lugar de realizar un larga y aburrida explicación, mejor veamos un ejemplo de cómo trabajan juntos el DOM y CSS.

Supongamos el siguiente ejemplo de código HTML:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

En el DOM, el nodo que corresponde a nuestro elemento <p> es un padre. Sus hijos son nodos de texto y nodos correspondientes a elementos <span>. Los nodos SPAN son también padres, cuyos hijos son nodos de texto:

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

Así es como un navegador interpretará el anterior fragmento HTML —procesa el árbol DOM de arriba y saca en el navegador los siguiente:

Let's use: Cascading Style Sheets

Aplicación de CSS al DOM

Imaginemos que hemos añadido algún CSS a nuestro documento para darle estilo. Dado de nuevo el documento HTML:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

Cuando le aplicamos el CSS:

span {
  border: 1px solid black;
  background-color: lime;
}

El navegador analiza el HTML y crea un DOM a partir de él, luego analiza el CSS. Como la única regla en el CSS contiene un selector de un span, aplicará esa regla a cada uno de los tres spans. El resultado quedará:

Cómo aplicar un CSS a nuestro HTML

Hay tres maneras distintas de aplicar CSS a un documento HTML, unas más prácticas que otras. Veamos cada una de ellas:

Documento de estilos externo (CSS externo)

Ya hemos visto CSS externos en este artículo, pero no con este nombre. Un CSS externo es cuando el CSS se encuentra en un archivo separado con una extensión .css, y lo referenciamos desde HTML con un elemento <link>. El archivo HTML se parecerá a lo siguiente:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

Y el archivo CSS:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

Este método es sin duda el mejor, pues podemos usar un único documento de estilos en multiples documentos y, si queremos cambiarlo, solo necesitaremos actualizar el CSS desde un sitio.

Documento de estilos interno (CSS interno)

En un CSS interno no tenemos un CSS externo, sino que lo ubicamos dentro de un elemento <style>, en el apartado HTML head. Así, el HTML se escribirá:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

Este método puede ser práctico en algunas ocasiones (puede que estemos trabajando con un gestor de contenido que no permite modificar el archivo CSS directamente), pero no es tan eficiente como el CSS externo — en una web, el CSS estará repetido en todas las páginLos estilos en una línea son declaraciones CSS que afectan solo a un elemento que está contenido dentro de un atributo style:as y si se necesita hacer cambios, estos deberán ser hechos en múltiples sitios diferentes.

Estilos en una línea

Los estilos en una línea son declaraciones CSS que afetan solo a un elemento que está contenido dentro de un atributo style:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

Por favor, no lo hagamos a menos que sea estrictamente necesario. Su mantenimiento es verdaderamente complicado (podríamos que tener que actualizar la misma información muchas veces en cada documento), además de mezclar la información de estilo con la información estructural del HTML, haciendo el CSS difícil de leer y de entender. Manteniendo los distintos tipos de código separados y puros, facilitará la tarea a aquellos que vayan a trabajar posteriormente en el código.

Solamente está justificado el uso de estilos en la misma línea cuando los entornos de trabajo son muy restrictivos (el CMS solo permite editar el cuerpo del HTML).

¿Y ahora qué?

En este punto deberías entender el funcionamiento básico de CSS y la forma en que los navegadores lo utilizan. A continuación aprenderemos algo de Sintaxis CSS.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: javierpolit
 Última actualización por: javierpolit,