Récapitulatif des sélecteurs, propriétés et valeurs de style CSS

Intégration et syntaxe

Utiliser un fichier externe contenant le code CSS est la méthode la plus appropriée pour associer un style CSS à une page HTML. Ce fichier de style pourra ainsi aisément être exploité pour les autres pages du site web.

ConceptDescription et Exemple
Fichier externe (linked) Le code CSS est dans un fichier séparé (ex: style.css), lié dans le <head>.

<link rel="stylesheet" href="style.css">
Interne (embedded) Le CSS est placé dans une balise <style> dans le <head>.

<style>
  body { background-color: lightblue; }
</style>
En ligne (inline) Le style est appliqué directement sur une balise via l'attribut style.

<p style="color: red;">Texte rouge.</p>
Commentaires Les commentaires dans le code CSS commencent par /* et finissent par */.

/* Ceci est un commentaire */
p { color: green; }

Sélecteurs courants

Type de sélecteurExemple et syntaxeDescription
Sélecteur Universel
* { box-sizing: border-box; }
Cible tous les éléments de la page.
Sélecteur de Type (Balise)
p { font-size: 16px; }
Cible toutes les balises d'un certain type.
Sélecteur de Regroupement
h1, h2, h3 { font-family: "Arial"; color: #4c5253; }
Applique des propriétés identiques à tous les sélecteurs énumérés.
Sélecteur de Classe
.highlight { background-color: yellow; }
Cible tous les éléments avec la classe spécifiée.
Sélecteur d'Id
#main-title { color: blue; }
Cible l'élément unique avec l'ID spécifié.
Sélecteur de Pseudo-classe
a:hover { text-decoration: none; }
li:first-child { font-weight: bold; }
Cible un état particulier d'un élément (survol, premier enfant, etc.). Ex: :link, :visited, :active, :hover, :focus, ::first-letter,...
Sélecteur d'Attribut
a[target="_blank"] { color: red; }
Cible les éléments ayant un certain attribut.
Sélecteur Descendant
article p { line-height: 1.5; }
Cible les balises <p> situées n'importe où à l'intérieur d'un <article>.
Sélecteur Descendant Direct
ul > li { list-style-type: none; }
Cible les <li> qui sont des enfants directs d'un <ul>.
Sélecteur Voisins
p ~ span { color: red; }
Les sélecteurs voisins permettent de cibler un ou plusieurs éléments qui suivent directement ou non un autre élément à la condition que ces éléments aient le même parent.
Sélecteur Voisins Direct
p + span { color: red; }
Les sélecteurs voisins directs permettent de cibler un élément qui suit directement un autre.

Unités et valeurs courantes

TypeUnitéDescription
Absoluespx (pixels)Unité de référence fixe, souvent utilisée pour les bordures ou des tailles précises (1pixel = 1/96eme de pouce).
pt / pcValeur exprimée en points/pica sachant que 1 point vaut 1/72 de pouce et 1 pica vaut 12 points.
cm / mmValeur exprimée en centimètres ou millimètres.
small / largeValeur exprimée à l’aide d’un mot-clé qui tient compte des paramètres de l’utilisateur. D’autres mots-clés sont aussi possibles : xx-small, x-small, medium, large, x-large et xx-large.
Relatives%Relatif (en pourcent) à la taille de l'élément parent.
em / remRelatif à la taille de police de l'élément parent / racine. Très pratique pour des mises à l'échelle globales.
smaller / largerValeur exprimée par rapport à la taille de l’élément parent. Ce sera plus petit (smaller) ou plus grand (larger).
vw / vh1% de la largeur (viewport width) ou de la hauteur (viewport height) de la fenêtre.
vmin / vmaxValeur exprimée par rapport à 1% de la plus petite/grande dimension (hauteur ou largeur) du viewport

Le Box Model

Chaque élément HTML peut être vu comme une boîte. Le Box Model CSS est le modèle qui régit la façon dont ces boîtes sont dimensionnées et comment elles interagissent.

Visualisation du Box Model

Margin
Border
Padding
Contenu (width & height)

Propriétés du Box Model

PropriétéDéfinitionExemple de codeRésultat
width, height Définit la largeur et la hauteur de la zone de contenu de l'élément. 
div {
  width: 150px;
  height: 50px;
}
padding Définit l'espace intérieur entre le contenu et la bordure de l'élément. 
div {
  padding: 20px;
  background-color: #e0f7fa;
}
Contenu
border Définit une bordure autour de l'élément. C'est un raccourci pour border-width, border-style, et border-color. 
div {
  border: 2px solid #004a99;
}
margin Définit l'espace extérieur, autour de la bordure de l'élément. Sépare les éléments les uns des autres. 
div {
  margin: 20px;
  background-color: #e0f7fa;
}
box-sizing Change la manière dont la largeur et la hauteur totales d'un élément sont calculées. border-box est la valeur la plus intuitive et recommandée. 
* {
  box-sizing: border-box;
}
Avec border-box, un élément de width: 100px et padding: 10px aura une largeur totale de 100px (padding inclus).

Typographie

PropriétéExemple de codeDescription et Résultat
font-family 
p { 
  font-family: Arial, Helvetica, sans-serif; 
}
 Définit la police du texte. C'est une "pile" : le navigateur essaie la première police, puis la suivante si la première n'est pas disponible.
Police avec serif (Times).
font-size 
p { font-size: 16px; }  /* Absolu */
p { font-size: 1.2rem; } /* Relatif */
p { font-size: 100%; }   /* Relatif */
Définit la taille du texte. Utiliser des unités relatives comme rem est une bonne pratique.
12px, 16px, 20px.
font-weight 
p { font-weight: normal; } /* ou 400 */
p { font-weight: bold; }   /* ou 700 */
 Définit l'épaisseur de la police.
Normal (400), Bold (700).
font-style 
p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }
 Définit le style de la police.
