≡En resumen
- Una hoja de estilo define cómo se ve un documento; el HTML define qué contiene.
- En la web, las hojas de estilo se escriben en CSS y se enlazan con link rel="stylesheet".
- Hay tres formas de aplicar estilos: hoja externa, estilos internos en el head y estilos en línea.
- «Falta la hoja de estilo» en WordPress significa que el tema no tiene un style.css donde WordPress lo espera.
- Casi siempre se soluciona subiendo la carpeta correcta del tema, no el paquete completo descargado.
01 ¿Qué es una hoja de estilo?
La gran aportación de las hojas de estilo es separar el contenido de la presentación. El HTML dice qué es cada cosa (un título, un párrafo, una lista) y la hoja de estilo dice cómo se ve. Antes de CSS, el formato se mezclaba con el contenido mediante etiquetas y atributos como font o bgcolor, y cambiar el diseño de un sitio obligaba a editar cada página.
El término viene de la edición tradicional: una hoja de estilo era la guía de normas tipográficas y ortográficas que seguía una publicación. La idea se trasladó a los procesadores de texto (los «estilos» de Word) y a la web.
Coherencia
Todas las páginas comparten el mismo aspecto porque beben de las mismas reglas.
Mantenimiento
Un cambio en un archivo se aplica a toda la web.
Rendimiento
El navegador guarda en caché la hoja externa y no la descarga en cada página.
Adaptación
Con media queries, el mismo HTML se ve bien en móvil, tableta, escritorio o impreso.
02 «Falta la hoja de estilo» en WordPress: qué significa y cómo solucionarlo
Si has llegado buscando este mensaje, estás en WordPress. Todo tema de WordPress necesita un archivo style.css en su carpeta principal, con una cabecera que incluya al menos el nombre del tema (Theme Name). Cuando WordPress no lo encuentra, muestra uno de estos avisos, que son los textos oficiales de la traducción al español:
| Mensaje | Dónde aparece | Qué significa |
|---|---|---|
| No se ha podido descomprimir el paquete. El tema no tiene la hoja de estilos style.css. | Al subir un tema en Apariencia, Temas, Añadir tema | El ZIP no tiene un style.css en su primera carpeta |
| Falta la hoja de estilo. | Apariencia, Temas, en el bloque «Temas dañados» | Hay una carpeta en wp-content/themes sin style.css |
| La hoja de estilos style.css no tiene una cabecera válida para el tema. | Al subir un tema | Existe style.css, pero sin la línea Theme Name |
| Falta la plantilla… | Al subir o listar temas | Faltan index.php o templates/index.html, o es un tema hijo sin su tema padre |
-
1
Descomprime el archivo en tu ordenador
Los temas comprados suelen venir en un paquete con documentación, licencias, archivos de demostración y, dentro, otro ZIP con el tema.
-
2
Localiza el ZIP instalable
Es el que, al abrirlo, contiene una carpeta con style.css, functions.php y los demás archivos del tema en su primer nivel.
-
3
Sube solo ese archivo
En Apariencia, Temas, Añadir tema, Subir tema, elige ese ZIP y no el paquete completo.
-
4
Comprueba que es un tema y no un plugin
Si el ZIP contiene un plugin, se instala desde Plugins; si es de otra plataforma, como Shopify o Joomla, no funcionará en WordPress.
-
5
Si es un tema hijo, instala antes el padre
El style.css del hijo indica en la línea Template qué tema padre necesita.
-
6
Limpia los temas dañados
Si ves «Falta la hoja de estilo» en Temas dañados, borra o completa esa carpeta desde el panel o por FTP.
/*
Theme Name: Mi Tema
Author: Mi Empresa
Version: 1.0
Template: twentytwentyfive
*/
La línea Template solo se pone en un tema hijo de WordPress e indica la carpeta del tema padre. Sin Theme Name, WordPress no reconoce el archivo como tema.
03 Tipos de hojas de estilo
Según MDN, hay tres formas de aplicar CSS a una página. La recomendada, salvo casos concretos, es la hoja externa.
| Tipo | Cómo se escribe | Cuándo usarlo |
|---|---|---|
| Externa | Archivo .css enlazado con link rel="stylesheet" en el head | Siempre que puedas: reutilizable y cacheable |
| Interna o incrustada | Reglas dentro de una etiqueta style en el head | Estilos de una sola página o CSS crítico para acelerar la primera carga |
| En línea | Atributo style en un elemento concreto | Casos puntuales o correos electrónicos en HTML |
<head>
<link rel="stylesheet" href="/css/estilos.css">
</head>
Y dentro de estilos.css:body { font-family: system-ui, sans-serif; color: #222; }
h1 { font-size: 2.5rem; }
Además, en la cascada intervienen tres orígenes: la hoja de estilo del navegador (los estilos por defecto), la del usuario (preferencias de accesibilidad, por ejemplo) y la del autor, que es la que escribe quien diseña la web. Si quieres profundizar en la clasificación, este artículo repasa los tipos de hojas de estilo CSS en páginas web.
04 Por qué se llaman hojas de estilo en cascada
La C de CSS significa cascading, «en cascada». Cuando varias reglas afectan al mismo elemento, el navegador decide cuál gana según su origen, su especificidad (una regla para un identificador pesa más que una para una etiqueta) y su orden (a igualdad de peso, gana la última). Por eso puedes definir un estilo general y matizarlo después para casos concretos.
1994
Håkon Wium Lie publica el 10 de octubre el primer borrador de «Cascading HTML Style Sheets»
Fuente: W3C, historia de CSS
1996
CSS nivel 1 se convierte en recomendación del W3C en diciembre
Fuente: W3C, historia de CSS
1998
CSS nivel 2 alcanza el rango de recomendación en mayo
Fuente: W3C, historia de CSS
05 Buenas prácticas con las hojas de estilo (y su efecto en el SEO)
Por defecto, el navegador no pinta la página hasta descargar las hojas de estilo del head. Unas hojas pesadas o mal organizadas retrasan lo que ve el usuario y empeoran métricas como el LCP. Por eso el CSS es una de las primeras cosas que se revisan en cualquier trabajo de optimización de la velocidad web.
- ✓Usa hojas externas y evita repetir estilos en línea en cada elemento.
- ✓Minifica y comprime los archivos CSS en producción.
- ✓Elimina el CSS que no se usa: los temas y constructores visuales cargan mucho de más.
- ✓Incluye en línea solo el CSS crítico de la parte visible y carga el resto después.
- ✓Agrupa colores y medidas en variables CSS para mantener la coherencia.
- ✓No ocultes texto con CSS para manipular a los buscadores: Google lo considera spam.
- ✓No bloquees los archivos CSS en robots.txt: Google necesita verlos para renderizar la página.
Una hoja de estilo bien planteada desde el principio es parte del diseño y desarrollo web de calidad: facilita cambiar la imagen de marca, adaptar la web a nuevos dispositivos y mantener una carga rápida.
Preguntas frecuentes sobre Hoja de estilo
Es un conjunto de reglas, normalmente en CSS, que define cómo se presenta un documento web: colores, tipografías, tamaños y distribución, separado del contenido HTML.
Que WordPress no encuentra el archivo style.css de un tema. Suele pasar al subir el paquete completo descargado en vez del ZIP del tema, o cuando una carpeta de temas está incompleta.
Descomprime el paquete descargado, busca dentro el ZIP que contiene la carpeta del tema con style.css en su primer nivel y sube solo ese archivo desde Apariencia, Temas, Añadir tema.
CSS es el lenguaje; la hoja de estilo es el archivo o conjunto de reglas escrito en ese lenguaje. En la web se usan casi como sinónimos.
Según dónde se escriben: externas (archivo .css enlazado), internas (etiqueta style en el head) y en línea (atributo style). Según su origen: del navegador, del usuario y del autor.
Con un elemento link dentro del head, con rel="stylesheet" y la ruta del archivo en href, por ejemplo href="/css/estilos.css".
Håkon Wium Lie propuso CSS el 10 de octubre de 1994 y lo desarrolló junto a Bert Bos. El W3C publicó CSS nivel 1 como recomendación en diciembre de 1996.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