Cours HTML/CSS 2026

HTML/CSS approfondi

Attributs globaux, Sélecteurs CSS et Box Model

Séance 3 - DSP - USAL33

Quentin Fait
Cours HTML/CSS 2026

5. Attributs globaux

Quentin Fait
Cours HTML/CSS 2026

Qu'est-ce qu'un attribut global ?

Attributs globaux = attributs utilisables sur toutes les balises HTML

Principaux attributs :

Attribut Rôle
id Identifiant unique
class Classe(s) CSS (réutilisable)
style Styles CSS inline
title Info-bulle au survol
data-* Données personnalisées
lang Langue du contenu
hidden Cache l'élément
Quentin Fait
Cours HTML/CSS 2026

Attribut id

Rôle : Identifiant unique dans la page

Règles :

  • Valeur unique sur toute la page
  • Commence par une lettre
  • Pas d'espaces
Quentin Fait
Cours HTML/CSS 2026

Usages :

<!-- Ciblage CSS -->
<div id="header">En-tête</div>

<!-- Ancre de navigation -->
<a href="#section2">Aller à la section 2</a>
<section id="section2">...</section>

<!-- Ciblage JavaScript -->
<button id="submit-btn">Envoyer</button>
Quentin Fait
Cours HTML/CSS 2026

Attribut class

Rôle : Une ou plusieurs classes CSS (réutilisables)

Règles :

  • Peut être utilisé sur plusieurs éléments
  • Un élément peut avoir plusieurs classes
  • Classes séparées par des espaces
<!-- Une classe -->
<p class="important">Texte important</p>

<!-- Plusieurs classes -->
<div class="card featured highlight">Carte mise en avant</div>

Bonne pratique : Préférer les classes aux IDs pour le style CSS

Quentin Fait
Cours HTML/CSS 2026

id vs class

Critère id class
Unicité Unique dans la page Réutilisable
Nombre par élément Un seul Plusieurs possibles
Spécificité CSS Très élevée (100) Moyenne (10)
Usage recommandé Ancres, JavaScript Styles CSS 
<!-- Bon usage -->
<nav id="main-nav" class="navigation sticky">
    <a href="#home" class="nav-link active">Accueil</a>
</nav>
Quentin Fait
Cours HTML/CSS 2026

Attribut style

Rôle : Styles CSS inline (dans la balise)

<p style="color: blue; font-size: 18px;">Texte bleu</p>

À éviter : Mélange structure et présentation

Préférer : Fichier CSS externe

Cas d'usage légitime : Styles générés dynamiquement par JavaScript

Quentin Fait
Cours HTML/CSS 2026

Attribut title

Rôle : Info-bulle au survol de la souris

<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Cliquez pour enregistrer">💾</button>
<img src="photo.jpg" alt="Photo" title="Photo de vacances 2026">

Avantages :

  • Aide contextuelle
  • Améliore l'UX

⚠️ Limites : Non accessible au tactile (mobiles)

Quentin Fait
Cours HTML/CSS 2026

Attributs data-* — Données personnalisées

Rôle : Stocker des données personnalisées (pour JavaScript)

<article data-article-id="42" data-author="Jean Dupont" data-category="tech">
    <h2>Titre de l'article</h2>
</article>

<script>
    const article = document.querySelector('article');
    console.log(article.dataset.articleId);  // "42"
    console.log(article.dataset.author);     // "Jean Dupont"
    console.log(article.dataset.category);   // "tech"
</script>

Bonne pratique : Préfixer avec data- + nom descriptif

Quentin Fait
Cours HTML/CSS 2026

Attribut lang

Rôle : Indique la langue du contenu

<html lang="fr">
    <body>
        <p>Texte en français</p>
        <p lang="en">This is in English</p>
        <p lang="es">Esto es en español</p>
    </body>
</html>

