ES
PortuguêsEnglishEspañol
Inicio Favoritos
Voltar

CSS reset moderno (generador)

Marca las reglas. Cada una tiene un comentario corto que explica qué corrige, así puedes entenderlo y ajustarlo en vez de copiar a ciegas.

Cómo usar

El CSS que va al comienzo de todo sitio


Disponible en: PortuguêsEspañolEnglish

Siguiente herramientaCSV a JSON→
Publicidad

CSS reset moderno (generador): para qué sirve

Todo proyecto empieza corrigiendo las mismas cosas: márgenes predeterminados, box-sizing, imágenes que desbordan el diseño, campos de formulario con otra fuente y palabras largas que rompen la pantalla en el celular.

Marca las reglas que quieras y copia un reset corto y comentado, con box-sizing border-box, altura mínima en dvh, medios responsivos, font: inherit en los formularios, overflow-wrap, text-wrap balance y pretty en títulos y párrafos, desplazamiento suave solo para quien no pidió menos movimiento y la desactivación de las animaciones para quien sí lo pidió.

Cómo usar

  1. Marca las reglas que quieras usar.
  2. Lee el comentario de cada una.
  3. Copia o descarga el reset.css y ponlo al inicio de tu CSS.

Cuándo usar

  • Empezar un sitio desde cero.
  • Estandarizar los proyectos del equipo.
  • Entender qué hace cada regla de reset.

Preguntas frecuentes

¿Qué es un CSS reset?

Un conjunto pequeño de reglas colocado al inicio del CSS para quitar diferencias y valores predeterminados molestos de los navegadores, como márgenes en el body, imágenes que desbordan el diseño y campos de formulario con otra fuente. Facilita escribir el resto del CSS.

¿Reset o normalize?

normalize.css conserva los estilos predeterminados y solo corrige las diferencias entre navegadores; un reset moderno va un poco más allá y elimina lo que casi siempre se sobrescribe. Los navegadores actuales son mucho más parecidos entre sí, por eso los resets cortos como este se volvieron los más usados.

¿Por qué el desplazamiento suave va dentro de una media query?

El desplazamiento animado puede causar mareo en quien es sensible al movimiento. Dentro de prefers-reduced-motion: no-preference, solo se activa para quien no pidió menos movimiento en el sistema.

¿Es gratis de verdad?

Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.

Herramientas similares

¡Muchas gracias por ayudar!

Cada donación ayuda a mantener el sitio en línea. Las herramientas fueron hechas para ayudarte, pero tenemos gastos de servidores. Si puedes ayudar, ¡ayuda mucho! Elige o escribe el monto:

Pago seguro con Stripe. Se abre en otra pestaña.

Las herramientas se ofrecen tal como están, sin garantía. No nos responsabilizamos por los resultados ni por el uso que se hace de ellas.