Séance 2 : Structure Sémantique et Sélecteurs CSS

1. Organiser le Contenu et Cibler les Éléments

1.1 Penser en Systèmes : Une Approche Professionnelle

Pour passer de la création de pages simples à la construction d'applications web robustes, il faut adopter une approche systématique. Au lieu de choisir des couleurs ou des tailles au cas par cas, les professionnels définissent un Design System : une collection de variables et de règles qui garantissent la cohérence sur l'ensemble d'un projet.

Nous avons refactorisé notre fichier styles.css pour y intégrer cette approche. Il contient maintenant, à l'intérieur d'un bloc :root, toutes nos "variables de design" (design tokens) pour les couleurs, la typographie et les espacements. À partir de maintenant, nous utiliserons ces variables (ex: var(--color-primary)) dans notre CSS pour tous les exercices.

1.2 Variables CSS (Custom Properties) : Pour un Code Plus Intelligent

Les Variables CSS, aussi appelées "Custom Properties", sont un peu comme des variables en programmation : elles vous permettent de définir des valeurs réutilisables dans votre feuille de style. Cela simplifie la maintenance, améliore la cohérence et rend les changements de thème beaucoup plus faciles.

Définition et Utilisation :

:root {
    --primary-color: #6366F1; /* indigo-500 */
    --secondary-color: #818CF8; /* indigo-400 */
    --text-color: #334155; /* slate-700 */
    --spacing-unit: 1rem;
}

.card {
    background-color: var(--primary-color);
    color: white;
    padding: calc(2 * var(--spacing-unit)); /* 2rem */
    border-radius: 0.5rem;
}

.button {
    background-color: var(--secondary-color);
    color: white;
    padding: var(--spacing-unit);
}

L'avantage est que si vous décidez de changer la couleur principale de votre site, vous n'avez qu'à modifier une seule ligne dans :root, et toutes les occurrences de --primary-color seront mises à jour automatiquement !

1.3 L'Importance de la Sémantique HTML

La sémantique HTML, c'est l'art d'utiliser les balises HTML de manière à ce qu'elles décrivent le sens et le rôle du contenu qu'elles contiennent, et non seulement son apparence. C'est crucial pour plusieurs raisons :

Voici quelques balises sémantiques courantes :

<header> <!-- Contient généralement le logo, le titre du site, la navigation -->
    <nav> <!-- Contient les liens de navigation principaux -->
        <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Services</a></li>
        </ul>
    </nav>
</header>

<main> <!-- Contient le contenu principal, unique à la page -->
    <section> <!-- Un regroupement thématique de contenu -->
        <h2>Titre de Section</h2>
        <p>Contenu de la section.</p>
    </section>

    <article> <!-- Contenu autonome, comme un article de blog ou une actualité -->
        <h2>Titre de l'Article</h2>
        <p>Contenu de l'article.</p>
    </article>
</main>

<footer> <!-- Contient les informations de copyright, liens de contact, etc. -->
    <p>&copy; 2024 Mon Site</p>
</footer>

<div> <!-- Conteneur générique, sans signification sémantique particulière -->
    <span> <!-- Élément en ligne générique, sans signification sémantique particulière -->
</div>

1.4 Rappel : Liaison HTML/CSS (Feuille de Style Externe)

Pour rappel, la méthode la plus propre et recommandée pour lier votre HTML et votre CSS est d'utiliser une feuille de style externe. Cela permet de séparer clairement la structure du style et de réutiliser le même fichier CSS sur plusieurs pages.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de ma page</title>
    <link rel="stylesheet" href="styles.css"> <!-- La ligne importante -->
</head>

1.5 Les Sélecteurs CSS : Cibler avec Précision

Les sélecteurs CSS nous permettent de choisir les éléments HTML que nous voulons styliser. Plus nous sommes précis, plus nous avons de contrôle sur notre design.

1.5.1 Sélecteurs de Type (Balise)

Cible toutes les occurrences d'une balise HTML spécifique.

