Cómo añadir CSS personalizado a cualquier sitio web — guía para principiantes

16 mayo 2026 · por JustZix Team

¿Quieres cambiar el aspecto de un sitio web — ocultar un elemento molesto, arreglar una fuente ilegible o ensanchar una maquetación apretada? Esta guía amigable para principiantes te muestra cómo añadir CSS personalizado a cualquier sitio web, cubre las ventajas y desventajas honestas de cada método y termina con un recorrido práctico que puedes seguir hoy.

Qué significa realmente "CSS personalizado"

Cada página web está estilizada con CSS — Hojas de Estilo en Cascada — reglas que controlan colores, fuentes, espaciado y maquetación. "CSS personalizado" significa tu propio CSS adicional superpuesto sobre el del sitio, aplicado solo en tu navegador. El sitio no cambia para nadie más. No estás hackeando nada; estás ajustando cómo se te presenta la página, igual que el Modo Lectura o un bloqueador de anuncios.

Método 1 — DevTools (temporal, ideal para probar)

Todo navegador moderno tiene Herramientas de Desarrollo integradas. Pulsa F12 (o haz clic derecho sobre un elemento y elige "Inspeccionar"). En el panel Estilos puedes editar CSS en vivo y ver el resultado al instante.

El inconveniente: es temporal. En cuanto recargas la página, todo se reinicia. DevTools es perfecto para averiguar qué CSS quieres, pero no es una forma de conservar un cambio.

Método 2 — las herramientas integradas del navegador

Algunos navegadores te permiten guardar una hoja de estilos personalizada, y el Modo Lectura reduce una página a solo texto. Estos están bien para casos concretos, pero son limitados: el Modo Lectura es todo o nada, y una hoja de estilos personalizada global no puede apuntar fácilmente a un sitio de forma distinta a otro.

Método 3 — un estilo de usuario o una extensión (permanente)

Para hacer un cambio que persista entre recargas y se aplique automáticamente a los sitios elegidos, necesitas una extensión que inyecte CSS por ti. Esta es la respuesta práctica para la mayoría de la gente. Existen herramientas solo de CSS (cubiertas en nuestra guía de alternativas a Stylish), y hay herramientas que manejan CSS y JavaScript juntos. Recorreremos una de estas últimas, JustZix, porque es gratis y no necesita cuenta.

Primero — encuentra el selector correcto

Antes de poder estilizar algo, tienes que nombrarlo en CSS — eso es un selector. Haz clic derecho en el elemento que quieres cambiar y elige "Inspeccionar". En el HTML resaltado, fíjate en la class o el id del elemento:

<div class="newsletter-popup" id="signup-modal">
  ... popup content ...
</div>

Una class se escribe con un punto — .newsletter-popup. Un id se escribe con una almohadilla — #signup-modal. Esos son tus selectores.

Recorrido — añade CSS personalizado con JustZix

Instala la extensión desde la página de descarga (tarda unos dos minutos; sin cuenta).
Abre el sitio que quieres estilizar.
Haz clic en el icono de JustZix y elige Nueva regla.
Establece un patrón de URL para que la regla solo se ejecute donde quieres:
- https://example.com/* — todo el sitio
- https://example.com/blog/* — solo la sección del blog
- * — todos los sitios (úsalo con moderación)
Abre el panel CSS y pega tu CSS.
Guarda. La regla se aplica de inmediato y cada vez que vuelvas a una página coincidente.

Ejemplo 1 — ocultar un elemento

La petición más común: hacer que algo desaparezca. Ventana emergente de boletín, cabecera fija, barra lateral:

/* Hide a newsletter pop-up and its dark overlay */
.newsletter-popup,
#signup-modal,
.modal-backdrop {
  display: none !important;
}

/* Some pop-ups freeze scrolling — restore it */
html, body {
  overflow: auto !important;
}

La palabra clave !important le dice al navegador que tu regla gana sobre el CSS propio del sitio. La necesitarás a menudo al sobrescribir un diseño existente.

Ejemplo 2 — reestilizar para mejorar la legibilidad

Haz que un artículo sea cómodo de leer — texto más grande, más interlineado, una columna más estrecha:

/* Comfortable reading column */
article, .post-content {
  max-width: 720px !important;
  margin: 0 auto !important;
  font-size: 19px !important;
  line-height: 1.75 !important;
}

Ejemplo 3 — un ajuste oscuro rápido

Un fondo oscuro simple para una página de un blanco deslumbrante:

/* Minimal dark tweak */
html, body {
  background: #1a1a1a !important;
  color: #e0e0e0 !important;
}
a { color: #6db3f2 !important; }

Los temas oscuros completos son más complejos — muchos elementos que recolorear — pero esto basta para suavizar una página brillante.

Consejos para un CSS que no se rompe

Prefiere ocultar antes que eliminar. display: none es reversible — basta con desactivar la regla.
Acota tus reglas. Un patrón de URL específico le gana a * — evita sorpresas en sitios no relacionados.
Prueba primero en vivo. Usa el panel CSS dentro de la pestaña o DevTools para confirmar un selector antes de guardarlo.
Evita los selectores de atributo demasiado amplios como [class*="box"] — pueden coincidir con mucho más de lo que pretendes.

El panel CSS dentro de la pestaña de JustZix es útil aquí: editas, la página se actualiza mientras escribes, y cuando se ve bien lo guardas como regla. Consulta la página de funciones para el resto del conjunto de herramientas.

Véase también

¿Listo para que tu CSS personalizado se quede fijo? JustZix es gratis y se instala en un par de minutos — consíguelo desde la página de descarga y crea tu primera regla hoy.

Valora este artículo

Sin valoraciones — sé el primero.