Avantages :

  • Accessibilité (prononciation correcte par lecteurs d'écran)
  • SEO (moteurs de recherche identifient la langue)
  • Traduction automatique
  • Correcteur orthographique du navigateur
Quentin Fait
Cours HTML/CSS 2026

Attribut hidden

Rôle : Cache un élément (non visible, non accessible)

<div hidden>Ce contenu est caché</div>

<!-- Peut être contrôlé en JavaScript -->
<div id="message" hidden>Message secret</div>
<button onclick="document.getElementById('message').hidden = false">
    Révéler
</button>

Équivalent CSS :

[hidden] {
    display: none;
}
Quentin Fait
Cours HTML/CSS 2026

Partie 3 (suite)

CSS approfondi

Sélecteurs avancés et Box Model

Quentin Fait
Cours HTML/CSS 2026

1. Sélecteurs avancés

Quentin Fait
Cours HTML/CSS 2026

Rappel : Sélecteurs de base

Sélecteur Cible Exemple
Type Toutes les balises d'un type p { color: blue; }
Classe Éléments avec une classe .important { font-weight: bold; }
ID Élément avec un ID unique #header { background: #333; }
Universel Tous les éléments * { margin: 0; }
Quentin Fait
Cours HTML/CSS 2026

Sélecteurs de classe et d'ID

Classe (.ma-classe)

  • Réutilisable sur plusieurs éléments
  • Préféré pour le style CSS
.button { padding: 10px 20px; }
.button-primary { background: blue; color: white; }

ID (#mon-id)

  • Unique dans la page
  • Haute spécificité (difficile à surcharger)
  • Réservé pour JavaScript ou ancres
#unique-header { font-size: 32px; }
Quentin Fait
Cours HTML/CSS 2026

Sélecteurs de combinaison

Sélecteur Nom Cible
A B Descendant Tous les B dans A (à n'importe quel niveau)
A > B Enfant direct B enfant immédiat de A
A + B Voisin adjacent B immédiatement après A (même parent)
A ~ B Voisins généraux Tous les B après A (même parent) 
/* Tous les <p> dans <article> */
article p { line-height: 1.6; }

/* Les <li> directs de <ul> */
ul > li { list-style: disc; }

/* Le premier <p> après un <h1> */
h1 + p { font-size: 1.2em; }
Quentin Fait
Cours HTML/CSS 2026

Pseudo-classes — État des éléments (1/2)

Pseudo-classe Cible Exemple
:hover Survol de la souris a:hover { color: red; }
:focus Élément ayant le focus input:focus { border-color: blue; }
:active Élément activé (clic) button:active { transform: scale(0.95); }
Quentin Fait
Cours HTML/CSS 2026

Pseudo-classes — État des éléments (2/2)

Pseudo-classe Cible Exemple
:first-child Premier enfant li:first-child { font-weight: bold; }
:last-child Dernier enfant li:last-child { border: none; }
:nth-child(n) n-ième enfant tr:nth-child(even) { background: #f0f0f0; }
Quentin Fait
Cours HTML/CSS 2026

Pseudo-éléments — Parties d'éléments

Pseudo-élément Cible Exemple
::before Contenu inséré avant p::before { content: "→ "; }
::after Contenu inséré après a::after { content: " ↗"; }
::first-line Première ligne p::first-line { font-weight: bold; }
::first-letter Première lettre p::first-letter { font-size: 2em; }
Quentin Fait
Cours HTML/CSS 2026
/* Ajouter une icône avant les liens externes */
a[href^="http"]::after {
    content: " 🔗";
}

Note : ::before et ::after nécessitent la propriété content

Quentin Fait
Cours HTML/CSS 2026

Sélecteurs d'attributs

Sélecteur Cible
[attr] Éléments avec l'attribut
[attr="value"] Attribut avec valeur exacte
[attr^="value"] Attribut commençant par value
[attr$="value"] Attribut finissant par value
[attr*="value"] Attribut contenant value 
/* Tous les liens externes */
a[href^="http"] { color: blue; }

/* Tous les PDFs */
a[href$=".pdf"]::after { content: " 📄"; }
Quentin Fait
Cours HTML/CSS 2026
/* Champs obligatoires */
input[required] { border-left: 3px solid red; }
Quentin Fait
Cours HTML/CSS 2026

Spécificité CSS

Spécificité = poids d'un sélecteur

Type de sélecteur Valeur Exemple
Éléments, pseudo-éléments 1 div, ::before
Classes, attributs, pseudo-classes 10 .card, [type], :hover
IDs 100 #header
Styles inline 1000 <div style="...">
!important ∞ color: red !important;
Quentin Fait
Cours HTML/CSS 2026

Calcul :

div p { }              /* 0-0-2   = 2 */
.intro p { }           /* 0-1-1   = 11 */
#content .intro p { }  /* 1-1-1   = 111 */

⚠️ Évitez !important : complique la maintenance

Quentin Fait
Cours HTML/CSS 2026

La cascade CSS

Cascade = ordre de priorité quand plusieurs règles ciblent le même élément

Ordre de priorité :

  1. Importance : !important
  2. Spécificité du sélecteur
  3. Ordre d'apparition (dernière règle gagne)

En cas d'égalité de spécificité :
La dernière règle définie l'emporte

p { color: blue; }
p { color: red; }  /* ← Celle-ci gagne */
Quentin Fait
Cours HTML/CSS 2026

2. Le Box Model

Quentin Fait
Cours HTML/CSS 2026

Le Box Model CSS

Chaque élément HTML est une boîte rectangulaire composée de 4 zones :

┌─────────────────────────────────────┐
│           MARGIN (extérieur)        │
│  ┌───────────────────────────────┐  │
│  │        BORDER (bordure)       │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │   PADDING (intérieur)   │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │     CONTENT       │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘
Quentin Fait
Cours HTML/CSS 2026

Les 4 zones du Box Model

Zone Rôle Propriété CSS
Content Contenu de l'élément width, height
Padding Espace intérieur padding
Border Bordure de l'élément border
Margin Espace extérieur margin
Quentin Fait
Cours HTML/CSS 2026
div {
    width: 200px;       /* Content */
    padding: 20px;      /* Espace intérieur */
    border: 5px solid black;  /* Bordure */
    margin: 10px;       /* Espace extérieur */
}

Largeur totale (par défaut) = width + padding×2 + border×2 = 250px

Quentin Fait
Cours HTML/CSS 2026

Content — Contenu

div {
    width: 300px;
    height: 200px;
    min-width: 200px;   /* Largeur minimale */
    max-width: 500px;   /* Largeur maximale */
}

Comportement par défaut :

  • Bloc (<div>, <p>, <h1>) : largeur 100% du parent
  • Inline (<span>, <a>, <strong>) : largeur = contenu

Bon à savoir : min-width et max-width sont essentiels pour le responsive

Quentin Fait
Cours HTML/CSS 2026

Padding — Espacement intérieur

/* Tous les côtés identiques */
padding: 15px;

/* Vertical | Horizontal */
padding: 10px 20px;

/* Top | Horizontal | Bottom */
padding: 10px 20px 15px;

/* Top | Right | Bottom | Left (sens horaire) */
padding: 10px 20px 10px 20px;

/* Côté par côté */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
Quentin Fait
Cours HTML/CSS 2026

Astuce mnémotechnique (4 valeurs) : "TRouBLe" (Top, Right, Bottom, Left)

Quentin Fait
Cours HTML/CSS 2026

Border — Bordure

/* Syntaxe complète */
border: 2px solid #333;
/*      ↑    ↑     ↑
      width style color */

/* Styles de bordure */
border-style: solid;   /* Ligne continue */
border-style: dashed;  /* Tirets */
border-style: dotted;  /* Pointillés */
border-style: double;  /* Double ligne */

/* Bordures différentes par côté */
border-top: 3px solid red;
border-bottom: 1px dashed blue;

/* Coins arrondis */
border-radius: 10px;
border-radius: 50%; /* Cercle parfait */
Quentin Fait
Cours HTML/CSS 2026

Margin — Espacement extérieur

/* Syntaxe identique au padding */
margin: 20px;
margin: 10px 20px;
margin: 10px 15px 20px 25px;

/* Centrer un élément de bloc */
margin: 0 auto;

/* Marges négatives (avancé) */
margin-top: -10px;  /* Rapproche de l'élément au-dessus */

Valeurs spéciales :

  • auto : centrage horizontal (pour les éléments de bloc avec largeur définie)
  • Valeurs négatives : superposer ou rapprocher les éléments
Quentin Fait
Cours HTML/CSS 2026

Fusion des marges verticales

Comportement spécial : Les marges verticales adjacentes fusionnent

<p style="margin-bottom: 30px;">Paragraphe 1</p>
<p style="margin-top: 20px;">Paragraphe 2</p>

Résultat : Espace entre les deux = 30px (la plus grande), pas 50px

Règle : La plus grande marge l'emporte

Astuce : Les marges horizontales ne fusionnent jamais

Quentin Fait
Cours HTML/CSS 2026

box-sizing — Calcul de la largeur

Problème par défaut : width ne compte pas padding et border

div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* Largeur totale = 200 + 40 + 10 = 250px */
}

Solution : box-sizing: border-box

Quentin Fait
Cours HTML/CSS 2026
* {
    box-sizing: border-box; /* Recommandé globalement */
}

div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* Largeur totale = 200px (padding et border INCLUS) */
}

Toujours utiliser border-box au début de votre CSS

Quentin Fait
Cours HTML/CSS 2026

Visualiser le Box Model

DevTools (F12) → Onglet "Éléments" → Panneau "Styles" en bas

┌─────────────────────┐
│   margin: 10        │
│  ┌───────────────┐  │
│  │ border: 5     │  │
│  │ ┌───────────┐ │  │
│  │ │ padding:  │ │  │
│  │ │    20     │ │  │
│  │ │ ┌───────┐ │ │  │
│  │ │ │ 200×  │ │ │  │
│  │ │ │ 150px │ │ │  │
│  │ │ └───────┘ │ │  │
│  │ └───────────┘ │  │
│  └───────────────┘  │
└─────────────────────┘

Utilisez toujours les DevTools pour déboguer le Box Model

Quentin Fait
Cours HTML/CSS 2026

Fin de la séance 3

Prochaine étape : TP3 - Synthèse HTML

Questions ?

Quentin Fait