CSS

Contenu

CSS#

Le langage CSS (Cascading Style Sheet en français feuilles de style en cascade) permet de mettre en forme les documents HTML. Il permet notamment de modifier la police, la couleur, la taille et l'emplacement du contenu.

CSS est un langage basé sur des règles: il permet de définir des règles de style pour un type d'élément donné, par exemple les titres principaux <h1></h1> ou les paragraphes <p></p>.

Référencement#

Il existe deux façons d'associer du CSS à un document HTML.

Fichier CSS séparé#

Le CSS peut être écrit dans un fichier séparé (par exemple style.css). Pour lier ce fichier à une page HTML, il faut ajouter une balise <link> dans le <head> du document HTML. Cette balise a deux attributs importants:

rel indique la relation (ici une feuille de style)
href indique le chemin vers le fichier CSS

<head>
  <link href="style.css" rel="stylesheet" type="text/css"/>
</head>

Cette méthode est recommandée car elle permet de séparer le contenu (HTML) de la présentation (CSS) et de réutiliser le même fichier CSS sur plusieurs pages.

Balise `<style>`#

Le CSS peut aussi être écrit directement dans le <head> du document HTML, à l'intérieur de la balise <style>:

<head>
  <style>
    h1 {
      color: green;
    }
  </style>
</head>

Cette méthode est pratique pour de petits projets ou pour tester rapidement. C'est celle utilisée dans les exercices ci-dessous.

Structure du code CSS#

La règle commence par un sélecteur qui indique à quelles balises cette règle doit s'appliquer. Ensuite, la liste des propriétés ainsi que leurs valeurs sont indiquées entre accolades. Chaque déclaration se termine par un point-virgule.

sélecteur {
  propriété1: valeur1;
  propriété2: valeur2;
}

Exemples:

h1 {                      /* Cette règle définit le style du titre principal. */
  color: green;           /* La couleur du texte est verte. */
  text-align: center;     /* L'alignement du texte est centré. */
}

p {                       /* Cette règle définit le style des paragraphes. */
  font-family: verdana;   /* La police utilisée est verdana. */
  font-size: 20px;        /* La taille de la police est 20 pixels. */
}

Propriétés CSS#

