Couleurs d'accentuation et mise en évidence

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 14 sur 35.

Les couleurs d’accentuation aident les éléments importants à se démarquer, comme les boutons, les liens, les sections d’appel à l’action ou le texte mis en évidence. Vous pouvez les définir comme variables CSS (--primary-color, --accent-color, --highlight-color) et les utiliser de manière cohérente sur l’ensemble de votre site. Les états au survol et les mises en évidence peuvent également utiliser ces variables, ce qui permet de créer facilement un thème visuellement attrayant et harmonieux tout en attirant l’attention sur le contenu clé.

Crée une variable CSS pour ta couleur d’accentuation :

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

Utilisez la couleur d’accentuation pour les éléments interactifs importants comme les boutons :

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

Mettez en évidence les éléments de navigation actifs à l’aide de la couleur d’accentuation :

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

Défi

Facile

Votre tâche :

Définir la couleur d’accentuation à l’aide d’une variable CSS --accent-color.
Appliquer la couleur d’accentuation à tous les boutons de la page.
Modifier l’état au survol des boutons pour utiliser la couleur principale.
Appliquer la couleur d’accentuation comme color du texte des liens, du texte mis en évidence (.highlight) et des liens du pied de page, pour assurer la cohérence.

Essayez vous-même

<!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>