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 Lenguaje de marcado — HTML 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):
- La primera establece el color del texto en azul.
- La segunda establece el fondo en amarillo.
- 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:
No queda muy bonito, pero basta para hacernos una idea del funcionamiento de CSS.
¿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:
- 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.
- 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"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áginas y si se necesita hacer cambios, estos deberán ser hechos en múltiples sitios diferentes.
FUENTE: DEVELOPER.MOZILLA.ORG