Ejercicio 11 — Estilos en función de la jerarquía

📅 7 de noviembre de 2025 ✍️ Pablo Jiménez 📚 Tema 2

Este ejercicio tiene como objetivo comprender cómo actúan las reglas de prioridad y jerarquía en CSS, dependiendo de su tipo (elemento, clase, ID o estilo en línea) y el uso del modificador !important. También se analiza el orden de declaración y cómo afecta al estilo final de los elementos.

Enunciado

Crea un archivo HTML llamado index.html y un archivo CSS llamado styles.css. En el HTML, estructura los elementos con encabezados, párrafos y un div contenedor. En el CSS, define reglas en este orden:

  • Regla de elemento: color para todos los <h1>.
  • Regla de clase: color para la clase .titulo.
  • Regla de ID: color para el ID #parrafo.
  • Regla con !important: color para .texto dentro de un div.
  • Última regla: color general para todos los párrafos.

Finalmente, aplica un estilo en línea al elemento <h1> para observar cómo sobrescribe las demás reglas.

Código HTML

<!doctype html>
<html lang="es">
<head>
  <title>Ejercicio 11 - Jerarquía de estilos</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Estilo en línea con mayor prioridad que cualquier regla externa -->
  <h1 class="titulo" style="color: orange;">Título Principal</h1>

  <p id="parrafo">Este es un párrafo de para el ejemplo.</p>

  <div class="contenedor">
    <p class="texto">Texto dentro de un div</p>
  </div>
</body>
</html>

Código CSS

/*Regla de elemento: todos los h1 en color azul */
h1 {
  color: blue;
}

/*Regla de clase: clase .titulo en color verde */
.titulo {
  color: green;
}

/*Regla de ID: #parrafo en color rojo */
#parrafo {
  color: red;
}

/*Regla con !important: clase .texto dentro de un div */
div .texto {
  color: purple !important;
}

/*Última regla: todos los párrafos en gris */
p {
  color: gray;
}

Respuestas a las preguntas

  • ¿Qué color se aplica finalmente al encabezado <h1>?
    El color final del <h1> es naranja, porque el estilo en línea (style="color: orange;") tiene la mayor prioridad en la jerarquía de CSS.
  • ¿Cuál es el color del párrafo con el ID #parrafo?
    El párrafo con ID #parrafo se muestra en rojo, porque las reglas de ID tienen más prioridad que las de clase o las de elemento.
  • ¿Qué color tiene el párrafo con la clase .texto dentro del div?
    Este párrafo se muestra en púrpura (purple), porque la regla contiene !important, lo que hace que sobrescriba todas las demás reglas, incluso las de ID o las más específicas.
🚀 Ver resultado del ejercicio
← Volver al tema