Activité 3 – Mise en forme avec CSS

Objectifs :

Comprendre le rôle du CSS (mise en forme)
Appliquer des styles à une page HTML
Utiliser les sélecteurs (balise, id, class)

Introduction au CSS

Le CSS (Cascading Style Sheets) gère la mise en page et l'aspect visuel. HTML s'occupe du contenu, CSS s'occupe du style.

À faire vous-même 1

Sur jsfiddle.net, écrivez ce code HTML :

<h1>Ceci est un titre</h1>
<h2>Ceci est un sous titre</h2>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>

Dans la fenêtre CSS, ajoutez :

h1 {
    text-align: center;
    background-color: red;
}
h2 {
    font-family: Verdana;
    font-style: italic;
    color: green;
}

Cliquez sur Run. Que remarquez-vous ?

Structure d'une règle CSS

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

Sélecteur : élément ciblé (h1, p, .classe, #id)
Propriété : ce qu'on modifie (color, font-size...)
Valeur : la nouvelle valeur (red, 16px...)

À faire vous-même 2

Modifiez le HTML pour ajouter un id :

<p id="para_1">Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>

Ajoutez ce CSS pour cibler uniquement ce paragraphe :

#para_1 {
    font-style: italic;
    color: green;
}

Question : Quel symbole utilise-t-on pour cibler un id en CSS ?

Fichier CSS externe

Dans un vrai site, on sépare le CSS dans un fichier externe.

À faire vous-même 3

Étape 1 : Créez un fichier index.html :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Voici mon site</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello World!</h1>
    <p>Ceci est un <strong>paragraphe</strong>.</p>
</body>
</html>

Étape 2 : Créez un fichier style.css (dans le même dossier) :

h1 {
    text-align: center;
    background-color: red;
}
p {
    font-family: Verdana;
    font-style: italic;
    color: green;
}

Étape 3 : Ouvrez index.html dans votre navigateur.

À faire vous-même 4

Expérimentez avec les propriétés CSS suivantes :

color : couleur du texte
background-color : couleur de fond
font-size : taille de police (ex: 20px)
font-weight : graisse (bold, normal)
text-align : alignement (left, center, right)
border : bordure (ex: 1px solid black)

Modifiez votre fichier style.css pour personnaliser votre page.

Écrivez votre code CSS ci-dessous :

À retenir :

CSS gère la mise en forme (couleurs, polices, espacements)
Sélecteur de balise : h1 { ... }
Sélecteur d'id : #monId { ... }
Sélecteur de class : .maClasse { ... }
On lie le CSS avec : <link rel="stylesheet" href="style.css">

Sciences numériques et technologie