Cuando abrimos una página web en el navegador, éste interpreta el código HTML para entender qué contenido hay y qué significa cada parte (títulos, párrafos, enlaces, formularios, etc.).
Además de estructura y semántica, una página necesita presentacióny estilo visual (tipografías, tamaños, colores, márgenes, alineación, distribución en columnas, etc).
En los artículos sobre HTML se ha hablado de contenido, semántica y estructura pero nunca hablamos de aspecto visual o diseño. Esto se debe a que HTML, en las versiones más modernas y responsables con la accesibilidad, ha cedido toda la responsabilidad de definir el aspecto visual del contenido a la parte CSS de una página web.
Qué es CSS
CSS son las siglas de Cascading Style Sheets (Hojas de estilo en cascada).
Al igual que ocurre con HTML, CSS no es un lenguaje de programación. No ejecuta lógica como lo haría JavaScript; en su lugar, define reglas de estilo que el navegador aplica sobre los elementos HTML para controlar cómo se muestran en la pantalla.
La idea fundamental es separar responsabilidades entre las distintas partes de una página web. El código HTML describe el contenido y su estructura. El código CSS describe el aspecto visual y parte del comportamiento de presentación (por ejemplo, el diseño adaptable o ciertas animaciones). Por último, el código Javascript describe la funcionalidad y el dinamismo de la página.
Ejemplo básico en CSS
Un ejemplo típico es tener un fichero HTML y, aparte, un fichero CSS enlazado. Por ejemplo, un HTML clásico es:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Mi primera página con CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Mi primera página</h1>
<p>Este es un párrafo con información.</p>
<a href="https://programaraciegas.net">Visitar el blog</a>
</body>
</html>
Y el contenido del fichero styles.css podría ser:
body {
font-family: system-ui, sans-serif;
line-height: 1.5;
}h1 {
font-size: 2rem;
}
a {
text-decoration: underline;
}
Si guardamos ambos ficheros en la misma carpeta y abrimos el HTML en el navegador, veremos que el contenido es el mismo, pero con el aspecto definido por las reglas CSS.
Por qué estilos en cascada
El término cascading (en cascada) tiene una razón por la forma de aplicarse los estilos en un contenido. Cuando varias reglas podrían aplicarse al mismo elemento, CSS define un sistema para resolver conflictos (origen, orden, especificidad, importancia).
Partes de una regla CSS
La unidad básica de CSS es la regla (a veces llamada ruleset). Una regla se compone de:
• Un selector, que indica a qué elementos se aplica.
• Un bloque de declaraciones, que indica qué propiedades se aplican y con qué valores.
Veamos un ejemplo simple:
p {
font-size: 1rem;
margin-bottom: 1rem;
}
En este caso:
• p es el selector: selecciona todos los párrafos.
• Dentro de { … } hay declaraciones.
• Cada declaración es un par propiedad: valor; como font-size: 1rem;.
Cómo se aplica CSS a una página web
Hay tres formas habituales de aplicar CSS:
Hoja de estilo externa
Es la forma más común y la recomendada por accesibilidad. Se enlaza desde el <head> de la página:
<link rel="stylesheet" href="styles.css">
Entre las ventajas encontramos la separación del diseño del contenido y permite reutilizar estilos en muchas páginas.
Estilos internos
Se escriben dentro de un bloque <style> en el <head>:
<style>
p { line-height: 1.6; }
</style>Esto es útil para ejemplos o páginas muy pequeñas, pero no es reutilizable para otras páginas.
Estilos en línea
Se escriben directamente en el atributo style de un elemento del <body>: dentro de la estructura de contenidos de la página.
<p style="line-height: 1.6;">Texto</p>
Aunque este estilo se aplica al contenido, es la opción menos recomendable porque mezcla contenido y presentación y complica el mantenimiento de la página y su estructura.
Los selectores CSS
El selector es la condición que decide qué elementos reciben una regla.
Los más utilizados son:
Selector por etiqueta
Afecta a todos los elementos de ese tipo:
p { ... }
h1 { ... }
Selector por clase
Afecta a elementos que tengan class=»…»:
.destacado { font-weight: bold; }
Y en HTML:
<p class="destacado">Texto importante</p>
Selector por id
Afecta a un único elemento con id=»…»:
#cabecera { ... }
En HTML:
<header id="cabecera">...</header>
En la práctica, para estilos suele preferirse clases antes que abusar de id, porque son más reutilizables en otros contenidos o componentes.
La cascada: qué pasa cuando hay conflicto
Es habitual que varias reglas intenten aplicar estilos al mismo elemento. CSS resuelve esto con la aplicación en cascada: el navegador decide qué declaración gana según el origen y el orden, y si hace falta entra en juego la especificidad del selector.
Un ejemplo típico que nos podemos encontrar es:
p { color: black; }
.destacado { color: blue; }
Si un párrafo tiene class=»destacado», el color será azul porque .destacado es más específico que p.
La cascada es una de las razones por las que, al empezar con CSS, a veces parece que no se aplique correctamente a algunos contenidos. normalmente sí funciona, pero otra regla está ganando en prevalencia de la cascada.
Accesibilidad y CSS
CSS puede mejorar mucho la experiencia de navegación y la accesibilidad presente en la página web o romperla con facilidad. Un mal CSS es responsable de estas barreras de accesibilidad:
- Contraste de color insuficiente entre texto y fondo.
- Eliminar el foco del teclado por estética. Evita hacer outline: none; sin ofrecer una alternativa visible.
- No respetar preferencias del usuario, como reducir animaciones con prefers-reduced-motion.
- Uso de tipografía ilegible o no adaptable a las necesidades del usuario.