Aprendiendo HTML y CSS parte 12 – Priorizando estilos CSS

Herencia del Body en una pagina HTML

Ahora hablemos un poco acerca de la herencia en CSS.

Toda pagina HTML tiene un elemento body y podemos configurar sus propiedades con CSS como por ejemplo, darle un color de fondo de la siguiente manera:

 

<style>
body {
background-color: black;
}

</style>

 

De esta manera, se puede configurar el elemento body de una página web como cualquier elemento y todos los elementos que estén dentro del body heredan las propiedades que tenga configuradas.

Ahora, abre nuestro editor online (Try it editor) para escribir algo de código.

Crea un elemento h1 con el texto “Hola Mundo”, luego configura el selector del body en el elemento style para que todos los elementos sean de color verde añadiendo al selector la propiedad color: green; justo como antes habiamos configurado el fondo para que fuera de color negro. Finalmente dale a tu elemento body la fuente Monospace añadiendo la declaracion font-family: Monospace; al selector del body en el elemento style.

 

  1. Crea un elemento h1.
  2. Tu elemento h1 debe tener el texto “Hola Mundo”.
  3. Asegúrate de que tu elmento h1 tenga su etiqueta de cierre.
  4. Dale a tu elemento body la propiedad de color verde.
  5. Dale a tu elemento body la propiedad de fuente Monospace.
  6. Tu elemento h1 debería heredar las propiedades de fuente y color de tu elemento body.
  7. No cierres la ventana, seguiremos usando el mismo código.

 

Prioriza un estilo sobre otro

A veces tus elementos HTML recibirán múltiples estilos que entrarán en conflicto unos con otros. Por ejemplo, tu elemento h1 no puede ser verde y rosado al mismo tiempo. Veamos qué sucede cuando creamos un class que hace el texto rosado, luego aplícalo a tu elemento. ¿Nuestro class anulará el color verde del estilo aplicado a la propiedad de nuestro elemento body?

Sea un class CSS llamado “texto-rosa” que le dé el color rosado a un elemento y luego aplícalo a nuestro elemento h1.

 

  1. Tu elemento h1 debe tener un class llamado “texto-rosa”.
  2. Tu <style> debe tener una declaración CSS llamado “texto-rosa” con la propiedad color: pink;.
  3. Tu elemento h1 debe ser rosado.

 

Anula estilos subsecuentes en CSS.

Nuestra clase “texto-rosa” anuló nuestra declaración CSS sobre nuestro elemento body.

Con esto, comprobamos que nuestras declaraciones class siempre anularán nuestras declaraciones CSS  para los elementos en el body. Así que la siguiente pregunta sería ¿qué podemos hacer para anular nuestra declaración clase “texto-rosa”?

Crea un CSS class adicional llamado “texto-azul” que le dé a un elemento color azul. Asegúrate de que ésta declaración esté debajo de la declaración “texo-rosa”.

Aplica el class “texto-azul” a tu elemento h1 adicionalmente del class “texto-rosa” y veamos cual anulará a cual.

Aplicar varios atributos class a un mismo elemento HTML se hace con un espacio entre ellos, por ejemplo:

 

class="class1 class2"

 

Nota: No importa el orden en que se coloquen las clases en el elemento HTML.

 

  1. Tu elemento h1 debe tener la clase “texto-rosa”.
  2. Tu elemento h1 debe tener la clase “texto-azul”.
  3. Tu elemento h1 debe ser azul.

 

Sin embargo, el orden de las declaraciones en la sección <style> es lo que si importa. La segunda declaración será la que será tomada en cuenta primero. Como .texto-azul fue declarada en segundo lugar, anula el atributo de .texto-rosa.

 

 

Con esta tarea damos por finalizada ésta entrega. En el siguiente apartado profundizaremos más en cómo anular un atributo por otro . Puedes ingresar a la entrada aquí: Siguiente

También puedes regresar a la anterior entrada si deseas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *