CSS: Formatting Web Content – A Complete Guide
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) is not a programming language, nor a markup language. CSS is a stylesheet language 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.
Basic HTML example
Life Instructions:
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 :
<link href="styles/style.css" rel="stylesheet" />
And in your file style.css :
p {
color: red;
}
2. Internal Stylesheet
Les règles CSS dans une balise <style> in the 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 :
Hello World!
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 - Value :
redРle r̩glage souhait̩
Règles de syntaxe importantes
- Chaque déclaration se termine par un semicolon (
;) - Propriété et valeur sont séparées par two 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.
In 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; /* Content width */
margin: 0 auto; /* Horizontal centering */
background-color: #ff9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
Understanding multiple values
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.
Colors
/* Change the background color of the page */
html {
background-color: #00539f;
}
/* Text color */
h1 {
color: #00539f;
}
Text shadows
h1 {
text-shadow: 3px 3px 1px black;
/* décalage-x, décalage-y, flou, couleur */
}
Center an image
img {
display: block; /* Transforme en élément bloc */
margin: 0 auto; /* Horizontal centering */
max-width: 100{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5}; /* Image responsive */
}
margin: auto, First, they need to be transformed into a block with display: block;.
Créez une page web stylisée en suivant ces étapes :
1. HTML Structure
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Premier Site Stylisé</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
Welcome to my site
<p>Un paragraphe de présentation.</p>
</body>
</html>
2. Complete CSS Styles
/* 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;
}
/* Title */
h1 {
font-size: 60px;
text-align: center;
margin: 0;
padding: 20px 0;
color: #00539f;
text-shadow: 3px 3px 1px black;
}
/* Paragraphs */
p {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
/* Images */
img {
display: block;
margin: 0 auto;
max-width: 100{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5};
}
