Couleurs d'accentuation et mise en évidence

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 14 sur 35.

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

Créez une variable CSS pour votre 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 surbrillance les éléments de navigation actifs en utilisant 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éfinissez la couleur d'accentuation en utilisant une variable CSS --accent-color.
Appliquez la couleur d'accentuation à tous les boutons de la page.
Modifiez l'état de survol (hover) des boutons pour qu'ils utilisent la couleur primaire.
Appliquez la couleur d'accentuation aux liens, au texte mis en évidence et aux liens du pied de page pour plus de cohérence.

Aide-mémoire

Les couleurs d'accentuation aident les éléments importants à se démarquer. Définissez-les comme des variables CSS et utilisez-les de manière cohérente sur l'ensemble de votre site.

Créez une variable CSS pour votre couleur d'accentuation :

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

Utilisez la couleur d'accentuation pour les boutons :

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

Mettez en évidence les éléments de navigation actifs :

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

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>