CSS : Mettre en Forme le Contenu Web – Guide Complet
Maîtrisez les fondamentaux de CSS (Cascading Style Sheets) pour transformer l’apparence de vos pages web. Ce tutoriel complet couvre la syntaxe CSS, les méthodes d’application et les propriétés essentielles.
Objectifs pédagogiques
- Comprendre le rôle de CSS dans le développement web
- Maîtriser la syntaxe des règles CSS
- Savoir appliquer CSS à un document HTML
- Utiliser les propriétés de base pour le style
CSS (Cascading Style Sheets) n’est pas un langage de programmation, ni un langage de balisage. CSS est un langage de feuille de style qui permet de mettre en forme les éléments HTML.
Le principe est simple : vous sélectionnez les éléments à styliser, puis vous définissez des valeurs pour leurs propriétés de style.
Exemple HTML de base
<p>Instructions de la vie :</p>
<ul>
<li>Manger</li>
<li>Dormir</li>
<li>Recommencer</li>
</ul>
Avec du CSS appliqué
p {
font-family: sans-serif;
color: red;
}
li {
background-color: greenyellow;
border: 1px solid black;
margin-bottom: 5px;
}
Résultat visuel : Le paragraphe sera en rouge avec une police sans-serif, et chaque élément de liste aura un fond vert-jaune avec une bordure noire.
CSS offre de nombreuses fonctionnalités : images d’arrière-plan, dégradés, contrôle de la typographie, animations, et mise en page complète d’un site web.
Il existe trois méthodes pour appliquer du CSS à un document HTML :
1. Feuille de Style Externe (Recommandé)
La méthode la plus commune et la plus maintenable :
<!-- Dans le head de votre HTML -->
<link href="styles/style.css" rel="stylesheet" />
Et dans votre fichier style.css :
p {
color: red;
}
2. Feuille de Style Interne
Les règles CSS dans une balise <style> dans le head :
<head>
<style>
h1 {
color: blue;
background-color: yellow;
}
</style>
</head>
3. Styles en Ligne (À éviter)
CSS directement dans l’attribut style d’un élément :
<h1 style="color: blue; background-color: yellow;">
Hello World!
</h1>
Comprendre la structure d’une règle CSS est fondamental. Voici les composants :
p {
color: red;
width: 500px;
border: 1px solid black;
}
Composants d’une règle CSS
- Sélecteur :
p– cible les éléments à styliser - Accolades :
{ }– délimitent le bloc de déclarations - Déclaration :
color: red;– une paire propriété/valeur - Propriété :
color– l’aspect à modifier - Valeur :
red– le réglage souhaité
Règles de syntaxe importantes
- Chaque déclaration se termine par un point-virgule (
;) - Propriété et valeur sont séparées par deux points (
:) - Plusieurs sélecteurs peuvent partager une même règle :
p,
.my-class,
#my-id {
color: red;
}
Cette règle applique la couleur rouge aux paragraphes, aux éléments avec la classe my-class, et à l’élément avec l’ID my-id.
En CSS, tout est une boîte. Comprendre le modèle de boîte est essentiel pour maîtriser les mises en page.
Les quatre zones d’une boîte
┌─────────────────────────────────┐
│ MARGIN │
│ ┌───────────────────────────┐ │
│ │ BORDER │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ PADDING │ │ │
│ │ │ ┌───────────────┐ │ │ │
│ │ │ │ CONTENT │ │ │ │
│ │ │ └───────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └───────────────────────────┘ │
└─────────────────────────────────┘
Propriétés du modèle de boîte
body {
width: 600px; /* Largeur du contenu */
margin: 0 auto; /* Centrage horizontal */
background-color: #ff9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
Comprendre les valeurs multiples
margin: 0 auto;→ haut/bas: 0, gauche/droite: auto (centré)padding: 0 20px 20px 20px;→ haut, droite, bas, gauche (sens horaire)
auto sur margin-left et margin-right centre un élément bloc horizontalement.
Couleurs
/* Changer la couleur de fond de la page */
html {
background-color: #00539f;
}
/* Couleur du texte */
h1 {
color: #00539f;
}
Ombres de texte
h1 {
text-shadow: 3px 3px 1px black;
/* décalage-x, décalage-y, flou, couleur */
}
Centrer une image
img {
display: block; /* Transforme en élément bloc */
margin: 0 auto; /* Centrage horizontal */
max-width: 100%; /* Image responsive */
}
margin: auto, il faut d’abord les transformer en bloc avec display: block;.
Créez une page web stylisée en suivant ces étapes :
1. Structure HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Premier Site Stylisé</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bienvenue sur mon site</h1>
<p>Un paragraphe de présentation.</p>
<img src="logo.png" alt="Logo">
</body>
</html>
2. Styles CSS complets
/* Base */
html {
font-size: 10px;
font-family: 'Roboto', sans-serif;
background-color: #00539f;
}
body {
width: 600px;
margin: 0 auto;
background-color: #ff9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
/* Titre */
h1 {
font-size: 60px;
text-align: center;
margin: 0;
padding: 20px 0;
color: #00539f;
text-shadow: 3px 3px 1px black;
}
/* Paragraphes */
p {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
/* Images */
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