Propriété	Description	Exemple de valeur
`color`	Couleur du texte	`red`, `rgb(255, 0, 0)`
`background-color`	Couleur de fond de l'élément	`yellow`, `lightblue`, `antiquewhite`
`font-family`	Police de caractères	`Arial`, `verdana`, `fantasy`
`font-size`	Taille de la police	`20px`, `1.5em`, `120%`
`font-weight`	Graisse du texte (épaisseur)	`bold`, `normal`, `600`
`font-style`	Style de la police	`italic`, `normal`
`text-align`	Alignement horizontal du texte	`left`, `center`, `right`, `justify`
`text-decoration`	Décoration du texte	`underline`, `none`, `line-through`
`text-transform`	Transformation de la casse	`uppercase`, `lowercase`, `capitalize`
`line-height`	Hauteur de ligne (interligne)	`1.5`, `24px`
`letter-spacing`	Espacement entre les lettres	`2px`, `0.1em`
`border`	Bordure (épaisseur style couleur)	`2px solid black`, `1px dashed red`
`border-radius`	Arrondi des coins	`10px`, `50%`
`border-collapse`	Fusion des bordures de tableau	`collapse`, `separate`
`margin`	Marge extérieure (autour de l'élément)	`10px`, `0 auto`
`padding`	Marge intérieure (entre contenu et bordure)	`5px`, `10px 20px`
`width`	Largeur de l'élément	`300px`, `100%`, `50%`
`height`	Hauteur de l'élément	`200px`, `auto`
`list-style`	Style des puces de liste	`none`, `disc`, `square`
`cursor`	Forme du curseur au survol	`pointer`, `default`, `crosshair`

Les couleurs peuvent être indiquées de deux façons:

Par leur nom en anglais: red, green, blue, black, white, cornsilk...
En code RGB: rgb(255, 0, 0) pour le rouge pur

Sélecteurs#

Dans ce cours, nous allons travailler sur 2 types de sélecteurs:

Sélecteur de type
Sélecteur de classe

Sélecteur de type#

Le sélecteur de type permet d'appliquer un style à toutes les balises de même type (h1, h2, p, ...).

h1 {                      /* Cette règle définit le style du titre principal. */
  color: green;           /* La couleur du texte est verte. */
  text-align: center;     /* L'alignement du texte est centré. */
}

Ce style s'appliquera au contenu de toutes les balises <h1>...</h1>.

Sélecteur de classe#

Le sélecteur de classe permet d'appliquer un style à plusieurs éléments qui appartiennent à une même classe (groupe). Pour cela, il faut ajouter un attribut class à la balise HTML concernée.

Fichier HTML	Fichier CSS
<p class="centre"> Le texte de ce paragraphe sera centré. </p> <p> Ce paragraphe ne sera pas centré. </p>	.centre { text-align: center; }

Ce style ne s'appliquera qu'aux balises dont la classe est "centre".

Un élément peut aussi appartenir à plusieurs classes en les séparant par un espace:

<p class="centre rouge">Ce texte est centré et rouge.</p>

Conteneurs `<div>`#

La balise <div> est un élément bloc qui permet de regrouper plusieurs éléments HTML. Seul, un <div> n'a aucun effet visuel : c'est le CSS qui lui donne une apparence.

L'intérêt du <div> apparaît lorsqu'on le combine avec un sélecteur de classe: on peut ainsi styliser indépendamment différentes zones d'une même pageet regrouper des balises entre elles.

Fichier HTML

Fichier CSS

<div class="alerte">
  <h2>Attention</h2>
  <p>Le site sera en maintenance
  ce soir de 22h à 23h.</p>
</div>

<div class="info">
  <h2>Information</h2>
  <p>Les inscriptions sont ouvertes.</p>
</div>

.alerte {
  background-color: pink;
  border: 4px solid red;
  padding: 10px;
  margin: 10px 0;
}
.info {
  background-color: lightblue;
  border: 4px solid blue;
  padding: 10px;
  margin: 10px 0;
}

Les deux <div> ont une structure HTML identique, mais chacun reçoit un style différent grâce à sa classe.

Voici le résultat produit par le HTML et le CSS ci-dessus :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .alerte {
        background-color: pink;
        border: 4px solid red;
        padding: 10px;
        margin: 10px 0;
      }
      .info {
        background-color: lightblue;
        border: 4px solid blue;
        padding: 10px;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="alerte">
      <h2>Attention</h2>
      <p>Le site sera en maintenance ce soir de 22h à 23h.</p>
    </div>
    <div class="info">
      <h2>Information</h2>
      <p>Les inscriptions sont ouvertes.</p>
    </div>
  </body>
</html>

Exercices#

Exercice 11#

Notez la propriété CSS qui permet de:

... changer la couleur du texte?
... changer la couleur de fond?
... changer la taille de la police?
... aligner le texte?
... changer la police de caractères?
... ajouter une bordure?
... mettre le texte en gras?
... ajouter une marge intérieure?
... arrondir les coins d'un élément?
... souligner du texte?

Exercice 12#

Dans la page ci-dessous, aucune des règles CSS ne produit l'effet attendu : le fond de la page devrait être jaune, le titre bleu et centré, les sous-titres orange et les paragraphes en taille 18px. Chaque règle contient une erreur. Exécutez le code pour voir le problème, puis corrigez les quatre erreurs.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      body {
        background-color: jaune;
      }
      h1 {
        color: blue
        text-align: center;
      }
      h2 {
        font-color: darkorange;
      }
      p {
        font-size: 18;
      }
    </style>
  </head>
  <body>
    <h1>Le monde des océans</h1>
    <h2>Les profondeurs</h2>
    <p>Les océans couvrent plus de 70% de la surface de la Terre.</p>
    <p>Le point le plus profond est la fosse des Mariannes.</p>
  </body>
</html>

Solution

Les quatre erreurs, dans l'ordre :

jaune n'est pas un nom de couleur valide : en CSS, les noms de couleurs s'écrivent en anglais. Il faut donc écrire yellow.
Il manque un point-virgule après color: blue. Du coup, le navigateur lit color: blue text-align: center comme une seule valeur invalide et ignore les deux propriétés.
La propriété font-color n'existe pas en CSS : pour changer la couleur du texte, la propriété s'appelle simplement color. Il faut donc écrire color: darkorange;.
La taille 18 doit avoir une unité : 18px. Un nombre sans unité n'est pas accepté pour font-size.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      body {
        background-color: yellow;
      }
      h1 {
        color: blue;
        text-align: center;
      }
      h2 {
        color: darkorange;
      }
      p {
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <h1>Le monde des océans</h1>
    <h2>Les profondeurs</h2>
    <p>Les océans couvrent plus de 70% de la surface de la Terre.</p>
    <p>Le point le plus profond est la fosse des Mariannes.</p>
  </body>
</html>

Exercice 13#

Complétez les règles CSS pour:

Mettre le <h1> en darkblue et centré
Mettre les <h2> en green
Mettre les <p> en police Georgia et taille 16px

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      h1 {
      }
      h2 {
      }
      p {
      }
    </style>
  </head>
  <body>
    <h1>Les planètes du système solaire</h1>
    <h2>Les planètes telluriques</h2>
    <p>Mercure, Vénus, la Terre et Mars sont des planètes rocheuses.</p>
    <h2>Les géantes gazeuses</h2>
    <p>Jupiter, Saturne, Uranus et Neptune sont composées principalement de gaz.</p>
  </body>
</html>

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      h1 {
        color: darkblue;
        text-align: center;
      }
      h2 {
        color: green;
      }
      p {
        font-family: Georgia;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h1>Les planètes du système solaire</h1>
    <h2>Les planètes telluriques</h2>
    <p>Mercure, Vénus, la Terre et Mars sont des planètes rocheuses.</p>
    <h2>Les géantes gazeuses</h2>
    <p>Jupiter, Saturne, Uranus et Neptune sont composées principalement de gaz.</p>
  </body>
</html>

Exercice 14#

Le contenu d'une page a été défini en HTML de la manière suivante.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Labrador</title>
</head>
<body>
    <h1>Le Labrador</h1>

    <h2>Origine et caractéristiques</h2>

    <p>Le Labrador est une race de chien originaire du Canada, plus précisément
    de Terre-Neuve. Il est connu pour son tempérament amical, son intelligence
    et sa grande capacité d'adaptation.</p>

    <h3>Caractéristiques</h3>
    <table>
      <tr>
        <th>Taille</th><th>Poids</th><th>Espérance de vie</th><th>Couleurs</th>
      </tr>
      <tr>
        <td>54 à 57 cm</td><td>25 à 36 kg</td><td>10 à 14 ans</td>
        <td>Noir, jaune, chocolat</td>
      </tr>
    </table>

    <h2>Comportement et utilisation</h2>
    <p>Très sociable, le Labrador est souvent utilisé comme chien guide pour les
    personnes malvoyantes, mais aussi comme chien de sauvetage et compagnon
    familial.</p>

    <h2>Photo</h2>
    <img src="https://thumb.wikimedia.org/wikipedia/commons/thumb/1/1d/Golden_retriever_stehfoto.jpg/1280px-Golden_retriever_stehfoto.jpg?utm_source=fr.wikipedia.org&utm_campaign=imageinfo&utm_content=thumbnail">

    <p>Source: texte généré par Copilot.</p>
</body>
</html>

Au moyen du CSS, modifiez les éléments suivants:

Le titre principal doit être en bleu et centré.
Les sous-titres de niveau 2 doivent être en couleur (choix de couleurs).
La table doit avoir une bordure (propriétés: border et border-collapse).
La table doit prendre 100% de la largeur de la page.
L'image doit avoir une largeur de 300px.
La propriété font-family des paragraphes doit être "consolas".
La couleur de fond background-color de la page doit être cornsilk.

<style>
  /* Écrivez le CSS ici */
</style>

Solution

<style>
  h1 {
    color: blue;
    text-align: center;
  }
  h2 {
    color: darkorange;
  }
  table {
    border: 2px solid black;
    border-collapse: collapse;
    width: 100%;
  }
  img {
    width: 300px;
  }
  p {
    font-family: "consolas";
  }
  body {
    background-color: cornsilk;
  }
</style>

Exercice 15#

Lisez le code ci-dessous sans l'exécuter et prédisez le résultat. Rappelez-vous qu'un sélecteur de classe l'emporte sur un sélecteur de type lorsque les deux s'appliquent au même élément.

<style>
  p  { color: blue; }
  h2 { text-align: center; }
  .vedette { color: red; }
</style>

<h2>Bienvenue</h2>
<p>Premier paragraphe.</p>
<p class="vedette">Deuxième paragraphe.</p>
<p class="autre">Troisième paragraphe.</p>

De quelle couleur s'affiche le premier paragraphe ?
De quelle couleur s'affiche le deuxième paragraphe (classe vedette) ?
De quelle couleur s'affiche le troisième paragraphe (classe autre) ?
Le titre « Bienvenue » est-il centré ?
Le troisième paragraphe est-il centré ?

Solution

Bleu (blue). La règle p { color: blue; } s'applique à tous les paragraphes.
Rouge (red). Deux règles concernent ce paragraphe : p (bleu) et .vedette (rouge). Quand un sélecteur de type et un sélecteur de classe s'appliquent au même élément, c'est la classe qui l'emporte. Le paragraphe est donc rouge.
Bleu (blue). La classe autre n'a aucune règle définie, elle ne change donc rien. Le paragraphe reste bleu grâce à la règle p.
Oui (yes). La règle h2 { text-align: center; } centre le titre.
Non (no). Le centrage n'a été défini que pour les h2, pas pour les p.

Exercice 16#

Complétez le CSS pour:

Donner à <body> une couleur de fond lightyellow
Définir la classe encadre: bordure 2px solid steelblue, padding de 8px, couleur de fond aliceblue

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      body {
      }
      .encadre {
      }
    </style>
  </head>
  <body>
    <h1>Mes matières préférées</h1>
    <p>J'aime beaucoup les mathématiques.</p>
    <p class="encadre">L'informatique est ma matière favorite.</p>
    <p>Le français est important pour communiquer.</p>
    <p class="encadre">La physique explique comment fonctionne le monde.</p>
  </body>
</html>

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      body {
        background-color: lightyellow;
      }
      .encadre {
        border: 2px solid steelblue;
        padding: 8px;
        background-color: aliceblue;
      }
    </style>
  </head>
  <body>
    <h1>Mes matières préférées</h1>
    <p>J'aime beaucoup les mathématiques.</p>
    <p class="encadre">L'informatique est ma matière favorite.</p>
    <p>Le français est important pour communiquer.</p>
    <p class="encadre">La physique explique comment fonctionne le monde.</p>
  </body>
</html>

Exercice 17#

Le contenu d'une page a été défini en HTML de la manière suivante.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>L'escalade sportive</title>
</head>
<body>
    <h1>L'escalade sportive</h1>

    <h2>Présentation</h2>
    <p>L'escalade sportive consiste à gravir des parois rocheuses naturelles ou
    des murs artificiels. Elle est devenue discipline olympique en 2021 lors
    des Jeux de Tokyo.</p>

    <h2>Les trois disciplines</h2>
    <p class="discipline">La difficulté: grimper le plus haut possible sur une
    voie longue sans limite de temps.</p>
    <p>Le bloc: résoudre de courtes séquences de mouvements sur des structures
    de 4 à 5 mètres, sans corde.</p>
    <p class="discipline">La vitesse: deux grimpeurs s'affrontent sur une voie
    standardisée de 15 mètres. Le record du monde est inférieur à 5 secondes.</p>

    <h2>Matériel essentiel</h2>
    <p>Chaussons de grimpe, baudrier, corde, dégaines et magnésie constituent
    l'équipement de base pour pratiquer l'escalade en sécurité.</p>
    <p class="source">Source: Fédération française de la montagne et de l'escalade, 2024.</p>
</body>
</html>

La page contient deux classes CSS à définir:

discipline: pour mettre en avant les disciplines olympiques
source: pour la référence en bas de page

Au moyen du CSS:

Le <h1> doit être centré et en couleur rgb(44, 62, 80).
Les <h2> doivent être en couleur rgb(230, 126, 34).
La classe discipline doit avoir: fond aliceblue, bordure gauche 4px solid steelblue (border-left) et un padding de 8px.
La classe source doit être en italique, couleur gray et taille 12px.
La couleur de fond de la page doit être whitesmoke.

<style>
  /* Écrivez le CSS ici */
</style>

Solution

<style>
  h1 {
    text-align: center;
    color: rgb(44, 62, 80);
  }
  h2 {
    color: rgb(230, 126, 34);
  }
  .discipline {
    background-color: aliceblue;
    border-left: 4px solid steelblue;
    padding: 8px;
  }
  .source {
    font-style: italic;
    color: gray;
    font-size: 12px;
  }
  body {
    background-color: whitesmoke;
  }
</style>

Exercice 18#

Dans la page ci-dessous :

Le <h1> doit être centré et de couleur teal.
Créez une classe en CSS surligne qui met le fond en yellow et le texte en gras. Ajoutez cette classe dans le HTML aux deux phrases importantes : "Rendez vos devoirs avant vendredi." et "L'examen aura lieu le 20 juin."

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      /* Écrivez le CSS ici */
    </style>
  </head>
  <body>
    <h1>Informations de la classe</h1>
    <p>Bienvenue sur la page de la classe.</p>
    <p>Rendez vos devoirs avant vendredi.</p>
    <p>Pensez à consulter le site régulièrement.</p>
    <p>L'examen aura lieu le 20 juin.</p>
  </body>
</html>

Solution

Il faut ajouter class="surligne" sur les deux paragraphes concernés (dans le HTML) et écrire les règles CSS correspondantes.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      h1 {
        text-align: center;
        color: teal;
      }
      .surligne {
        background-color: yellow;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>Informations de la classe</h1>
    <p>Bienvenue sur la page de la classe.</p>
    <p class="surligne">Rendez vos devoirs avant vendredi.</p>
    <p>Pensez à consulter le site régulièrement.</p>
    <p class="surligne">L'examen aura lieu le 20 juin.</p>
  </body>
</html>

CSS

Contenu

CSS#

Référencement#

Fichier CSS séparé#

Balise <style>#

Structure du code CSS#

Propriétés CSS#

Sélecteurs#

Sélecteur de type#

Sélecteur de classe#

Conteneurs <div>#

Exercices#

Exercice 11#

Exercice 12#

Exercice 13#

Exercice 14#

Exercice 15#

Exercice 16#

Exercice 17#

Exercice 18#

Balise `<style>`#

Conteneurs `<div>`#