Propriété
Un sélecteur CSS définit sur quels éléments HTML un style doit s’appliquer. Les propriétés CSS permettent, quant à elles, de contrôler tous les aspects visuels d’une page web, comme les couleurs, la typographie, les boîtes, la mise en page ou les animations.
Définition : Couleurs et arrière-plans
Ces propriétés définissent l’apparence visuelle de base.
color: red; /* Couleur du texte */
background-color: yellow; /* Couleur de fond */
background-image: url("fond.png");
opacity: 0.8; /* Transparence */
voir : liste des propriétés[1]
Définition : Texte et polices
Elles contrôlent l’apparence du contenu textuel.
font-family: Arial, sans-serif; /* Police */
font-size: 16px; /* Taille du texte */
font-weight: bold; /* Épaisseur (normal, bold, 100…900) */
font-style: italic; /* Italique */
text-align: center; /* Alignement (left, right, center, justify) */
voir : liste des propriétés[2]
Définition : Modèle de boîte (box model)
Chaque élément HTML est une boîte : contenu + padding + bordure + marge.
width: 200px; /* largeur */
height: 100px; /* hauteur */
padding: 10px; /* espace interne */
margin: 20px; /* espace externe */
border: 2px solid black; /* bordure */
box-sizing: border-box; /* padding et border inclus dans largeur et hauteur*/
voir : liste des propriétés[3]
Définition : Positionnement et mise en page
Ces propriétés servent à organiser les éléments.
display: block; /* ou inline, flex, grid, inline-block, none */
position: relative; /* ou absolute, fixed, sticky */
top: 10px; left: 20px; /* déplacement (si position relative/absolute) */
z-index: 10; /* ordre d’empilement */
voir : liste des propriétés[4]
Aujourd’hui, on privilégie Flexbox et CSS Grid.
Définition : Flexbox (mise en page moderne)
Ces propriétés servent à organiser les éléments.
display: flex;
flex-direction: row; /* ou column */
justify-content: center; /* alignement horizontal */
align-items: center; /* alignement vertical */
flex-wrap: wrap; /* retour à la ligne */
gap: 10px; /* espace entre les éléments */
voir : liste des propriétés[5]
Définition : Grid (mise en page avancée)
Ces propriétés servent à organiser les éléments.
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 colonnes égales */
grid-template-rows: auto 200px;
gap: 20px;
voir : liste des propriétés[6]
Définition : Transformations (rotate, translate, scale…)
Les transformations CSS permettent de modifier la position, la taille ou l’orientation d’un élément sans changer le flux normal du document. Elles sont souvent utilisées avec les transitions ou les animations.
transform: rotate(45deg); /* rotation de 45 degrés */
transform: translate(50px, 20px); /* 50px à droite, 20px vers le bas */
transform: translate(50px, 20px) rotate(30deg) scale(1.2); /* L’ordre est important : les transformations sont appliquées de gauche à droite. */
voir : liste des propriétés[7]
Définition : Transitions et animations
Pour rendre les pages plus interactives.
Transition
Les transitions permettent de créer un effet de passage progressif entre deux états d’un élément (ex : hover, focus).
button {background: blue;
transition: background 0.3s;
}
button:hover {
background: red;
}
Animation
Les animations permettent de définir des mouvements ou changements complexes, répétitifs ou séquencés.
@keyframes clignote {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.alerte {animation: clignote 1s infinite;
}
voir : liste des propriétés[8]
Définition : Responsive design
Permettent d’appliquer des styles selon la taille de l’écran, l’orientation ou le type d’appareil.
@media (max-width: 600px) {
body {font-size: 14px;
}
}
Le CSS s’applique aux écrans dont la largeur est inférieure ou égale à 600 pixels.
voir : Media Queries[9]