Reseteadores de estilos

Curso de HTML

6.  
16.  
17.  
23.  
32.  
34.  
36.  
37.  
38.  
40.  
45.  
46.  
47.  
52.  
54.  
56.  
59.  

Contactar con el profesor

Quizás hayas oído hablar de los reseteadores de estilos y tienes la intrigante de para qué sirven o cual es la mejor opción para usarlos. Pues en este video te aporto mi experiencia.

Para qué sirve un reseteador de estilos

Los componentes de una página web suelen tener una serie de estilos aunque nosotros no se los hayamos asignado. Las listas (ul) tienen un padding-left, los encabezados (h1, h2, h3, h4, h5, h6) tien un margin-top y un margin-bottom, los párrafos ( p ), tienen un margin-bottom, etc.

Estos estilos definen un comportamiento por defecto de la etiqueta, que en muchas ocasiones no nos viene bien. A veces quisiéramos que los párrafos estuviesen más juntos y debemos eliminar el margin-bottom. Otras veces querríamos que la lista estuviese pegada a la izquierda en vez de tener ese padding-left. Cuando eso ocurre, una opción es sobrescribir los estilos por defecto de la etiqueta, por ejemplo:


ul{
	padding:0
}	
p{
	margin-bottom: 0
}
h1, h2, h3, h4, h5, h6{
	margin-top:0;
	margin-bottom:0
}

¿Se entiende?. Pues lo anterior es un reseteador de estilos. Uno que acabo de improvisar sobre la marcha. Tu puedes hacer uno que se ajuste a tus necesidades. También puedes usar el siguiente reseteador de estilos:


*{
	margin:0;
	padding:0
}

El selector * implica que los estilos encerrados entre llaves se aplicarán a todas las etiquetas de la página web.

Personalmente, no utilizo reseteadores de estilos. Por dos razones. Una, porque generalmente hago páginas web con wordpress que ya tienen una hoja de estilos hecha de más de 2000 líneas y no tiene mucho sentido añadir yo el reseteador (y por otra parte, la hoja de estilos ya suele venir con él). La otra razón es que cuando empiezo un desarrollo desde cero, y soy yo el que escribe las primeras líneas en la hojas de estilos. A menudo prefiero ir cambiando los estilos de los elementos según lo voy necesitando en lugar de usar un reseteador de estilos por sistema.

← Hacer una newsletter responsive sin media queries
Ejercicio CSS →

Aviso Legal | Política de privacidad