Normal, Italic, Oblique.
color 
p { color: red; }                  /* Nom */
p { color: #ff0000; }               /* Hexa */
p { color: rgb(255, 0, 0); }       /* RGB */
p { color: rgba(255, 0, 0, 0.5); } /* RGBA */
Définit la couleur du texte.
Rouge, #ff0000, rgb, rgba.
text-align 
p { text-align: justify; }
 Aligne le texte horizontalement. Valeurs possibles : left, right, center, justify.
Ce texte est justifié. Les lignes sont étirées pour que chaque ligne ait une largeur égale, créant des marges droites et gauches nettes.
text-decoration 
a { text-decoration: underline; }
 Ajoute une décoration au texte. Valeurs communes : none, underline, overline, line-through.
underline, overline, line-through.
text-transform 
p { text-transform: capitalize; }
 Modifie la casse du texte. Valeurs communes : none, uppercase, lowercase, capitalize.
uppercase, LOWERCASE, capitalize every word.
line-height 
p { line-height: 1.5; } /* Sans unité (recommandé) */
p { line-height: 24px; }
 Définit la hauteur de ligne, c'est-à-dire l'interligne.
Ce paragraphe a un interligne plus grand pour une meilleure lisibilité. Il est de 1.5 fois la taille de la police.

Arrière-Plans (Backgrounds)

PropriétéExemple de codeDescription et Usage
background-color 
div { background-color: #e3f2fd; }
 Définit la couleur de fond d'un élément. Accepte les mêmes formats que la propriété color.
background-image 
body { 
  background-image: url('chemin/vers/image.jpg'); 
}
 Applique une image en arrière-plan. Par défaut, l'image se répète si elle est plus petite que l'élément.
background-repeat 
div { 
  background-repeat: no-repeat;
}
 Contrôle la répétition de l'image de fond. Valeurs : repeat (défaut), no-repeat, repeat-x (horizontal), repeat-y (vertical).
background-size 
div { 
  background-size: cover;
}
 Définit la taille de l'image de fond. Valeurs utiles : auto, cover (couvre toute la zone, quitte à couper l'image), contain (assure que l'image entière est visible).

Mise en Forme des Listes

PropriétéExemple de codeRésultat et Description
list-style-type 
ul { list-style-type: none; }
ul { list-style-type: circle; }
ul { list-style-type: square; }
ol { list-style-type: upper-roman; }
 Modifie le style du marqueur (puce ou numéro).
  • Rien
  • Circle
  • Square
  1. Upper-Roman
list-style-image 
ul { 
  list-style-image: url('puce.png'); 
}
 Remplace le marqueur par une image.
list-style-position 
ul { 
  list-style-position: inside;
}
 Définit si le marqueur est placé à l'intérieur (inside) ou à l'extérieur (outside, défaut) de la boîte de l'élément.

Mise en forme des tableaux

PropriétéExemple de codeDescription et Résultat
border-collapse 
table { 
  border-collapse: collapse; 
}
 Fusionne les bordures des cellules en une seule. La valeur par défaut est separate (bordures séparées).
collapse:
AB
separate:
AB
border-spacing 
table { 
  border-collapse: separate;
  border-spacing: 10px 5px;
}
 Définit l'espace horizontal et vertical entre les bordures des cellules. Ne fonctionne qu'avec border-collapse: separate;.
A
padding 
th, td { 
  padding: 15px;
  text-align: left;
}
 Ajoute de l'espace à l'intérieur des cellules (th et td), entre le contenu et la bordure, pour une meilleure lisibilité.
Padding appliqué
border-width 
td { border-width: 4px; }
td { border-width: thin; }
 Définit l'épaisseur de la bordure.
4pxthin
border-style 
td { border-style: dotted; }
td { border-style: dashed; }
 Définit le style de la bordure (solid, dotted, dashed, double, etc.).
dotteddashed
border-color 
td { border-color: red; }
 Définit la couleur de la bordure.
Rouge
:nth-child() 
tr:nth-child(even) { 
  background-color: #f2f2f2; 
}
 Permet de styler des lignes en alternance (lignes "zébrées") pour améliorer la lisibilité des grands tableaux.
Ligne 1 (impaire)
Ligne 2 (paire)
Ligne 3 (impaire)

Disposition et Positionnement

Ces propriétés contrôlent la manière dont les éléments sont positionnés sur la page.

Propriété display

ValeurExemple de codeDescriptionRésultat
block 
div { display: block; }
 L'élément prend toute la largeur disponible et crée des sauts de ligne. (Ex: <div>, <p>).
Élément bloc 1
Élément bloc 2
inline 
span { display: inline; }
 L'élément ne prend que la largeur de son contenu et ne crée pas de sauts de ligne. (Ex: <span>, <a>).
Élément en ligne 1. Élément en ligne 2.
inline-block 
div { 
  display: inline-block;
  width: 100px;
  height: 50px;
}
 Combine les deux : se place en ligne mais peut avoir une largeur et une hauteur définies.
Boîte 1
Boîte 2
none 
.hidden { display: none; }
 L'élément est complètement retiré de la page et n'occupe aucun espace.

Flexbox

Un modèle de mise en page unidimensionnel puissant pour aligner et distribuer l'espace entre les éléments.

Propriété (sur le parent)Exemple de codeRésultat
justify-content 
.container {
  display: flex;
  justify-content: space-between;
}
 Aligne les éléments sur l'axe principal (horizontal par défaut).
space-between:
1
2
3
center:
1
2
3
align-items 
.container {
  display: flex;
  align-items: center;
}
 Aligne les éléments sur l'axe secondaire (vertical par défaut).
center:
A
B
C
flex-wrap 
.container {
  display: flex;
  flex-wrap: wrap;
}
 Permet aux éléments de passer à la ligne s'ils n'ont plus de place.
1
2
3
4

Positionnement

PropriétéExemple de codeDescriptionRésultat
position: relative; 
.box { 
  position: relative; 
  top: 10px;
  left: 20px;
}
 Positionne l'élément par rapport à sa position normale. Peut être décalé avec top, left, etc.
Boîte normale.
Boîte relative
position: absolute; 
.parent { position: relative; }
.child { 
  position: absolute; 
  bottom: 5px; 
  right: 5px;
}
 Positionne l'élément par rapport à son premier parent positionné (non-statique). Sort du flux normal.
Parent (relative)
Enfant (absolu)
position: fixed; 
.menu { 
  position: fixed;
  top: 0;
  width: 100%;
}
 Positionne l'élément par rapport à la fenêtre du navigateur. Il reste fixe lors du défilement.
Difficile à démontrer ici, mais un menu fixé en haut de page utilise cette propriété.
position: sticky; 
.header {
  position: sticky;
  top: 0;
}
 Se comporte comme relative jusqu'à un certain point de défilement, puis devient fixed.
L'en-tête de cette page est un excellent exemple de position: sticky.
float 
img {
  float: left;
  margin-right: 10px;
}
 Permet à un élément de "flotter" à gauche ou à droite, forçant le contenu à s'enrouler autour.
Logo EphecCe texte s'enroule autour de l'image qui flotte à gauche, ce qui est l'usage principal de la propriété float.

Responsive Design (Media Queries)

Les Media Queries permettent d'appliquer des styles CSS différents en fonction des caractéristiques de l'appareil, comme la largeur de l'écran.

SyntaxeUsage
 
@media (max-width: 600px) {
  /* Styles pour les écrans de 600px ou moins */
  body {
    background-color: lightblue;
  }
}
 Cette règle change la couleur de fond du body en bleu clair lorsque la largeur de la fenêtre du navigateur est inférieure ou égale à 600 pixels. C'est la base du design responsive.