p {
    color: #333;
}
h1 {
    font-size: 12px;
}

1.5.2 Sélecteurs de Classe (.classe)

Cible tous les éléments HTML qui ont un attribut class spécifique. Une classe peut être appliquée à plusieurs éléments, et un élément peut avoir plusieurs classes.

<p class="texte-important">Ceci est un texte important.</p>
<div class="card texte-important">Une carte importante.</div>
.texte-important {
    color: red;
    font-weight: bold;
}
.card {
    border: 1px solid #ccc;
    padding: 15px;
}

1.5.3 Sélecteurs d'ID (#id)

Cible un élément HTML unique avec un attribut id spécifique. Un ID doit être unique sur toute la page HTML (il ne doit y avoir qu'un seul élément avec un ID donné).

<div id="zone-principale">...</div>
#zone-principale {
    background-color: #f0f0f0;
    margin: 20px;
}

1.5.4 Sélecteurs Descendants

Permettent de cibler un élément qui est un "descendant" (enfant, petit-enfant, etc.) d'un autre élément. On les écrit en séparant les sélecteurs par un espace.

Il existe également le sélecteur de descendant direct (enfant direct) d'un autre élément. On les écrit en séparant les sélecteurs par >.

Exemple : pour cibler tous les liens (<a>) qui se trouvent à l'intérieur d'une balise de navigation (<nav>). Une des balise a n'est pas un enfant direct de nav.

<nav>
    <a href="#">Lien 1</a>
    <p><a href="#">Lien 2 dans un paragraphe</a></p>
</nav>
<a href="#">Lien hors navigation</a>
nav a {
    color: purple; /* Seuls les liens DANS le <nav> seront violets */
    text-decoration: none;
}

1.5.5 Pseudo-classe :hover

Une pseudo-classe est un mot-clé ajouté à un sélecteur qui spécifie un état spécial de l'élément. La pseudo-classe :hover s'applique lorsqu'un utilisateur passe la souris sur un élément.

C'est très utile pour ajouter de l'interactivité et du feedback visuel à vos liens et boutons.

a {
    color: blue;
    transition: color 0.3s ease; /* Pour une transition douce */
}

a:hover {
    color: darkblue; /* La couleur change au survol */
    text-decoration: underline; /* Le texte est souligné au survol */
}

2. Exercices d'Application

Pour chaque exercice, créez un nouveau fichier HTML et CSS (ou continuez sur les fichiers de la Séance 1 si vous le souhaitez, en les organisant bien). N'oubliez pas de lier votre fichier CSS dans le <head> de votre HTML.

Exercice 1 : Structure Sémantique

Exercice 2 : Sélecteurs de Classe et d'ID

Exercice 3 : Sélecteurs Descendants et Effet de Survol (:hover)

3. TP : Refactorisation avec le Design System

Pour ce TP, vous allez reprendre la page de présentation personnelle de la Séance 1. L'objectif est de la refactoriser en utilisant la sémantique HTML et d'appliquer notre nouveau Design System.

Consignes :

  1. Ouvrez les fichiers index.html et styles.css de votre TP de la Séance 1.
  2. Refactorisation HTML (Sémantique) :
    • Remplacez les <div> par les balises sémantiques appropriées : <header>, <main>, <section>, <footer>.
  3. Stylisation avec le Design System :
    • Dans votre styles.css, supprimez les anciennes règles de style du TP1.
    • En utilisant des sélecteurs (classes, ID), appliquez les variables de notre Design System. Par exemple : 
      .profile-header {
    background-color: var(--color-surface);
    padding: var(--space-8);
}

#main-title {
    color: var(--color-primary);
    font-size: var(--font-size-h1);
}

.about-me-section {
    margin-bottom: var(--space-6);
}
    • Assurez-vous que toutes les couleurs, tailles de police, et espacements utilisent une variable var(...).
  4. Vérification : Comparez l'apparence de votre page avec la version précédente. Le but n'est pas d'avoir exactement le même look, mais d'avoir un design cohérent basé sur notre système.