Accueil › Cours › Mise en forme : CSS

Les leçons de ce chapitre

1. Sélecteurs, couleurs et texte
2. La boîte : marges et bordures
3. Classes, identifiants et fichier CSS

Leçon 12.1 : Sélecteurs, couleurs et texte

8 min

Le CSS (Cascading Style Sheets) décrit l'apparence d'une page : couleurs, tailles, polices. Le HTML dit ce qu'il y a dans la page, le CSS dit comment ça s'affiche.

Une règle CSS

Une règle a un sélecteur (qui est concerné), puis entre accolades des déclarations propriété: valeur;.

h1 {
  color: darkblue;
  text-align: center;
}

• color : la couleur du texte. background-color : la couleur de fond.
• font-size : la taille du texte (18px). font-family : la police.
• text-align : l'alignement (left, center, right).

Attention : Chaque déclaration se termine par un point-virgule ; et la valeur est séparée de la propriété par :. Oublier un ; casse la déclaration suivante.

Astuce : Les couleurs s'écrivent par leur nom (red, teal), en hexadécimal (#ff0000) ou avec rgb(255, 0, 0).

Exemple

Le CSS est dans la balise <style>. Change la couleur du titre et la taille du paragraphe.

<style>
  h1 { color: darkblue; text-align: center; }
  p { font-size: 18px; color: #444444; }
</style>
<h1>Carthage</h1>
<p>Une ville fondée il y a plus de 2800 ans.</p>
<p>Elle se trouve au bord de la mer.</p>

Leçon 12.2 : La boîte : marges et bordures

8 min

Chaque élément HTML est dans une boîte. De l'intérieur vers l'extérieur on trouve : le contenu, le padding (marge intérieure), la bordure (border), puis la marge (margin, marge extérieure).

• padding: 12px; : de l'espace à l'intérieur de la bordure.
• margin: 16px; : de l'espace autour de la boîte, entre elle et les autres.
• border: 2px solid teal; : épaisseur, style (solid, dashed) et couleur.
• width et height : la largeur et la hauteur du contenu.

Astuce : Retiens l'ordre en partant du centre : contenu → padding → border → margin.

div {
  border: 2px solid teal;
  padding: 12px;
  margin: 16px;
}

Exemple

Augmente le padding puis la margin pour voir la différence.

<style>
  div { border: 2px solid teal; padding: 12px; margin: 16px; width: 240px; }
</style>
<div>
  <h3>Bizerte</h3>
  <p>Le port et la corniche.</p>
</div>
<div>
  <h3>Sousse</h3>
  <p>La médina et la plage.</p>
</div>

Leçon 12.3 : Classes, identifiants et fichier CSS

9 min

Un sélecteur comme p vise tous les paragraphes. Pour viser seulement certains éléments, on leur donne un nom avec un attribut HTML :

• Classe : class="important" dans le HTML ; .important { … } dans le CSS (avec un point). Plusieurs éléments peuvent avoir la même classe.
• Identifiant : id="entete" dans le HTML ; #entete { … } dans le CSS (avec un dièse). Un identifiant est unique dans la page.

Un fichier CSS à part

Pour un site de plusieurs pages, on met le CSS dans un fichier style.css et on le relie dans le <head> de chaque page avec la balise <link> :

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

Astuce : Ainsi, changer une couleur dans style.css change toutes les pages du site d'un coup.

Exemple

Seuls les éléments de la classe important sont en rouge. Ajoute cette classe à un autre paragraphe.

<style>
  .important { color: red; font-weight: bold; }
  #entete { background-color: lightyellow; padding: 8px; }
</style>
<h1 id="entete">Mission Carthage</h1>
<p class="important">Ce paragraphe est important.</p>
<p>Celui-ci est normal.</p>
<p class="important">Celui-là aussi est important.</p>

S'entraîner gratuitement

Chaque leçon a 3 exercices gratuits avec indices pour appliquer ce chapitre avec Hannibot.

Fin du programme de 2ème TI : tu as vu tout ce qui est demandé aux devoirs.

← Chapitre précédent : Pages web : HTML

Tous les chapitres · Voir les devoirs corrigés de 2ème TI

Cours écrit pour Mission Carthage d'après le programme officiel. Ton professeur reste la référence.