Mise en forme avec CSS
Objectifs
- Comprendre le rôle et la syntaxe de base du CSS (sélecteurs, propriétés, valeurs).
- Savoir appliquer des styles pour modifier la couleur, la typographie et l'espacement des éléments HTML.
- Découvrir différentes méthodes pour intégrer du CSS dans une page HTML (balise style, feuille externe).
Introduction
Imaginez une page web comme une maison : le HTML en est la structure (les murs, les pièces), mais sans décoration, elle reste terne et peu accueillante. Le CSS, c'est la peinture, les meubles, l'ambiance lumineuse qui la rend unique et agréable à vivre. Aujourd'hui, nous allons apprendre à habiller nos pages web pour qu'elles soient à la fois belles et claires.
Comment appliquer des styles (couleurs, polices, mise en page) à une page web structurée en HTML pour en contrôler l'apparence visuelle ?
Les fondements du CSS : sélecteurs, propriétés et valeurs
Le CSS (Cascading Style Sheets ou Feuilles de Style en Cascade) est un langage qui décrit la présentation des documents HTML. Sa syntaxe repose sur trois concepts clés. D'abord, le **sélecteur** : il cible l'élément HTML à styliser. Par exemple, `h1` sélectionne toutes les balises `<h1>`, `.ma-classe` sélectionne tous les éléments ayant l'attribut `class="ma-classe"`, et `#mon-id` cible l'élément unique avec `id="mon-id"`. Ensuite, les **propriétés** définissent *ce que* l'on veut changer : `color` pour la couleur du texte, `font-family` pour la police, `background-color` pour la couleur de fond. Enfin, les **valeurs** précisent *comment* : `red`, `#FF0000` ou `rgb(255,0,0)` pour la couleur rouge ; `Arial, sans-serif` pour la police. Une règle CSS complète s'écrit ainsi : `sélecteur { propriété: valeur; }`. Par exemple, `p { color: blue; font-size: 16px; }` rendra tout le texte des paragraphes en bleu avec une taille de 16 pixels. La puissance du CSS réside dans sa capacité à appliquer une même règle à tous les éléments correspondant au sélecteur, garantissant une apparence cohérente sur tout le site.
Points clés
- Le CSS contrôle l'apparence (style) des éléments HTML.
- Une règle CSS = un sélecteur + des déclarations (propriété:valeur).
- Les sélecteurs courants : balise (ex: `h1`), classe (ex: `.titre`), identifiant (ex: `#menu`).
Intégrer le CSS dans une page HTML
Il existe trois méthodes principales pour lier du CSS à un document HTML, chacune ayant ses avantages. 1) **CSS interne (ou intégré)** : on place les règles CSS dans une balise `<style>` à l'intérieur de la section `<head>` du document HTML. C'est pratique pour tester rapidement ou pour une page unique. Exemple : `<head><style> body { background-color: lightgrey; } </style></head>`. 2) **CSS en ligne** : on applique le style directement dans une balise HTML via l'attribut `style`. Exemple : `<h1 style="color: green;">Bonjour</h1>`. Cette méthode est spécifique et prioritaire, mais elle mélange le contenu et la présentation, ce qui est déconseillé pour un code propre et maintenable. 3) **CSS externe (recommandé)** : on écrit toutes les règles CSS dans un fichier séparé, avec l'extension `.css` (ex: `styles.css`). On lie ensuite ce fichier à la page HTML avec une balise `<link>` dans le `<head>`. Exemple : `<head><link rel="stylesheet" href="styles.css"></head>`. C'est la méthode la plus professionnelle car elle permet de styliser tout un site web avec un seul fichier, facilitant les mises à jour et le chargement rapide des pages. On parle de séparation des préoccupations : le HTML gère le contenu, le CSS gère le style.
Points clés
- Trois méthodes : CSS interne (`<style>`), en ligne (`style=""`), externe (fichier `.css`).
- La méthode externe (fichier séparé) est la plus recommandée pour un site complet.
- La balise `<link>` dans le `<head>` permet de lier une feuille de style externe.
Applications pratiques : premiers styles
Mettons en pratique ! Créez un fichier HTML simple avec un titre `<h1>`, un paragraphe `<p>` et une liste `<ul>`. Dans un fichier CSS lié, appliquez les styles suivants. Pour le corps de la page (`body`), définissez une police de caractères familière comme `font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;` et une marge intérieure (`padding`) de 20px. Ciblez ensuite le titre (`h1`) pour lui donner une couleur de votre choix (ex: `color: darkblue;`), le centrer (`text-align: center;`) et ajouter une bordure inférieure (`border-bottom: 2px solid darkblue;`). Pour les paragraphes (`p`), augmentez l'interligne avec `line-height: 1.6;` et justifiez le texte (`text-align: justify;`). Enfin, stylisez les éléments de la liste (`li`) : changez le type de puce avec `list-style-type: square;` et donnez-leur une couleur de fond au survol de la souris avec `li:hover { background-color: lightyellow; }`. Observez comment chaque règle modifie l'apparence. Expérimentez en changeant les valeurs des couleurs (noms, codes hexadécimaux comme `#3498db`), des tailles (px, em) et des propriétés comme `margin` (marge extérieure) pour espacer les éléments.
Points clés
- Application des propriétés de base : `color`, `font-family`, `text-align`, `padding`, `border`.
- Utilisation du sélecteur de pseudo-classe `:hover` pour un effet interactif simple.
- Expérimentation et observation immédiate des changements pour comprendre l'impact de chaque propriété.
À retenir
Le CSS est le langage de style indispensable pour contrôler l'apparence visuelle d'une page web structurée en HTML. Il fonctionne via un système de règles associant un sélecteur (qui cible les éléments) à des déclarations de propriétés et de valeurs (qui définissent le style). Pour une bonne pratique, il est recommandé d'utiliser une feuille de style externe, liée au HTML, afin de séparer clairement le contenu de la présentation et de faciliter la maintenance du site.
- Le CSS se compose de règles : sélecteur { propriété: valeur; }.
- Pour un site, privilégiez une feuille de style externe (séparation contenu/style).
- Les sélecteurs de classe (.) et d'identifiant (#) permettent un ciblage précis des éléments.
