Colores de acento y resaltado

Parte de la sección Frontend Práctico del Journey de HTML de Coddy. Lección 14 de 35.

Los colores de acento ayudan a destacar elementos importantes, como botones, enlaces, secciones con llamadas a la acción o texto resaltado. Puedes definirlos como variables CSS (--primary-color, --accent-color, --highlight-color) y usarlos de forma coherente en todo el sitio. Los estados al pasar el cursor y los resaltados también pueden usar estas variables, lo que facilita crear un tema visualmente atractivo y cohesivo, a la vez que se llama la atención sobre el contenido clave.

Crea una variable CSS para tu color de acento:

:root {
  --accent-color: #ff6b6b;
}

Usa el color de acento para los elementos interactivos importantes, como los botones:

.button-primary {
  background-color: var(--accent-color);
  color: white;
}

Resalta los elementos de navegación activos usando el color de acento:

.nav-item.active {
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
}

Desafío

Fácil

Tu tarea:

Establece el color de acento usando una variable CSS --accent-color.
Aplica el color de acento a todos los botones de la página.
Cambia el estado al pasar el cursor de los botones al color principal.
Aplica el color de acento como el color del texto de los enlaces, del texto resaltado (.highlight) y de los enlaces del pie de página para mantener la coherencia.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <title>Accent Colors & Highlighting</title>
  <style>
    :root {
      --primary-color: #1e90ff;
      --text-color: #222;
      --bg-color: #f9f9f9;
      
    }

    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: var(--bg-color);
      color: var(--text-color);
    }

    header {
      background-color: var(--primary-color);
      color: white;
      padding: 1rem;
      text-align: center;
    }

    main {
      padding: 2rem;
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .card {
      background-color: white;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .card h2 {
      margin-top: 0;
      color: var(--primary-color);
    }

    .card button {
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      cursor: pointer;
    }

    a {
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .highlight {
      color: white;
      padding: 0 4px;
      border-radius: 3px;
    }

    footer {
      background-color: #222;
      color: white;
      text-align: center;
      padding: 1rem;
      margin-top: 2rem;
    }

    footer a {
      margin: 0 0.5rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>Summer Music Festival</h1>
    <p>Experience <span class="highlight">unforgettable</span> music and vibes all summer long!</p>
  </header>

  <main>
    <div class="card">
      <h2>Rock Stage</h2>
      <p>Join the rock legends for an unforgettable night of music! <a href="#">More info</a></p>
      <button>Learn More</button>
    </div>

    <div class="card">
      <h2>Jazz Stage</h2>
      <p>Relax with smooth jazz performances under the open sky. <a href="#">Schedule</a></p>
      <button>Learn More</button>
    </div>

    <div class="card">
      <h2>EDM Stage</h2>
      <p>Dance all night with top DJs spinning the hottest tracks. <a href="#">Lineup</a></p>
      <button>Learn More</button>
    </div>
  </main>

  <footer>
    <p>Follow us on <a href="#">Instagram</a> | <a href="#">Facebook</a> | <a href="#">Twitter</a></p>
  </footer>
</body>
</html>