---
title: "El CSS personalizado"
description: "Añade tu CSS personalizado en Éclair con las variables del tema, ejemplos probados para botones, títulos, banner, tarjetas y FAQ, y los errores que evitar."
url: "https://eclair.academy/es/rutas/intermedio/css-personalizado"
lang: "es"
author: "Thierry Gustin"
published: "2026-11-02"
updated: "2026-11-02"
---

# El CSS personalizado

> **Lo esencial** — El CSS personalizado se escribe en Ajustes › Apariencia, en el campo CSS personalizado. Se añade después del tema en cada página, así que tiene prioridad, y se guarda en data/, así que las actualizaciones lo conservan. Usa las variables del tema (--accent, --bg, --text…) para que siga funcionando en modo oscuro, sin pasar de 64 KB.

El CSS personalizado te permite ir más allá del tema: botones más cuadrados, subtítulos de color, tarjetas más compactas. Tus reglas se añaden después del tema en cada página y sobreviven a las actualizaciones. Esta lección te enseña dónde escribirlas y qué variables usar, con ejemplos probados en el sitio de Atelier Nova.

> **Antes de empezar** — Duración: 30 minutos. Requisitos previos: nociones básicas de CSS (selector, propiedad, valor) y un tema o una dirección ya elegidos ([temas y apariencia](https://eclair.academy/es/rutas/intermedio/temas-apariencia), [direcciones de arte](https://eclair.academy/es/rutas/intermedio/direcciones-artisticas)). Ten a mano la herramienta de inspección de tu navegador: clic derecho en un elemento y, después, **Inspeccionar** o **Inspeccionar elemento**, según el navegador.

## Lo que sabrás hacer

### 🛠 Escribir reglas que duren

Saber dónde escribir tu CSS, cómo se aplica y por qué sobrevive a las actualizaciones.

### 🎨 Personalizar sin romper nada

Usar las variables del tema para respetar los colores, el modo oscuro y los contrastes.

### ✅ Probar con método

Comprobar tus reglas en la vista previa, en el modo Visual y en modo oscuro.

## ¿Dónde se escribe tu CSS personalizado?

1. Abre **Ajustes › Apariencia** y baja hasta el campo **CSS personalizado**, debajo del texto del pie de página.
2. Pega o escribe tus reglas.
3. Haz clic en **Guardar**: la caché del sitio se vacía y tus reglas se aplican al instante en todas las páginas.

El propio campo lo recuerda: tu CSS «se añade después del tema en cada página y tiene prioridad sobre él». Se inserta en la etiqueta `<style>` de cada página, después de la hoja base y de la del tema o la dirección de arte: a igualdad de selector, gana tu regla. Se guarda con tus datos, en `data/`, una carpeta que la actualización no toca, y forma parte de la copia de seguridad ZIP de la página Seguridad.

![Ajustes › Apariencia: el campo CSS personalizado y su aviso de 64 KB como máximo](https://eclair.academy/media/2026/11/eclair-academy-settings-css-es.webp)
*El campo CSS personalizado, al final de la pestaña Apariencia*

## Las reglas de seguridad del campo

Como este CSS se inserta en cada página, Éclair lo limpia antes de guardarlo:

- se elimina el carácter `<`, para que ninguna regla pueda cerrar la etiqueta de estilo: por eso la sintaxis `@media (width < 40rem)` no funciona; escribe `@media (max-width:40rem)`;
- se eliminan las reglas `@import`: ninguna hoja externa puede bloquear la visualización;
- se suprimen los caracteres de control invisibles;
- el tamaño está limitado a 64 KB, y por encima se rechaza el guardado;
- tus comentarios `/* … */` se quedan en el campo, pero la página recibe una versión compacta, sin ellos.

> **Nada de fuentes externas** — La política de seguridad del sitio (CSP) solo autoriza las fuentes que sirve tu propio sitio. Para una tipografía propia, elige una dirección de arte: tu servidor descarga una sola vez su tipografía de títulos.

## Las variables del tema que debes usar

El tema describe sus colores y sus formas con variables CSS. Úsalas en lugar de valores fijos: en modo oscuro automático, el tema redefine esas variables y tus reglas se adaptan sin esfuerzo. Una regla con `background:#fff` seguiría blanca en un sitio que se ha vuelto oscuro; con `background:var(--card)`, se adapta.

| Variable | Función |
| --- | --- |
| `--accent` | Color principal: fondo de los botones, viñetas, filetes |
| `--link-c` | Color de los enlaces, con contraste verificado: la mejor opción para un texto de color |
| `--bg` | Fondo de la página |
| `--bg-soft` | Fondo suave: pie de página, índice, recuadros |
| `--card` | Fondo de las tarjetas y de las preguntas de las FAQ |
| `--text` | Color del texto |
| `--muted` | Texto secundario: fechas, pies de foto, extractos |
| `--line` | Filetes y bordes |
| `--radius` | Redondeo de las tarjetas, los puntos fuertes y el índice (16 px en el tema Éclair) |
| `--shadow` | Sombra de las tarjetas y los puntos fuertes (ninguna en Estudio, Editorial y Contraste) |
| `--font` y `--font-head` | Fuente del texto, fuente de los títulos |
| `--text-w` | Ancho de la columna de lectura (42rem por defecto) |

Las direcciones de arte definen las mismas variables, más `--btn-r` para el redondeo de los botones: tus reglas funcionan con ambas. Una excepción: no redefinas `--accent`. Éclair calcula a partir del color principal el texto de los botones y el color de los enlaces; un color cambiado con CSS escaparía a ese cálculo de contraste.

## Ejemplos comentados para Atelier Nova

Cada ejemplo se pega tal cual. Añádelos de uno en uno y mira el resultado antes de pasar al siguiente.

```css
/* Esquinas más discretas y columna de lectura algo más ancha */
:root{--radius:10px;--text-w:46rem}

/* Botones: esquinas a juego con las tarjetas, texto en mayúsculas espaciadas */
.btn{border-radius:var(--radius);text-transform:uppercase;letter-spacing:.06em}

/* Subtítulos H2 de tus textos: color de los enlaces, contraste verificado */
.content>h2{color:var(--link-c)}
```

La regla `.content>h2` solo afecta a los subtítulos de tus textos: los títulos de unas FAQ o de un bloque Puntos fuertes están en su propia sección y no cambian.

```css
/* Banner: título menos macizo, entradilla en el color del texto */
.hero-title{font-size:clamp(2rem, 1.5rem + 2.4vw, 3.2rem)}
.hero-lead{color:var(--text)}

/* Tarjetas de artículos: foto en formato 4/3, extracto limitado a 2 líneas */
.card-img img{aspect-ratio:4/3}
.card-excerpt{-webkit-line-clamp:2}

/* FAQ: la pregunta abierta se distingue */
.faq details[open]{border-color:var(--accent)}
.faq details[open] summary{color:var(--link-c)}

/* Recuadros con una línea a la izquierda, pie de página subrayado */
.callout{border-left:4px solid var(--accent)}
.site-footer{border-top:3px solid var(--accent)}

/* En el móvil, banner más compacto */
@media (max-width:40rem){.hero{padding-top:2rem;padding-bottom:1rem}}
```

Dos marcadores del tema también funcionan en tu CSS. Las reglas situadas entre `/*dark*/` y `/*/dark*/` desaparecen cuando el modo oscuro está en «Siempre claro». Las situadas entre `/*shop*/` y `/*/shop*/` solo se envían si la tienda está abierta.

```css
/*dark*/@media (prefers-color-scheme:dark){
  .hero-img img{filter:brightness(.9)}
}/*/dark*/

/*shop*/
.price .price-now{color:var(--link-c)}
/*/shop*/
```

> **Dirección de arte y modo oscuro** — Con una dirección de arte, el sitio ya no tiene modo oscuro automático, pero una regla `prefers-color-scheme:dark` de tu CSS se aplicaría igualmente a los visitantes cuyo dispositivo está en modo oscuro. No la escribas: la dirección ya fija un fondo claro u oscuro.

## ¿Por qué no se aplica tu regla?

Tu CSS llega el último: a igualdad de selector, gana. Pero un selector más preciso del tema se impone de todos modos. Tres casos reales: la letra capitular de los artículos del tema Editorial (`.content.post>p:first-of-type::first-letter`), las imágenes de las tarjetas en modo lista (`.cards-list .card-img img`) y las fotos cuadradas de los productos (`.product-card .card-img img`). La solución es repetir el mismo selector:

```css
/* Tema Editorial: sin letra capitular al principio del artículo */
.content.post>p:first-of-type::first-letter{float:none;font:inherit;margin:0;color:inherit}
```

Para apuntar a un tipo de página, la etiqueta `<body>` lleva clases útiles: `is-post` para un artículo, `is-page` para una página, `is-list` para el blog y las categorías, `hdr-center` para la cabecera centrada, `cards-list` para las listas en modo lista. Evita `!important`: la regla se vuelve muy difícil de corregir después.

## Probar tus reglas sin sorpresas

1. Escribe una regla cada vez, con un comentario que diga lo que hace.
2. Haz clic en **Guardar** y mira la **Vista previa en directo**: el inicio, un artículo y la tienda si está abierta, en **Ordenador** y en **Móvil**.
3. Abre una página en el editor en modo Visual y pasa al ancho de 390 px.
4. Si el modo oscuro está en «Automático», pon tu dispositivo en modo oscuro y recarga el sitio.
5. Conserva una copia fechada de tu CSS en un archivo de texto.

![Ajustes › Apariencia: la vista previa en directo del sitio, con la opción de ordenador o móvil](https://eclair.academy/media/2026/11/eclair-academy-appearance-es.webp)
*La vista previa en directo, tu banco de pruebas tras cada guardado*

> **Guarda antes de comprobar** — La vista previa en directo y el modo Visual muestran el CSS guardado, no el que estás escribiendo. Guarda primero y comprueba después.

## Para recordar

- Tu CSS se escribe en Ajustes › Apariencia, se añade después del tema y sobrevive a las actualizaciones.
- Escribe con las variables del tema (`--bg`, `--text`, `--link-c`…) para seguir el modo oscuro.
- No cambies nunca el color principal con CSS: usa el ajuste previsto.
- Se eliminan el carácter `<` y los `@import`, y el campo admite 64 KB como máximo.
- Guarda y después comprueba en la vista previa, en el modo Visual y en modo oscuro.

## Para saber más

- [Elegir un tema y ajustar la apariencia](https://eclair.academy/es/rutas/intermedio/temas-apariencia): lo que cada tema ya ajusta, antes de escribir una sola línea.
- [Personalizar las plantillas del tema](https://eclair.academy/es/rutas/experto/personalizar-tema): cuando el CSS ya no basta y hay que modificar el HTML.
- [Rendimiento: mantener 100 sobre 100](https://eclair.academy/es/rutas/experto/rendimiento): por qué cuenta cada kilobyte de CSS.
- Fuentes: [el uso de las propiedades personalizadas de CSS](https://developer.mozilla.org/es/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties) y [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) (en inglés), en MDN.

## Preguntas frecuentes

### ¿Desaparece mi CSS personalizado al actualizar Éclair?

No: se guarda en la carpeta `data/`, que el procedimiento de actualización no toca. También forma parte de la copia de seguridad ZIP que se descarga desde la página Seguridad.

### ¿Por qué no funciona mi condición «width &lt; 600px»?

Por seguridad, Éclair elimina el carácter `<` de tu CSS. Escribe la condición con max-width, por ejemplo `@media (max-width:37.5rem)`.

### ¿Puedo importar una fuente de Google Fonts?

No: las reglas `@import` se eliminan y la política de seguridad del sitio solo acepta las fuentes que sirve tu propio sitio. Si quieres una tipografía propia, recurre a una dirección de arte.

### ¿Mi CSS ralentiza el sitio?

Se inserta en cada página, en forma compacta. Unas decenas de líneas solo pesan 1 o 2 KB: mantenlo corto y elimina las reglas que ya no sirvan.

### ¿Por qué no aparecen mis cambios en la vista previa?

La vista previa en directo y el modo Visual usan el CSS guardado. Haz clic en **Guardar** y recarga la vista previa; en el sitio público, la caché se vacía automáticamente.