Ejercicio 13 — Herencia, Especificidad y Cascada

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

En este ejercicio se practica cómo las reglas de herencia, especificidad y cascada influyen en la aplicación final de los estilos en CSS. Se analiza cómo las distintas formas de definir reglas (por elemento, clase o ID) interactúan entre sí, y cómo el orden y el uso de !important afectan el resultado.

Enunciado

A partir del archivo HTML proporcionado, crea una hoja de estilos que cumpla los siguientes requisitos:

  • Usa herencia para aplicar un color de texto general a todo el documento.
  • Los párrafos dentro de la sección deben usar una fuente diferente a la predeterminada.
  • El elemento con la clase highlight debe tener un fondo amarillo y texto en negrita.
  • El párrafo con el id="override" debe sobrescribir el color general con uno propio.
  • El título principal (<h1>) debe heredar el color general pero tener un tamaño mayor definido directamente.
  • Usa al menos una regla con !important para comprobar la prioridad.

Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Herencia, Especificidad y Cascada</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header id="main-header">
      <h1 class="title">Título Principal</h1>
    </header>
    <section>
      <p class="highlight">Este es un párrafo destacado.</p>
      <p>Este es un párrafo normal.</p>
      <p id="override">Este es un párrafo que debe sobrescribir los estilos.</p>
    </section>
    <footer>
      <p>Este es el pie de página.</p>
    </footer>
  </div>
</body>
</html>

Código CSS

/* Herencia general */
body {
  color: rgb(172, 14, 211);
  font-family: Arial, sans-serif;
}

/* Párrafos dentro de una sección con una fuente distinta */
section p {
  font-family: "Courier New", monospace;
}

/* Clase .highlight con fondo amarillo y texto en negrita */
.highlight {
  background-color: yellow;
  font-weight: bold !important;
}

/* Párrafo con el id override que sobrescribe el color general */
#override {
  color: rgb(20, 163, 220);
}

/* Título principal: heredar color pero con mayor tamaño */
h1 {
  font-size: 2em;
}

Respuestas a las preguntas

  • ¿Qué sucede si cambias el orden de las reglas CSS?
    Si dos reglas tienen igual especificidad, gana la última en el archivo.
  • ¿Cómo afecta la especificidad a los estilos aplicados en el párrafo #override?
    El selector de ID #override tiene más especificidad que una regla general (body o p), por eso sobrescribe el color heredado, aunque aparezca antes o después en el CSS.
  • ¿Qué sucede si eliminas el !important de alguna regla?
    Si se quita el !important de .highlight, el texto en negrita podría cambiarse por otra regla que se ponga despues.
  • ¿Qué reglas son heredadas automáticamente y cuáles necesitas especificar explícitamente?
    Las heredadas automáticamente son: color, font-family, font-size, line-height. Las no heredadasson: background, border, margin, padding...
🚀 Ver resultado del ejercicio
← Volver al tema