RM

RM Partie 5 : Introduction au CSS

Partie 5 — Introduction au CSS

1) Objectifs pédagogiques

2) Rappel : rôles HTML vs CSS

3) Trois manières d’ajouter du style

3.1 Inline (attribut style="…") — à éviter sauf test

<h1 style="color: darkblue; text-align: center;">Titre</h1>

Avantages : rapide pour tester. Inconvénients : specificity très élevée, pollue le HTML, difficile à maintenir, impossible à réutiliser proprement. À réserver aux tests ponctuels et démonstrations.

3.2 Interne (balise <style> dans <head>)

<head>
  <style>
    h1 { color: darkblue; text-align: center; }
  </style>
</head>

Avantages : centralise (un peu) le style, simple pour un fichier unique. Inconvénients : ne sépare pas vraiment contenu/style à l’échelle d’un site, pas de mise en cache partagée entre pages.

3.3 Externe (fichier .css) — bonne pratique

<!-- dans <head> -->
<link rel="stylesheet" href="assets/css/style.css">
/* assets/css/style.css */
h1 { color: darkblue; text-align: center; }

Avantages : séparation claire, réutilisable sur tout le site, mise en cache par le navigateur. Inconvénients : nécessite une arborescence de projet (ce qui est très bien !).

Conclusion : privilégie la feuille de style externe.

4) Sélecteurs de base

4.1 Par balise (type selector)

Cible tous les éléments du même type.

p { line-height: 1.6; }
h1 { margin-bottom: 0.5rem; }

4.2 Par classe (.classe)

Classes réutilisables, appliquées à plusieurs éléments.

<p class="intro">Bienvenue…</p>
.intro { font-style: italic; }

4.3 Par id (#identifiant)

Identifiant unique dans la page (un seul élément).

<h1 id="titre-principal">Accueil</h1>
#titre-principal { text-transform: uppercase; }

4.4 Combinaisons utiles (aperçu)

Spécificité (règle simplifiée) : inline > #id > .classe > balise. En cas de conflit, la règle plus spécifique gagne ; à spécificité égale, la dernière déclarée gagne. Évite !important (dernier recours).

5) Propriétés essentielles

5.1 Couleurs : color

p { color: #333; }              /* hexadécimal */
h1 { color: rgb(20, 20, 120); } /* rgb()      */
h2 { color: hsl(230, 60%, 40%);}/* hsl()      */

5.2 Arrière-plan : background

Propriété raccourcie pour gérer couleur, image, position, répétition…

body { background: #f5f7fa; }             /* simple couleur */
header { background: #0b3d91; color: white; }

(Plus tard tu verras background-image, background-size, etc.)

5.3 Police : font-family

Toujours prévoir une pile de secours.

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

5.4 Taille de police : font-size (+ unités)

html { font-size: 100%; }   /* ~16px selon navigateur */
h1 { font-size: 2rem; }     /* ~32px */
p  { font-size: 1rem; }     /* ~16px */
small { font-size: 0.875rem; } /* ~14px */

Pense à line-height (hauteur de ligne) pour la lisibilité :

p { line-height: 1.6; }

5.5 Alignement du texte : text-align

h1 { text-align: center; }
p  { text-align: justify; }  /* à utiliser avec mesure */

5.6 Marges et espacements : margin et padding

p { margin: 1rem 0; }
.section { padding: 1rem 1.5rem; }

Ordre des valeurs : top right bottom left (TRBL). Avec 1, 2 ou 3 valeurs, CSS calcule les manquantes :

5.7 Bordures : border

Raccourci : épaisseur + style + couleur.

.box { border: 1px solid #ddd; }
.box-important { border: 2px dashed #0b3d91; }

Côtés spécifiques :

.box { border-top: 4px solid #333; }

Modèle de boîte (box model) (aperçu) : largeur réelle = width + padding + border (hors margin). Plus tard : box-sizing: border-box; pour simplifier les calculs.

6) Exemple minimal (externe recommandé)

index.html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Demo CSS – Bases</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/css/style.css">
  </head>
  <body>
    <h1 class="titre">Bienvenue</h1>
    <p class="intro">Ceci est un paragraphe d’introduction.</p>
    <p>Un autre paragraphe, pour tester marges et couleurs.</p>
  </body>
</html>

assets/css/style.css

/* Style global */
html { font-size: 100%; }
body {
  margin: 0;
  padding: 0 1rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #222;
  background: #f7f9fc;
}

/* Titres */
.titre {
  text-align: center;
  font-size: 2rem;
  margin: 1.5rem 0 1rem;
  color: #0b3d91;
}

/* Paragraphes */
p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 1rem 0;
}
.intro {
  font-style: italic;      /* mise en italique */
  background: #fffae6;     /* léger surlignage */
  padding: 0.5rem 0.75rem; /* espace interne */
  border-left: 4px solid #f5c518;
}

7) Pièges fréquents

8) Exercice (énoncé)

But : Styliser une page avec :

  1. un fond de couleur pour toute la page ;
  2. un titre centré ;
  3. un paragraphe en italique.

Consignes

  1. Crée index.html avec un <h1> et deux <p>.

  2. Lien vers assets/css/style.css dans le <head>.

  3. Dans style.css :

    • applique une couleur de fond au body ;
    • centre le texte du <h1> et change sa couleur ;
    • rends le premier paragraphe en italique (via une classe .intro par exemple) ;
    • ajoute un peu de marge et de padding pour l’aération.

Arborescence

/index.html
/assets/css/style.css

9) Corrigé possible

index.html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Exercice CSS – Fond, titre, italique</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/css/style.css">
  </head>
  <body>
    <h1>Mon premier style</h1>
    <p class="intro">Ce paragraphe est en italique grâce à une classe CSS.</p>
    <p>Celui-ci reste en style normal.</p>
  </body>
</html>

assets/css/style.css

/* Style global de la page */
html { font-size: 100%; }
body {
  margin: 0;
  padding: 1rem;
  background: #eef4ff; /* fond de couleur */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #222;
}

/* Titre centré et coloré */
h1 {
  text-align: center;
  color: #204ecf;
  margin: 1rem 0 1.5rem;
}

/* Paragraphe en italique via une classe */
.intro {
  font-style: italic;
  background: #ffffff;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #204ecf;
  margin-bottom: 1rem;
}

/* Paragraphes généraux */
p {
  line-height: 1.6;
  margin: 0.75rem 0;
}

10) Mini-quiz

  1. Quelle est la différence fondamentale entre HTML et CSS ?
  2. Cite les trois manières d’appliquer du CSS et la meilleure pour un site.
  3. Quand utiliser une classe plutôt qu’un id ?
  4. Donne la règle de base de la spécificité (du plus fort au plus faible).
  5. Quelle est la différence entre margin et padding ?
  6. Pourquoi rem est-il souvent préféré à px pour la taille des polices ?
  7. Écris une règle CSS pour : texte du body en #333, police sans-serif, fond #f9fbfe.

Corrigé bref

  1. HTML structure le contenu ; CSS définit la présentation.
  2. Inline, interne (<style>), externe (.css) ; externe est la meilleure pratique.
  3. Classe pour des styles réutilisables ; id pour une cible unique.
  4. inline > #id > .classe > balise (à ordre égal, la dernière l’emporte).
  5. margin = extérieur ; padding = intérieur.
  6. rem respecte la taille de base, facilite l’accessibilité et l’échelle typographique.
body {
  color: #333;
  background: #f9fbfe;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

11) Fiche-mémo