Retour au menu

Le CSS de mise en page

ENFIN des styles CSS pour une vraie mise en page digne de ce nom ! (que tout bon développeur Web doit connaître)

Il est toutefois à rappeler que les balises HTML ne doivent pas être utilisées n'importe comment avant d'utiliser du CSS.


Les styles CSS

Le style margin

Vous allez dire adieu aux balises <br/> !

Le style margin permet de mettre des espaces à l'extérieur d'une balise.

Exemple : Prenons une banale liste à puce :

<ul class="test"> <li>Element 1</li> <li id="t1">Element 2</li> <li>Element 3</li> <li>Element 3</li> </ul>
Code CSS Affichage
ul.test{ background-color:green; } ul.test li{ background-color:orange; }
  • Element 1
  • Element 2
  • Element 3
  • Element 3
ul.test{ background-color:green; } ul.test li{ background-color:orange; margin: 20px; }
  • Element 1
  • Element 2
  • Element 3
  • Element 3
ul.test{ background-color:green; } ul.test li{ background-color:orange; margin-top: 10px; }
  • Element 1
  • Element 2
  • Element 3
  • Element 3
ul.test{ background-color:green; } ul.test li#t1{ background-color:orange; margin-top: 5px; margin-bottom: 20px; margin-right: 40px; }
  • Element 1
  • Element 2
  • Element 3
  • Element 3
ul.test{ background-color:green; } ul.test li#t1{ background-color:orange; margin: 5px 40px 20px 0; }
  • Element 1
  • Element 2
  • Element 3
  • Element 3

Ainsi, plus besoin d'utiliser de balise br ! Il suffit d'utiliser margin-bottom: 20px;

De même pour la balise center ! Il suffit d'utiliser margin: auto; (uniquement avec un display: block; : voir plus bas).



Le style padding

Le style padding permet de mettre des espaces à l'intérieur d'une balise.

Exemple : Prenons une banale liste à puce :

<ul class="test"> <li>Element 1</li> <li id="t1">Element 2</li> <li>Element 3</li> <li>Element 3</li> </ul>
Code CSS Affichage
ul.test{ background-color:cornflowerblue; } ul.test li{ background-color:pink; }
  • Element 1
  • Element 2
  • Element 3
  • Element 3
ul.test{ background-color:cornflowerblue; } ul.test li{ background-color:pink; margin-top: 2px; padding: 20px; }
  • Element 1
  • Element 2
  • Element 3
  • Element 3
ul.test{ background-color:cornflowerblue; } ul.test{ background-color:pink; padding-top: 20px; }
  • Element 1
  • Element 2
  • Element 3
  • Element 3
ul.test{ background-color:cornflowerblue; } ul.test{ background-color:pink; padding-top: 5px; padding-bottom: 20px; padding-right: 40px; }
  • Element 1
  • Element 2
  • Element 3
  • Element 3
ul.test{ background-color:cornflowerblue; } ul.test{ background-color:pink; padding: 5px 40px 20px 40px; }
  • Element 1
  • Element 2
  • Element 3
  • Element 3


Résumé illustré des styles margin et padding :



Le style float

Le style float permet de "retirer" une balise du flux normal et de la placer à gauche ou à droite de son conteneur (la balise qui contient cette balise).

Exemple : Prenons l'exemple d'une image et d'un paragraphe dans une balise div.

<div> <img src="..."/> <p>Le style <i>float</i> permet de "retirer" une balise du flux normal et de la placer à gauche ou à droite de son conteneur (la balise qui contient cette balise).</p> </div>
Code CSS Affichage
div img{ float: none; /* Par défaut */ }

Le style float permet de "retirer" une balise du flux normal et de la placer à gauche ou à droite de son conteneur (la balise qui contient cette balise).
div img{ float: left; }

Le style float permet de "retirer" une balise du flux normal et de la placer à gauche ou à droite de son conteneur (la balise qui contient cette balise).
div img{ float: right; }

Le style float permet de "retirer" une balise du flux normal et de la placer à gauche ou à droite de son conteneur (la balise qui contient cette balise).


Le style display

Vous aviez observé que certaines balises (p, h1, h2, ...) font automatiquement des retours à la ligne, tandis que d'autres non (a, img, b, ...).

Le style display est à l'origine de ces différences et il est parfois indispensable de modifier cet état pour modifier l'emplacement d'un élément HTML.

Observations : Observons les affichages suivants :

Code HTML Code CSS Affichage
<h1>Titre</h1> <p>Paragraphe</p> <b>Texte</b> <p>Paragraphe</p> <b>Texte</b> <a href="...">Lien</a> h1{ background-color: red; } p{ background-color: blue; } b{ background-color: green; } a{ background-color: yellow; }

Titre

Paragraphe

Texte

Paragraphe

Texte Lien

Ces valeurs par défaut peuvent être changées. Exemples :

Code CSS Affichage
h1{ background-color: red; display: inline; } p{ background-color: blue; display: inline; } b{ background-color: green; display: block; } a{ background-color: yellow; display: block; }

Titre

Paragraphe

Texte

Paragraphe

Texte Lien

Attention : Il faut un but à ce changement de display. Il faut d'abord voir si une autre balise peut être utilisée à la place.

Bonus : Il existe de nombreuses options pour ce style. Presque pour chaque type de balise. "block" et "inline" sont les plus utilisés, les autres sont trop spécifiques pour vous être vraiment utiles.



Le style text-align

Voici justement un style où l'utilisation de display peut être utile !

Et vous allez dire adieu aux balises <center> !! (cette balise est du "vieux" HTML)

Ce style sert principalement à l'alignement du texte (gauche, droite, centrer et justifier), mais peut également être utilisé pour des balises.

Exemples : Commençons avec du texte simple :

Code CSS Affichage
p{ text-align: start; /* Par défaut */ }

Ce style sert principalement à l'alignement du texte (gauche, droite, centrer et justifier), mais peut également être utilisé pour des balises.
p{ text-align: end; }

Ce style sert principalement à l'alignement du texte (gauche, droite, centrer et justifier), mais peut également être utilisé pour des balises.
p{ text-align: center; }

Ce style sert principalement à l'alignement du texte (gauche, droite, centrer et justifier), mais peut également être utilisé pour des balises.
p{ text-align: justify; }

Ce style sert principalement à l'alignement du texte (gauche, droite, centrer et justifier), mais peut également être utilisé pour des balises.

Attention : Ce n'est possible que pour les balises avec un display "block".

Exemple : Voici comment utiliser display pour aligner un élément :

Code HTML Code CSS Affichage
<b>La balise b.</b> b{ text-align: end; background-color: pink; } La balise b.
<b>La balise b.</b> b{ display: block; text-align: end; background-color: pink; } La balise b.


Le style position

Lorsque l'on programme quelque chose, la documentation est très importante (même les experts d'un langage ont besoin d'en lire !).

C'est pourquoi je vous laisse lire et observer la documentation sur le style position : lien.



Si d'autres styles CSS vous intéressent, vous avez le droit d'en chercher d'autres ! (à partir de maintenant vous avez le droit)

Vous trouverez toutes les documentations nécessaires sur le site developer.mozilla.org.