CSS : mise en forme d'une page

Ce qu'il faut comprendre

Quand tu navigues sur le Web, les pages que tu vois sont écrites en HTML. Le HTML sert à structurer le contenu : titres, paragraphes, images, liens… Mais tout seul, le HTML donne une page très simple, sans couleurs, sans belles polices, sans mise en page agréable. C'est là qu'intervient le CSS (Cascading Style Sheets, ou feuilles de style en cascade). Le CSS permet de mettre en forme une page web : changer les couleurs, la taille des textes, l'espacement, la position des éléments, etc. Grâce au CSS, tu peux rendre une page jolie et facile à lire.

Les notions essentielles

CSS : langage qui décrit la présentation d'une page HTML. Il fonctionne avec des règles qui associent des sélecteurs (pour cibler des éléments) et des déclarations (pour définir le style).
Sélecteur : indique à quels éléments HTML appliquer le style. Exemple : p cible tous les paragraphes, h1 cible les titres de niveau 1.
Propriété : aspect que tu veux modifier (couleur, taille, police…). Exemple : color, font-size, background-color.
Valeur : ce que tu donnes à la propriété. Exemple : red, 16px, #ff0000.
Règle CSS : un sélecteur suivi d'un bloc de déclarations entre accolades. Exemple : p { color: blue; font-size: 14px; }.
Feuille de style : fichier .css ou bloc <style> dans le HTML qui contient les règles.
Cascade : principe qui détermine quelle règle s'applique quand plusieurs règles ciblent le même élément. En général, la règle la plus spécifique ou la dernière lue l'emporte.
Propriétés courantes :
- color : couleur du texte.
- background-color : couleur de fond.
- font-size : taille de la police (en pixels px, ou em, etc.).
- font-family : police de caractères (ex: Arial, sans-serif).
- text-align : alignement du texte (left, center, right).
- margin : espace extérieur autour d'un élément.
- padding : espace intérieur entre le contenu et la bordure.
- border : bordure (ex: 1px solid black).
- width et height : largeur et hauteur.

Méthode

Écrire le HTML : structure la page avec des balises (titres, paragraphes, etc.).
Ajouter le CSS :
- Soit dans un fichier séparé (recommandé) : créer un fichier .css et le lier avec <link rel="stylesheet" href="style.css"> dans le <head> du HTML.
- Soit dans une balise <style> dans le <head> du HTML.
- Soit directement dans une balise avec l'attribut style (déconseillé pour la propreté).
Cibler les éléments : choisis un sélecteur (balise, classe, id).
- Sélecteur de balise : p, h1, body.
- Sélecteur de classe : .ma-classe (dans HTML : class="ma-classe").
- Sélecteur d'id : #mon-id (dans HTML : id="mon-id").
Écrire les déclarations : pour chaque propriété, donne une valeur. Termine chaque déclaration par un point-virgule.
Tester : ouvre la page dans un navigateur et vérifie le rendu. Modifie si nécessaire.

Exemple corrigé

Objectif : créer une page avec un titre bleu, un paragraphe centré avec fond gris clair, et un lien rouge.

HTML (fichier index.html) :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ma page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Bienvenue sur ma page</h1>
    <p>Ceci est un paragraphe d'exemple.</p>
    <a href="https://www.alloseconde.fr">Visite AlloSeconde</a>
</body>
</html>

CSS (fichier style.css) :

h1 {
    color: blue;
    font-size: 24px;
}

p {
    text-align: center;
    background-color: lightgray;
    padding: 10px;
}

a {
    color: red;
    text-decoration: none; /* enlève le soulignement */
}

a:hover {
    text-decoration: underline; /* souligne au survol */
}

Explication :

Le sélecteur h1 cible le titre : couleur bleue, taille 24 pixels.
Le sélecteur p cible le paragraphe : texte centré, fond gris clair, espace intérieur de 10 pixels.
Le sélecteur a cible le lien : couleur rouge, pas de soulignement.
a:hover est une pseudo-classe qui s'applique quand la souris survole le lien : soulignement.

Erreurs fréquentes

Oublier le point-virgule après chaque déclaration : color: red sans ; peut casser la règle suivante.
Confondre margin et padding : margin est l'espace extérieur (entre l'élément et les autres), padding est l'espace intérieur (entre le contenu et la bordure).
Ne pas fermer les accolades : p { color: red; manque }.
Utiliser un sélecteur trop général : par exemple, p modifie tous les paragraphes. Si tu veux un seul paragraphe, utilise une classe.
Oublier de lier le fichier CSS : si le <link> est mal écrit, le CSS ne s'applique pas.
Penser que le CSS modifie le HTML : non, le CSS ne change que l'apparence, pas la structure.

À retenir

Le CSS sert à mettre en forme les pages web.
Une règle CSS = un sélecteur + des déclarations (propriété: valeur).
Les propriétés courantes : color, background-color, font-size, text-align, margin, padding, border.
On peut lier un fichier .css externe avec <link>.
La cascade et la spécificité déterminent quelle règle s'applique.
Attention aux erreurs de syntaxe (point-virgule, accolades).

Pour s'entraîner

Pour vérifier que tu as bien compris, rends-toi sur AlloSeconde : tu trouveras des exercices interactifs, des quiz et des fiches de révision sur le CSS. Entraîne-toi à modifier le style d'une page simple : change les couleurs, les polices, les espacements. Plus tu pratiques, plus tu maîtriseras !