Cours

HTML & CSS Leçon 4

Premiers pas en CSS

Changer les couleurs, la taille et la police du texte, en ciblant les éléments avec des sélecteurs.

20 min

À la fin de cette leçon, tu sauras

  • Écrire une règle CSS (sélecteur, propriété, valeur)
  • Cibler une balise, une classe ou un identifiant
  • Changer les couleurs, la taille et l'alignement du texte

Le CSS, pour l'apparence

Le HTML dit ce qu'est le contenu, le CSS (Cascading Style Sheets) dit à quoi il ressemble : couleurs, tailles, espacements, mise en page. Dans un vrai site, le CSS est dans un fichier à part (style.css), relié à la page par <link rel="stylesheet" href="style.css">. Pour s'entraîner, on peut aussi l'écrire dans une balise <style>.

Une règle CSS

h1 {
  color: navy;
  font-size: 40px;
}
  • h1 est le sélecteur : il dit quels éléments sont concernés (ici, tous les <h1>) ;
  • entre les accolades, chaque ligne est une déclaration : une propriété, deux-points, une valeur, et un point-virgule à la fin.

Cibler précisément : classes et identifiants

Pour styler seulement certains éléments, on leur donne une classe dans le HTML, puis on la cible en CSS avec un point.

<style>
  .important {
    font-weight: bold;
    color: crimson;
  }
</style>

<p>Un paragraphe normal.</p>
<p class="important">Un paragraphe important.</p>

Une même classe peut servir à plusieurs éléments. Il existe aussi l'identifiant (id="menu", ciblé avec #menu), unique dans la page. Pour le style, préfère les classes : elles sont réutilisables.

Les propriétés du texte

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

p {
  font-size: 18px;
  line-height: 1.6;
  text-align: justify;
}
  • color : la couleur du texte. background-color : la couleur de fond ;
  • font-size : la taille, souvent en pixels (px) ;
  • font-family : la police, avec des polices de secours séparées par des virgules ;
  • text-align : l'alignement (left, center, right, justify).

Écrire une couleur

Trois façons courantes : un nom anglais (red, navy), un code hexadécimal (#2f5bd3) ou rgb(47, 91, 211). Le code hexadécimal est le plus utilisé : les logiciels de dessin et les sélecteurs de couleur le donnent directement.

À toi de jouer

Dans la balise <style>, écris les règles pour que :

  • le <h1> soit de couleur #2f5bd3 ;
  • les paragraphes aient une taille de 18px ;
  • le fond de la page (body) ne soit plus blanc ;
  • le paragraphe qui a la classe important soit en gras (font-weight: bold).
index.html
Résultat
  • Le <h1> est de couleur #2f5bd3
  • Les paragraphes font 18px
  • Le fond de la page n'est plus blanc
  • Le paragraphe .important est en gras
Bloqué ? Voir une solution 
<style>
  body {
    background-color: #f4f6fb;
  }

  h1 {
    color: #2f5bd3;
  }

  p {
    font-size: 18px;
  }

  .important {
    font-weight: bold;
  }
</style>

<h1>Mon club d'aviation</h1>
<p>Nous volons tous les week-ends.</p>
<p class="important">Inscriptions ouvertes jusqu'au 30 juin.</p>

Quiz

1Dans p { color: red; }, qu'est-ce que p ?
2Comment cibler les éléments qui ont class="carte" ?
3Quelle propriété change la couleur de fond ?