Cours HTML/CSS débutant — Module 3 : Introduction à CSS

Module 3 : Introduction à CSS

CSS permet de styliser vos pages HTML. Voyons comment le lier et les bases de la syntaxe.

Lier CSS à HTML

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

Syntaxe de base

selecteur {
  propriete: valeur;
}

Exemple :

h1 {
  color: navy;
  font-size: 32px;
}

Les sélecteurs courants

p { color: gray; }          /* toutes les balises p */
.important { color: red; }   /* classe .important */
#titre { color: blue; }      /* id #titre */

En HTML :

<p class="important" id="titre">Texte</p>

Couleurs et texte

body {
  font-family: Arial, sans-serif;
  color: #333;
  background-color: #f9f9f9;
}

Exercice pratique

Reprenez la page recette du Module 2 et ajoutez un fichier CSS pour : changer la police, colorer les titres, et donner un fond léger à la page.

Prochain épisode (Module 4) : la mise en page avec le modèle de boîte (box model) et Flexbox.