Aprendiendo HTML y CSS parte 13 – Anula atributos CSS

Anula declaraciones class utilizando atributos ID.

En el anterior apartado comprobamos que los navegadores leerán CSS de arriba hacia abajo, lo que significa que cuando dos declaraciones entren en conflicto, el navegador usará la declaración CSS que esté de última.

Pero hay otra manera de anular CSS, ¿recuerdas los atributos ID?

Anulemos nuestras clases “texto-rosa” y “texto-azul” y hagamos nuestro elemento h1 color naranja dándole un ID.

Aquí dejamos tu progreso de la entrada anterior, copia y pega tu código en nuestro editor online (Try it editor) para seguir aprendiendo:

 

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}

.
</style>
<h1 class="blue-text pink-text" >Hello World!</h1>

 

Dale a tu elemento h1 el atributo ID “texto-naranja”, recuerda que  para aplicárselo a un elemento debes hacer algo como esto:

 

<h1 id="orange-text">

 

Deja las clases “texto-azul” y “texto-rosa” en tu elemento h1.

Crea una declaración CSS para tu ID “texto-naranja” en tu elemento <style>. Aquí te dejamos un ejemplo:

 

#brown-text {
color: brown;
}

 

  1. Tu elemento h1 debe tener la clase “texto-rosa”.
  2. Tu elemento h1 debe tener la clase “texto-azul”.
  3. Dale a tu elemento h1 el ID “texto-naranja”.
  4. No le des a tu elemento h1 ningún atributo style.
  5. Tu elemento h1 debe ser naranja.

 

Nota: No importa si declaras esto arriba o debajo de tus declaraciones class, ya que los atributos ID siempre serán tomados en cuenta primero.

 

Anula declaraciones Class con estilos de una linea.

Hemos probado que las declaraciones ID anulan las declaraciones class, sin importar el lugar en que fueron declaradas en tu elemento style.

Pero aún hay otras maneras con las que puedes anular declaraciones CSS, ¿recuerdas las declaraciones de una linea?

Usa una declaración de una linea para intentar hacer nuestro elemento de color blanco. Recuerda que los estilos de una linea lucen asi:

 

<h1 style="color: green">

 

Deja los atributos anteriormente aplicados a tu elemento h1.

 

  1. Tu elemento h1 debe tener el class “texto-rosa”.
  2. Tu elemento h1 debe tener el class “texto-azul”.
  3. Tu elemento h1 debe tener el ID “texto-naranja”.
  4. Dale a tu elemento h1 el estilo color: white;.
  5. Tu elemento h1 debe ser blanco.

 

Anula todo usando !Important

Yay! Acabamos de demostrar que los estilos de una linea anularán todos las declaraciones en tu elemento style.

Pero espera, hay una última manera de anular CSS. Es el método más poderoso de todos. pero antes de hacerlo, hablemos un poco de por qué deberías anular CSS.

En muchas situaciones, usarás librerías CSS, las cuales accidentalmente podrán anular tu propio CSS. Entonces, cuando necesites estar seguro de que un elemento tendrá un CSS en específico, puedes usar !important.

Ahora regresemos a nuestra declaración “texto-rosa”. Recordemos que nuestra declaración “texto-rosa” fue anulada por una declaración class subsecuente, una declaración ID y una declaración en una linea. Ahora, añadamos la palabra clave !important a la declaración “texto-rosa” para estar 100% seguro de que tu declaración h1 será color rosa. Un ejemplo de como hacerlo es el siguiente:

 

color: red !important;

 

  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 tener el ID “texto-naranja”.
  4. Tu elemento h1 debe tener el estilo de una linea color: white;.
  5. Tu declaración class “texto-rosa” debe tener la palabra clave !important.
  6. Tu elemento h1 debe ser blanco.

 

 

Con esta tarea damos por finalizada ésta entrega. En el siguiente apartado hablaremos de las distintas maneras de colocar toda la gama de colores a nuestros elementos HTML. 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 *