CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour décrire l'apparence et la mise en forme d'un document écrit en HTML ou en XML. Il permet de séparer le contenu (HTML) de la présentation (CSS), ce qui facilite la maintenance et l'adaptation du design.
CSS est utilisé pour styliser les éléments HTML, définir la mise en page, contrôler les couleurs, les polices, les animations, et bien plus encore. Il est généralement inclus dans un fichier séparé (.css) et lié au document HTML via une balise <link> dans l'en-tête du document.
p {
color: blue;
}
.highlight {
background-color: yellow;
}
#unique {
font-size: 24px;
}
* {
margin: 0;
padding: 0;
}
input[type="text"] {
border: 1px solid black;
}
a:hover {
color: red;
}
p::first-letter {
font-size: 2em;
}
Les propriétés CSS définissent les aspects spécifiques de la mise en forme, comme la couleur du texte, la taille de la police, la marge, le rembourrage (padding), etc. Chaque propriété peut avoir différentes valeurs, qui déterminent comment l'élément HTML sera stylisé.
Les sélecteurs CSS sont utilisés pour cibler des éléments HTML spécifiques afin de leur appliquer des styles. Voici comment utiliser chaque type de sélecteur :
Cible les éléments HTML par leur nom de balise.
h1 {
color: red;
}
Cible les éléments HTML qui ont une classe spécifique.
.important {
font-weight: bold;
}
Cible un élément HTML unique par son ID.
#unique-element {
background-color: lightblue;
}
Cible tous les éléments HTML.
* {
box-sizing: border-box;
}
Cible les éléments HTML qui ont un attribut spécifique.
input[type="email"] {
border: 2px solid green;
}
Cible des éléments HTML basés sur leur état ou leur position.
a:visited {
color: purple;
}
Cible des parties spécifiques d'un élément HTML.
p::first-letter {
font-size: 2em;
}
Les propriétés CSS définissent les aspects spécifiques de la mise en forme des éléments HTML. Voici quelques exemples de propriétés et comment les utiliser :
p {
font-family: Arial, sans-serif;
}
h1 {
font-size: 24px;
}
p {
color: #333;
}
p {
text-align: center;
}
div {
margin: 10px;
}
button {
padding: 5px 10px;
}
img {
display: block;
}
.header {
position: fixed;
top: 0;
}
div {
border: 1px solid black;
}
img {
border-radius: 50%;
}
body {
background-color: #f0f0f0;
}
.transparent {
opacity: 0.5;
}
La propriété transition est un raccourci pour définir plusieurs propriétés de transition en une seule déclaration. Elle permet de contrôler la manière dont une propriété change d'une valeur à une autre. Voici comment vous pouvez l'utiliser :
button:hover {
background-color: blue;
transition: background-color 0.5s ease;
}
Dans cet exemple, la propriété transition est utilisée pour animer la couleur de fond d'un bouton lorsqu'il est survolé. La transition dure 0.5 seconde et utilise la fonction d'accélération ease, qui commence lentement, accélère au milieu, puis ralentit à nouveau vers la fin.
Les animations CSS permettent de créer des animations complexes en contrôlant les images clés d'une animation. Voici comment vous pouvez définir une animation :
@keyframes monAnimation {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
button {
animation: monAnimation 2s infinite;
}
Dans cet exemple, une animation nommée monAnimation est définie avec @keyframes. L'animation change la couleur de fond d'un bouton de rouge à jaune. L'animation est appliquée au bouton avec la propriété animation, qui spécifie le nom de l'animation, sa durée (2 secondes) et indique que l'animation doit se répéter indéfiniment (infinite).
Cette formation est proposée par Deladev, studio web de Loïc D. — création de sites et d'applications, accompagnement et formation sur mesure.
Les projets réalisés · Prestations et tarifs · Le blog tech · Me contacter
Écrite par Loïc D. avec l'assistance de Claude (Anthropic) — un travail à deux.
© 2026 Deladev — publiée sous licence CC BY-NC-ND 4.0. Vous pouvez la lire, y renvoyer par un lien, la partager et la citer en créditant la source. La revendre, l'utiliser dans une prestation ou une formation payante, la republier même partiellement ailleurs, en diffuser une version modifiée ou l'exploiter pour entraîner un modèle d'IA nécessitent une autorisation écrite — pour un usage interne en entreprise, c'est souvent oui, il suffit de demander.