Révision des propriétés CSS

1. Agir sur le texte

Mot clé	Écriture CSS	Rôle	Exemple
Couleur du texte	`color: blue;`	Change la couleur du texte.	Ce texte est bleu.
Taille du texte	`font-size: 20px;`	Change la taille du texte (en pixels, em, rem...).	Texte en 20px.
Police du texte	`font-family: Arial, sans-serif;`	Choisit la police utilisée pour afficher le texte.	Texte en Courier New.
Alignement du texte	`text-align: center;`	Aligne le texte (left, center, right, justify...).	Texte centré.
Texte en gras	`font-weight: bold;`	Met le texte en gras.	Texte en gras.
Texte en italique	`font-style: italic;`	Incline légèrement le texte.	Texte en italique.
Souligner le texte	`text-decoration: underline;`	Ajoute un trait sous le texte.	Texte souligné
Ligne au-dessus du texte	`text-decoration: overline;`	Ajoute un trait au-dessus du texte.	Texte overline
Texte barré	`text-decoration: line-through;`	Ajoute un trait au milieu du texte.	Texte barré
Deux lignes (dessus + dessous)	`text-decoration: underline overline;`	Ajoute une ligne au-dessus et au-dessous du texte.	Double ligne
Épaisseur de la ligne	`text-decoration-thickness: 3px;`	Change l’épaisseur du soulignement / overline. Fonctionne avec underline, overline, line-through.	Soulignement épais

2. Marges et espacements

Mot clé	Écriture CSS	Rôle	Exemple
Marges extérieures	`margin: 20px;` `margin-top: 20px;` `margin-right: 20px;` `margin-bottom: 20px;` `margin-left: 20px;`	Ajoute de l’espace à l’extérieur d’un bloc. margin applique la même valeur partout. Les versions margin-top/right/bottom/left permettent de régler chaque côté séparément.	Sans marge (margin: 0) Avec margin-top: 40px;
Marges intérieures	`padding: 10px;` `padding-top: 10px;` `padding-right: 10px;` `padding-bottom: 10px;` `padding-left: 10px;`	Ajoute de l’espace à l’intérieur du bloc, entre le contenu et la bordure. padding applique la même valeur partout. Les versions padding-top/right/bottom/left permettent de gérer chaque côté indépendamment.	Sans padding (padding: 0) Avec padding: 15px;

3. Bordures

Mot clé	Écriture CSS	Rôle	Exemple
Bordure complète	`border: 2px solid black;`	Ajoute une bordure (épaisseur, type, couleur).	Bloc avec bordure noire de 2px.
Épaisseur de la bordure	`border-width: 4px;`	Modifie l’épaisseur de la bordure.	Bordure épaisse
Couleur de la bordure	`border-color: red;`	Change la couleur de la bordure.	Bordure rouge
Style de la bordure	`border-style: dashed;`	Type de ligne : solid, dashed, dotted, double…	Bordure en tirets
Angles arrondis	`border-radius: 10px;`	Arrondit les coins d’un élément.	Coins arrondis

4. Listes à puces

Mot clé	Écriture CSS	Rôle	Exemple
Style des puces	`list-style-type: square;`	Change la forme des puces (disc, circle, square, none...).	Élément 1 Élément 2
Supprimer les puces	`list-style-type: none;`	Supprime les puces devant les éléments de liste.	Élément 1 Élément 2

5. Taille des éléments & images

Mot clé	Écriture CSS	Rôle
Largeur de l’image	`width: 200px;`	Change la largeur d’une image. Si seule la largeur est définie, la hauteur s’ajuste automatiquement : → l’image garde ses proportions.
Hauteur de l’image	`height: 150px;`	Change la hauteur de l’image. Si seule la hauteur change, l’image peut être déformée.
Fixer largeur + hauteur	`width: 150px; height: 150px;`	Fixe les dimensions exactes. ⚠️ L’image peut être déformée si le ratio ne correspond pas.
Adapter l’image sans déformation	`object-fit: cover;`	Permet de remplir un cadre sans déformer l’image (recadrage) : `cover` : remplit le cadre (image peut être coupée) `contain` : l’image entière reste visible Nécessite un `width` + `height` définis.

6. Arrière-plans

Mot clé	Écriture CSS	Rôle	Exemple
Couleur d’arrière-plan	`background-color: lightblue;`	Change la couleur de fond d’un élément.	Fond bleu clair.
Image d’arrière-plan	`background-image: url("image.png");`	Utilise une image comme fond.	Exemple avec une image en fond.
Ne pas répéter l’image	`background-repeat: no-repeat;`	Empêche l’image de se répéter en mosaïque.	Image non répétée.
Étendre l’image (cover)	`background-size: cover;`	L’image couvre tout le bloc (souvent recadrée).	Image étirée.
Adapter l’image (contain)	`background-size: contain;`	L’image entière est visible, sans être coupée.	Image contenue dans le bloc.

