Introduction au CSS

Le CSS est un langage qui permet de modifier l’esthétique du HTML, c’est lui qui rend les sites “jolis”. Du CSS s’écrit dans un fichier .css, il est ensuite relié au HTML via une balise <link> (dans la balise <head>) qui va charger son contenu :

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>My site</title>
</head>

Dans cet exemple, la balise link charge le fichier style.css.

créer un fichier HTML avec ce contenu :

<!doctype html>  
<html lang="fr">  
 <head>  
   <meta charset="UTF-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <link rel="stylesheet" href="style.css" />  
   <title>CSS</title>  
 </head>  
 <body>  
   <h1>Hello world!</h1>  
 </body>  
</html>

Puis, dans le même dossier, créer le fichier style.css avec ce contenu :

h1 {
  color: blue;
}

Vous devriez voir Hello world! écrit en bleu.

Que signifie le code dans style.css :

  • h1 { ... } : sélectionne toutes les balises <h1> des fichiers dans lesquels je suis chargée et applique les modifications listées entres les { ... }
  • color: blue; : met la couleur en bleu.

Les modificateurs

Il existe pleins de modificateurs, les plus courants sont :

  • couleur du texte : color: #ffff;
  • changer la couleur du fond : background-color: rgb(170, 129, 206);
  • définir la largeur : width: 100%;
    • cette largeur peut aussi être définie en pixels (18px)
  • définir la hauteur : height: 100px;
    • mais peut aussi être exprimé en :
      • vh : avec 100vh qui correspond à la taille de l’écran
      • % : 50%, ne fonctionne que si la balise parente à une hauteur définie
  • ajouter une bordure : border: 2px solid red;
    • 2px correspond à son épaisseur
    • solid pour que la bordure soit visible
    • red : sa couleur (on peut aussi l’écrire en rgb(...))
  • arrondir les bords d’une bordure : border-radius: 10px;
    • 10px : plus la valeur est grande, plus les bords seront arrondis
  • taille du texte : font-size: 32px;
    • par défaut, le texte est en 16px Bien évidemment, il en existe pleins d’autres.

margin et padding

Prenons une balise <h1>title</h1> avec une bordure :

  • si on lui ajoute du padding : on augmente l’espace entre son contenu et la bordure
  • si on lui ajoute du margin : on augmente l’espace entre la bordure et toute autre balise voisine

Le padding fait grossir une balise, le margin l’éloigne des balises voisines.

pour mettre du padding : padding: 10px; : 10px de chaque côté padding: 1px 2px 3px 4px; : 1px en haut, 2px à droite, 3px en bas et 4px à gauche padding-top: 10px; : 10px que en haut padding-bottom: 10px; : 10px que en bas padding-right: 10px; : 10px que à droite padding-left: 10px; : 10px que à gauche

pour mettre du margin, c’est exactement la même chose, il suffit de changer le mot clé padding en margin.

Exercice 1 - Le sommeil

Recopier ce code HTML:

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Sommeil</title>
  </head>
  <body>
    <h1>Le sommeil</h1>
    <p>
      Bien dormir, c’est garder des horaires réguliers, limiter les écrans avant
      de se coucher et dormir dans un environnement calme et sombre pour
      faciliter l’endormissement.
    </p>
    <section>
      <h2>Bienfaits du sommeil :</h2>
      <ul>
        <li>Meilleure mémoire</li>
        <li>Récupération physique</li>
        <li>Système immunitaire renforcé</li>
        <li>Moins de stress</li>
      </ul>
    </section>
  </body>
</html>

Puis reproduisez cette page : Pasted image 20260504155915.png

Les sélecteurs

Pour l’instant, vous n’avez vu que le sélecteur NOM_DE_BALISE { ... } mais il en existe d’autres. Pour les apprendre et les maîtriser, réalisez les 11 premiers niveaux sur css diner.

Les afficheurs

Deux afficheurs sont importants à connaître :

  • display: block
  • display: flex

display: block vous le connaissez déjà, beaucoup de balises l’ont par défaut mais display: flex peut être technique, c’est pourquoi vous devriez réaliser les 7 premiers niveaux sur flex-box-froggy.

Exercice 2 - Mon app

Code HTML à recopier :

<!doctype html>  
<html lang="fr">  
 <head>  
   <meta charset="UTF-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <link rel="stylesheet" href="style.css" />  
   <title>Mon app</title>  
 </head>  
 <body>  
   <header>  
     <div>MonApp</div>  
     <nav>  
       <a href="#">Accueil</a>  
       <a href="#">Profil</a>  
       <a href="#">Déconnexion</a>  
     </nav>  
   </header>  
   <aside>  
     <ul>  
       <li>Tableau de bord</li>  
       <li>Projets</li>  
       <li>Messages</li>  
       <li>Paramètres</li>  
     </ul>  
   </aside>  
   <main>  
     <h1>Bienvenue !</h1>  
     <section>  
       <div>  
         <h3>Projet A</h3>  
         <p>En cours de développement...</p>  
         <button>Voir</button>  
       </div>  
       <div>  
         <h3>Projet B</h3>  
         <p>Terminé hier.</p>  
         <button>Voir</button>  
       </div>  
       <div>  
         <h3>Projet C</h3>  
         <p>En attente de validation.</p>  
         <button>Voir</button>  
       </div>  
     </section>  
   </main>  
   <footer>  
     <p>&copy; 2026 - Créé avec Flex & Grid</p>  
   </footer>  
 </body>  
</html>

Reproduisez cette page : Pasted image 20260504164407.png

Vous avez le droit de modifier le HTML uniquement pour :

  • ajouter des classes
  • ajouter des id Vous n’avez pas le droit d’ajouter ou d’enlever des balises.

Bonus pour s’exercer

Vous pouvez pouvez aller sur des sites d’entreprises et essayer de reproduire leur page d’accueil.