{"id":1350,"date":"2026-03-13T07:00:00","date_gmt":"2026-03-13T06:00:00","guid":{"rendered":"https:\/\/programaraciegas.net\/?p=1350"},"modified":"2026-02-24T07:59:11","modified_gmt":"2026-02-24T06:59:11","slug":"introduccion-a-css","status":"publish","type":"post","link":"https:\/\/programaraciegas.net\/?p=1350","title":{"rendered":"Introducci\u00f3n a CSS"},"content":{"rendered":"

Cuando abrimos una p\u00e1gina web en el navegador, \u00e9ste interpreta el c\u00f3digo HTML<\/a> para entender qu\u00e9 contenido hay y qu\u00e9 significa cada parte (t\u00edtulos, p\u00e1rrafos, enlaces, formularios, etc.).<\/p>\n

Adem\u00e1s de estructura y sem\u00e1ntica, una p\u00e1gina necesita presentaci\u00f3ny estilo visual (tipograf\u00edas, tama\u00f1os, colores, m\u00e1rgenes, alineaci\u00f3n, distribuci\u00f3n en columnas, etc).<\/p>\n

En los art\u00edculos sobre HTML se ha hablado de contenido, sem\u00e1ntica y estructura pero nunca hablamos de aspecto visual o dise\u00f1o. Esto se debe a que HTML, en las versiones m\u00e1s 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\u00e1gina web.<\/p>\n

Qu\u00e9 es CSS<\/h2>\n

CSS son las siglas de Cascading Style Sheets<\/strong> (Hojas de estilo en cascada).<\/p>\n

Al igual que ocurre con HTML, CSS no es un lenguaje de programaci\u00f3n. No ejecuta l\u00f3gica como lo har\u00eda JavaScript; en su lugar, define reglas de estilo que el navegador aplica sobre los elementos HTML para controlar c\u00f3mo se muestran en la pantalla.<\/p>\n

La idea fundamental es separar responsabilidades entre las distintas partes de una p\u00e1gina web. El c\u00f3digo HTML describe el contenido y su estructura. El c\u00f3digo CSS describe el aspecto visual y parte del comportamiento de presentaci\u00f3n (por ejemplo, el dise\u00f1o adaptable o ciertas animaciones). Por \u00faltimo, el c\u00f3digo Javascript describe la funcionalidad y el dinamismo de la p\u00e1gina.<\/p>\n

Ejemplo b\u00e1sico en CSS<\/h3>\n

Un ejemplo t\u00edpico es tener un fichero HTML y, aparte, un fichero CSS enlazado. Por ejemplo, un HTML cl\u00e1sico es:<\/p>\n

<!doctype html>
<html lang=\"es\">
<head>
<meta charset=\"utf-8\">
<title>Mi primera p\u00e1gina con CSS<\/title>
<link rel=\"stylesheet\" href=\"styles.css\">
<\/head>
<body>
<h1>Mi primera p\u00e1gina<\/h1>
<p>Este es un p\u00e1rrafo con informaci\u00f3n.<\/p>
<a href=\"https:\/\/programaraciegas.net\">Visitar el blog<\/a>
<\/body>
<\/html>\n<\/code><\/pre>\n
Y el contenido del fichero styles.css podr\u00eda ser:<\/p>\n
body {
font-family: system-ui, sans-serif;
line-height: 1.5;
}<\/code><\/pre>\n
h1 {
font-size: 2rem;
}<\/p>\n
<\/code><\/pre>\n
a {
text-decoration: underline;
}<\/p>\n
<\/code><\/pre>\n
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.<\/p>\n
Por qu\u00e9 estilos en cascada<\/h3>\n
El t\u00e9rmino cascading<\/strong> (en cascada) tiene una raz\u00f3n por la forma de aplicarse los estilos en un contenido. Cuando varias reglas podr\u00edan aplicarse al mismo elemento, CSS define un sistema para resolver conflictos (origen, orden, especificidad, importancia).\u00a0<\/p>\n
Partes de una regla CSS<\/h2>\n
La unidad b\u00e1sica de CSS es la regla (a veces llamada ruleset<\/em>). Una regla se compone de:<\/p>\n
\u2022 Un selector, que indica a qu\u00e9 elementos se aplica.
\u2022 Un bloque de declaraciones, que indica qu\u00e9 propiedades se aplican y con qu\u00e9 valores.<\/p>\n
Veamos un ejemplo simple:<\/p>\n
p {
font-size: 1rem;
margin-bottom: 1rem;
}<\/code><\/p>\n
En este caso:
\u2022 p es el selector: selecciona todos los p\u00e1rrafos.
\u2022 Dentro de { … } hay declaraciones.
\u2022 Cada declaraci\u00f3n es un par propiedad: valor; como font-size: 1rem;.<\/p>\n
C\u00f3mo se aplica CSS a una p\u00e1gina web<\/h2>\n
Hay tres formas habituales de aplicar CSS:<\/p>\n
Hoja de estilo externa<\/h3>\n
Es la forma m\u00e1s com\u00fan y la recomendada por accesibilidad. Se enlaza desde el <head><\/a> de la p\u00e1gina:<\/p>\n
<link rel=\"stylesheet\" href=\"styles.css\"><\/code><\/p>\n
Entre las ventajas encontramos la separaci\u00f3n del dise\u00f1o del contenido y permite reutilizar estilos en muchas p\u00e1ginas.<\/p>\n
Estilos internos<\/h3>\n
Se escriben dentro de un bloque <style> en el <head>:<\/p>\n
<style>
p { line-height: 1.6; }
<\/style><\/code><\/pre>\n
Esto es \u00fatil para ejemplos o p\u00e1ginas muy peque\u00f1as, pero no es reutilizable para otras p\u00e1ginas.<\/p>\n
Estilos en l\u00ednea<\/h3>\n
Se escriben directamente en el atributo style de un elemento del <body><\/a>: dentro de la estructura de contenidos<\/a> de la p\u00e1gina.<\/p>\n
<p style=\"line-height: 1.6;\">Texto<\/p><\/code><\/p>\n
Aunque este estilo se aplica al contenido, es la opci\u00f3n menos recomendable porque mezcla contenido y presentaci\u00f3n y complica el mantenimiento de la p\u00e1gina y su estructura<\/a>.<\/p>\n
Los selectores CSS<\/h2>\n
El selector es la condici\u00f3n que decide qu\u00e9 elementos reciben una regla.\u00a0
Los m\u00e1s utilizados son:<\/p>\n
Selector por etiqueta<\/h3>\n
Afecta a todos los elementos de ese tipo:<\/p>\n
p { ... }
h1 { ... }<\/code><\/p>\n
Selector por clase<\/h3>\n
Afecta a elementos que tengan class=\u00bb…\u00bb:<\/p>\n
.destacado { font-weight: bold; }<\/code><\/p>\n
Y en HTML:<\/p>\n
<p class=\"destacado\">Texto importante<\/p><\/code><\/p>\n
Selector por id<\/h3>\n
Afecta a un \u00fanico elemento con id=\u00bb…\u00bb:<\/p>\n
#cabecera { ... }<\/code><\/p>\n
En HTML:<\/p>\n
<header id=\"cabecera\">...<\/header><\/code><\/p>\n
En la pr\u00e1ctica, para estilos suele preferirse clases antes que abusar de id, porque son m\u00e1s reutilizables en otros contenidos o componentes.<\/p>\n
La cascada: qu\u00e9 pasa cuando hay conflicto<\/h2>\n
Es habitual que varias reglas intenten aplicar estilos al mismo elemento. CSS resuelve esto con la aplicaci\u00f3n en cascada: el navegador decide qu\u00e9 declaraci\u00f3n gana seg\u00fan el origen y el orden, y si hace falta entra en juego la especificidad del selector.\u00a0<\/p>\n
Un ejemplo t\u00edpico que nos podemos encontrar es:<\/p>\n
p { color: black; }
.destacado { color: blue; }<\/code><\/p>\n
Si un p\u00e1rrafo tiene class=\u00bbdestacado\u00bb, el color ser\u00e1 azul porque .destacado es m\u00e1s espec\u00edfico que p.<\/p>\n
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\u00ed funciona, pero otra regla est\u00e1 ganando en prevalencia de la cascada.<\/p>\n
Accesibilidad y CSS<\/h2>\n
CSS puede mejorar mucho la experiencia de navegaci\u00f3n y la accesibilidad presente en la p\u00e1gina web o romperla con facilidad. Un mal CSS es responsable de estas barreras de accesibilidad:<\/p>\n