7. Rappel : Comment écrire une règle CSS ?

Une règle CSS associe un sélecteur (souvent une balise HTML comme p ou h1) à des propriétés et des valeurs.

Schéma général :

balise {
                propriété: valeur;
                autre-propriété: autre valeur;
            }

On indente (on décale) les propriétés vers la droite pour mieux voir ce qui est « à l’intérieur » de la règle. On utilise la touche Tabulation pour faire ce décalage.

Exemple avec un paragraphe :

p {
                color: blue;
                font-size: 16px;
                text-align: center;
            }

Ici :

p : la balise ciblée (sélecteur)
color, font-size, text-align : les propriétés
blue, 16px, center : les valeurs associées

Besoin d’aller plus loin ?

Vous ne trouvez pas ce dont vous avez besoin ? Rendez-vous sur un site de référence du CSS : Lien ici ou bien cherchez ce qu'il vous faut sur un moteur de recherche.

8. Ombres (box-shadow & text-shadow)

Mot clé	Écriture CSS	Rôle	Exemple
Ombre autour d’un bloc (box-shadow)	`box-shadow: 4px 4px 10px gray;` Structure complète : `box-shadow: décalage-x décalage-y flou étalement couleur;`	Ajoute une ombre externe à un bloc. décalage-x : ombre vers la droite (valeur négative = gauche) décalage-y : ombre vers le bas (négatif = haut) flou : augmente la douceur de l’ombre étalement : augmente la taille de l’ombre couleur : couleur de l’ombre	Ombre
Ombre sur le texte (text-shadow)	`text-shadow: 2px 2px 4px black;` Structure complète : `text-shadow: décalage-x décalage-y flou couleur;`	Ajoute une ombre derrière le texte. décalage-x : ombre vers la droite décalage-y : ombre vers le bas flou : taille du flou couleur : couleur de l’ombre	Texte ombré
Ombre colorée	`box-shadow: 0 0 15px red;`	Permet de créer un effet lumineux autour de l’élément.	Glow
Ombres multiples	`box-shadow: 2px 2px 4px black, -2px -2px 4px blue;`	On peut ajouter plusieurs ombres séparées par une virgule.	Double ombre

9. Effets d’interaction : hover, active, focus…

Les pseudo-classes permettent de changer l’apparence d’un élément lorsqu’on interagit avec lui : survol, clic, focus…

Pseudo-classe	Écriture CSS	Rôle	Exemple
`:hover`	`button:hover { background: orange; }`	S’active quand la souris survole l’élément. Très utilisé pour les boutons et les liens.
`:active`	`button:active { transform: scale(0.95); }`	S’active au moment exact du clic. Donne un effet "bouton pressé".
`:focus`	`input:focus { border-color: blue; }`	S’active quand l’élément reçoit le focus : clic sur un champ, tabulation clavier, etc.
`a:hover`	`a:hover { color: red; }`	Change l’apparence d’un lien quand on passe dessus.	Survole ce lien
`transition` (bonus)	`button { transition: 0.3s; }` `button:hover { background: orange; }`	Permet d’adoucir l’animation entre deux états. Rend les effets plus “professionnels”.

Résumé essentiel

:hover → quand la souris passe au-dessus
:active → au moment du clic
:focus → quand l’élément est sélectionné
:visited → lien déjà visité
:checked → cases cochées

Les pseudo-classes rendent un site vivant et interactif. Elles sont très utilisées dans le web moderne.

10. Animations simples (CSS)

Une animation CSS permet de faire bouger, changer de couleur ou faire clignoter un élément automatiquement, sans JavaScript.

Elle se compose de deux parties :

@keyframes : décrit les étapes de l’animation (début → milieu → fin)
animation: ...; : applique cette animation à un élément

Mot clé	Écriture CSS	Rôle	Exemple
Texte qui clignote	`@keyframes clignote { ... }` `animation: clignote 1s infinite;`	Fait varier l’opacité du texte pour donner un effet de clignotement. 1s = durée d’un cycle complet. infinite = recommence en boucle.	Je clignote
Bloc qui bouge	`@keyframes bouge { ... }` `animation: bouge 1s infinite alternate;`	Fait se déplacer l’élément de gauche à droite. alternate = va-retour (gauche → droite → gauche…).	Je bouge
Pour mieux comprendre les paramètres de ces animations	`animation-name` `animation-duration` `animation-iteration-count` `animation-direction`	animation-name : nom des keyframes à utiliser animation-duration : durée (ex : 1s, 2s…) animation-iteration-count : nombre de répétitions (ex : 1, 3, infinite) animation-direction : normal, reverse, alternate… `animation: clignote 1s infinite;` est un raccourci qui combine `animation-name` + `duration` + `iteration-count`.	/

Propriétés CSS essentielles