CSS

Denis Dréano

WEB-04

CSS

Objectifs cantonaux : O4.1, O4.2.

Cours complet sur la plateforme Runestone de Cédric Donner : CSS.

Après le contenu (HTML), on passe à la présentation : le langage CSS permet de séparer la structure d’une page web de son apparence visuelle.

Séparer contenu et présentation

Jusqu’ici, vous n’avez fait que définir le contenu et la structure d’une page à l’aide des balises HTML. Pour la mettre en forme (couleurs, polices, tailles, espacements, mise en page), il faut un second langage : CSS (Cascading Style Sheets, feuilles de style en cascade).

▷ À retenir — Pourquoi séparer HTML et CSS

HTML répond à la question : qu’est-ce qu’il y a sur la page, et comment est-ce organisé ? (un titre, un paragraphe, une liste, …)
CSS répond à la question : à quoi cela ressemble-t-il ? (couleurs, tailles, polices, positionnement)

Séparer les deux permet de changer complètement l’apparence d’un site sans toucher à son contenu, et inversement.

Syntaxe d’une règle CSS

◈ Syntaxe — Une règle CSS

sélecteur {
    propriété1: valeur;
    propriété2: valeur;
}

Le sélecteur désigne les éléments HTML concernés ; chaque propriété (par ex. color, background-color, font-size) reçoit une valeur.

→ Exemple — mettre en forme un titre

h1 {
    color: white;
    background-color: red;
    padding: 0.2rem;
}

Tous les éléments <h1> de la page auront un texte blanc sur fond rouge, avec une marge intérieure de 0.2rem de chaque côté.

Les sélecteurs

▷ À retenir — Trois familles de sélecteurs

Sélecteur	Cible	Exemple
Par balise	Tous les éléments de ce type	`h1 { ... }` cible tous les `<h1>`
Par classe (`.`)	Tous les éléments portant cette `class`	`.special { ... }` cible tout élément avec `class="special"`
Par identifiant (`#`)	L’unique élément portant cet `id`	`#titre-principal { ... }` cible l’élément avec `id="titre-principal"`

Une classe peut être réutilisée sur plusieurs éléments ; un identifiant doit rester unique dans toute la page (cf. semaine précédente).

→ Exemple — les trois sélecteurs ensemble

<p class="special">Ce paragraphe est stylé de manière spéciale.</p>
<p>Ce paragraphe-ci n'est pas concerné.</p>

.special {
    font-weight: bold;
    color: blue;
}

Seul le premier paragraphe, qui porte class="special", reçoit le style (texte bleu et gras).

Trois façons d’appliquer du CSS à une page

◈ Méthode 1 — Balise <style> dans le <head>

<html>
    <head>
        <style>
            h1 {
                color: white;
                background-color: red;
            }
            .special {
                font-weight: bold;
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>Titre de la page</h1>
        <p class="special">Paragraphe mis en évidence.</p>
        <p>Paragraphe normal.</p>
    </body>
</html>

◈ Méthode 2 — Fichier .css séparé (recommandée)

Le code CSS est écrit dans un fichier à part (par ex. styles.css), puis « importé » dans le HTML avec la balise <link>, dans le <head> :

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

C’est la méthode la plus propre : un même fichier styles.css peut être réutilisé par plusieurs pages HTML du même site.

◈ Méthode 3 — Style en ligne (à éviter sauf test rapide)

<h1 style="color: white; background-color: red;">Titre</h1>

Le style s’applique uniquement à cet élément précis. Pratique pour un essai ponctuel, mais peu maintenable dès que la page grandit (le style est éparpillé dans tout le HTML au lieu d’être centralisé).

! Erreur fréquente

Oublier rel="stylesheet" ou se tromper dans le chemin (href) du fichier .css est la cause la plus fréquente d’une page qui « n’a aucun style » : le navigateur ne trouve tout simplement pas le fichier CSS demandé. Vérifiez toujours que le chemin indiqué dans href correspond bien à l’emplacement réel du fichier.

Exercice — styliser une page déjà rédigée

Reprenez la page HTML de présentation de film rédigée les semaines précédentes (S34/S35) et ajoutez-lui une feuille de style styles.css, reliée avec une balise <link>.

◈ Styles à appliquer

Le titre principal (h1) doit être écrit en une couleur de votre choix, avec une bordure solide de 1 pixel.
Le titre ne doit occuper que 75 % de la largeur de la page, et être centré.
Les marges intérieures du titre sont de 0.2rem sur les quatre côtés.
La taille de l’affiche du film (img) doit être ajustée pour ne pas déborder de la page (par exemple max-width: 100%).
Ajoutez au moins un style basé sur une classe (.class) et un style basé sur un identifiant (#id).

Devoir donné par Cédric

Terminer les styles demandés ci-dessus. Vous pouvez vous entraîner en plus sur https://flukeout.github.io/, un jeu en ligne pour bien maîtriser les différents sélecteurs CSS.