PhpBB Lab Académie

Comprendre le rôle de CSS par rapport à HTML, créer une première feuille de style externe, la relier aux trois pages du site construit dans le cours HTML et écrire une première règle CSS en identifiant clairement le sélecteur, la propriété et la valeur.

Avant de commencer

Vous avez terminé le cours HTML.

À la fin de ce cours, vous avez construit un petit site composé de plusieurs fichiers :

mon-premier-site

index.html
apropos.html
contact.html
ordinateur.jpg

Votre page d’accueil contient notamment :

- une navigation ;
- plusieurs sections ;
- des notes de progression ;
- une image ;
- un tableau.

Votre page de contact contient également le formulaire construit dans le cours HTML.

Jusqu’à présent, nous avons volontairement laissé la présentation visuelle de côté.

Le rôle du cours HTML était de construire une base correctement structurée avant de penser à son apparence.

Nous allons maintenant poursuivre exactement le même projet avec CSS.

Dans cette première leçon, nous allons répondre à quatre questions :

- Qu’est-ce que CSS ?
- Quel est son rôle par rapport à HTML ?
- Comment créer une feuille de style ?
- Comment appliquer une première règle CSS à notre site ?

À la fin de cette leçon, vous aurez créé votre premier fichier CSS et relié cette feuille de style aux trois pages déjà construites.

1. Qu’est-ce que CSS ?

CSS est le langage utilisé pour définir la présentation d’une page web.

Son nom complet est :

Cascading Style Sheets

Vous n’avez pas besoin de mémoriser immédiatement cette expression anglaise.

Retenez surtout ceci :

HTML = structure et sens du contenu

CSS = présentation du contenu

Dans le cours HTML, nous avons utilisé des éléments comme :

h1
p
ul
nav
section
article
img
table
form

Ces éléments décrivent le rôle du contenu.

CSS va maintenant nous permettre d’agir sur leur présentation.

Nous pourrons par exemple modifier progressivement :

- les couleurs ;
- les polices ;
- les espacements ;
- les dimensions ;
- les bordures ;
- la disposition des éléments ;
- l’adaptation du site aux différentes tailles d’écran.

2. CSS ne remplace pas HTML

Prenons le titre principal de la page d’accueil :

<h1>Accueil</h1>

HTML indique que :

Accueil

est le titre principal de cette page.

CSS ne doit pas modifier ce rôle.

Même si nous changeons sa couleur, sa taille ou son espacement, cet élément restera :

h1

Nous pouvons donc distinguer :

HTML indique ce qu’est le contenu.

CSS indique comment ce contenu est présenté.

Cette séparation est importante.

Elle nous permettra de modifier l’apparence du site tout en conservant la structure construite dans le cours précédent.

3. Créer notre première feuille de style

Ouvrez le dossier :

mon-premier-site

Vous devez déjà y retrouver :

index.html
apropos.html
contact.html
ordinateur.jpg

Nous allons maintenant créer un nouveau fichier dans ce même dossier.

Nommez-le :

styles.css

Votre dossier contient donc maintenant :

mon-premier-site

index.html
apropos.html
contact.html
ordinateur.jpg
styles.css

L’extension :

.css

indique qu’il s’agit d’un fichier CSS.

Pour le moment, laissez ce fichier vide.

Nous allons d’abord relier la feuille de style à notre page d’accueil.

4. Relier index.html à styles.css

Ouvrez :

index.html

Dans le cours HTML, vous avez appris que :

head

contient notamment des informations destinées au navigateur.

Votre page possède déjà une structure de ce type :

<head>
    <meta charset="utf-8">
    <title>Accueil - Mon premier site HTML</title>
</head>

Nous allons ajouter une nouvelle ligne :

<link rel="stylesheet" href="styles.css">

Le bloc devient :

<head>
    <meta charset="utf-8">
    <title>Accueil - Mon premier site HTML</title>
    <link rel="stylesheet" href="styles.css">
</head>

Cette ligne indique au navigateur qu’il doit utiliser :

styles.css

pour la présentation de cette page.

5. Comprendre l’élément link

Regardons cette ligne :

<link rel="stylesheet" href="styles.css">

L’élément :

link

permet ici de relier le document HTML à une ressource extérieure.

Nous utilisons deux attributs :

rel="stylesheet"

et :

href="styles.css"

La partie :

rel="stylesheet"

indique que la ressource liée est une feuille de style.

Vous pouvez retenir :

stylesheet = feuille de style

La partie :

href="styles.css"

indique où se trouve le fichier CSS.

6. Retrouver le principe des chemins relatifs

Vous avez déjà utilisé :

href

dans le cours HTML pour relier les différentes pages du site.

Par exemple :

<a href="contact.html">Contact</a>

fonctionne parce que :

index.html

et :

contact.html

se trouvent dans le même dossier.

Nous utilisons exactement le même principe ici.

Comme :

index.html

et :

styles.css

sont placés dans le même dossier, nous pouvons simplement écrire :

href="styles.css"

Nous réutilisons donc une notion déjà apprise dans le cours HTML.

7. Relier les trois pages à la même feuille CSS

Notre site possède trois pages principales :

index.html
apropos.html
contact.html

Nous voulons qu’elles utilisent la même présentation.

Ajoutez donc également :

<link rel="stylesheet" href="styles.css">

dans le

head

de :

apropos.html

puis dans celui de :

contact.html

Les trois pages chargent maintenant le même fichier CSS.

Nous pourrons ainsi définir une règle une seule fois et l’utiliser sur plusieurs pages.

8. Écrire notre première règle CSS

Ouvrez maintenant :

styles.css

Écrivez :

h1 {
    color: darkblue;
}

Enregistrez le fichier.

Ouvrez ensuite :

index.html

ou actualisez la page si elle est déjà affichée dans votre navigateur.

Le titre :

Accueil

doit maintenant apparaître en bleu foncé.

La structure HTML n’a pas changé.

Nous avons uniquement modifié la présentation du

h1

.

9. Vérifier les trois pages

Ouvrez maintenant :

apropos.html

Son titre principal est :

À propos

Il doit lui aussi apparaître en bleu foncé.

Ouvrez ensuite :

contact.html

Le titre :

Contact

doit utiliser la même couleur.

Nous avons écrit une seule règle :

h1 {
    color: darkblue;
}

Elle peut pourtant s’appliquer aux trois pages parce qu’elles utilisent toutes la même feuille :

styles.css

10. Comprendre le sélecteur

Reprenons :

h1 {
    color: darkblue;
}

La partie :

h1

est appelée le :

sélecteur

Le sélecteur indique quels éléments sont concernés par la règle.

Ici :

h1

signifie :

cette règle concerne les éléments h1

Dans notre site, cela concerne les titres principaux :

Accueil
À propos
Contact

11. Comprendre les accolades

Après le sélecteur, nous trouvons :

{
}

Les accolades contiennent les déclarations de la règle.

Nous pouvons donc lire :

Pour les éléments h1, applique les déclarations placées entre les accolades.

12. Comprendre la propriété et la valeur

À l’intérieur des accolades, nous avons :

color: darkblue;

La propriété est :

color

Elle indique ce que nous voulons modifier.

Ici :

color = couleur du texte

La valeur est :

darkblue

Elle indique la couleur choisie.

Nous avons donc :

color = propriété

darkblue = valeur

13. Les deux-points et le point-virgule

Dans :

color: darkblue;

la propriété et la valeur sont séparées par :

:

La déclaration se termine par :

;

La structure générale est donc :

propriété: valeur;

Nous prendrons l’habitude d’écrire le point-virgule à la fin de chaque déclaration.

Cela sera particulièrement utile lorsque nous ajouterons plusieurs déclarations dans une même règle.

14. Décomposer notre première règle

Nous pouvons maintenant lire :

h1 {
    color: darkblue;
}

de cette manière :

h1 = sélecteur

{ } = bloc de déclarations

color = propriété

darkblue = valeur

: = séparation entre propriété et valeur

; = fin de la déclaration

Vous connaissez maintenant le rôle de chaque partie de cette première règle CSS.

15. Modifier la valeur

Nous allons maintenant faire une petite vérification.

Remplacez temporairement :

darkblue

par :

green

La règle devient :

h1 {
    color: green;
}

Enregistrez :

styles.css

puis actualisez la page.

Le titre doit maintenant apparaître en vert.

Remettez ensuite :

darkblue

puis enregistrez à nouveau.

Nous avons conservé :

h1

comme sélecteur.

Nous avons conservé :

color

comme propriété.

Nous avons uniquement modifié la valeur.

16. Si la règle ne semble pas fonctionner

Si le titre ne change pas de couleur, vérifiez dans cet ordre :

1. le fichier s’appelle-t-il exactement :

styles.css

2. se trouve-t-il dans le même dossier que les pages HTML ?

3. la page contient-elle :

<link rel="stylesheet" href="styles.css">

dans son

head

?

4. le fichier

styles.css

a-t-il été enregistré ?

5. la page a-t-elle été actualisée ?

6. la règle contient-elle correctement :

h1 {
    color: darkblue;
}

Comme dans le cours HTML, vérifiez un élément à la fois.

Il est plus facile de trouver une erreur en procédant méthodiquement qu’en modifiant plusieurs choses en même temps.

17. La structure HTML reste notre base

Nous avons maintenant commencé à modifier l’apparence du site.

Mais rien de ce que nous avons construit dans le cours HTML ne doit disparaître.

Nous conservons notamment :

- la hiérarchie des titres ;
- les éléments

header

,

nav

,

main

et

footer

;
- les sections et les articles ;
- les textes des liens ;
- les textes alternatifs des images ;
- la structure du tableau ;
- les labels du formulaire ;
- les relations entre

for

et

id

;
- les éléments

fieldset

et

legend

.

CSS vient compléter cette structure.

Il ne doit pas la remplacer.

18. Ce que vous devez comprendre avant la prochaine leçon

Vous devez maintenant être capable d’expliquer :

- à quoi sert CSS ;
- la différence entre le rôle de HTML et celui de CSS ;
- ce qu’est un fichier

.css

;
- comment relier une feuille CSS à une page HTML ;
- pourquoi les trois pages peuvent utiliser le même fichier

styles.css

;
- ce qu’est un sélecteur ;
- ce qu’est une propriété ;
- ce qu’est une valeur ;
- le rôle des accolades ;
- le rôle des deux-points ;
- le rôle du point-virgule.

Retenez surtout :

HTML décrit le sens et la structure du contenu.

CSS contrôle sa présentation.

Nous avons commencé cette leçon avec le site construit dans le cours HTML.

Nous terminerons également le cours CSS avec ce même site, progressivement mis en forme.

Dans la prochaine leçon, nous continuerons dans :

styles.css

et nous apprendrons à cibler plus précisément les éléments déjà présents dans nos pages.

Reprenons le début de la page d’accueil construite dans le cours HTML.

Son

head

contient maintenant :

<head>
    <meta charset="utf-8">
    <title>Accueil - Mon premier site HTML</title>
    <link rel="stylesheet" href="styles.css">
</head>

La même ligne :

<link rel="stylesheet" href="styles.css">

est également ajoutée dans :

apropos.html

et :

contact.html

Dans :

styles.css

nous écrivons :

h1 {
    color: darkblue;
}

Cette règle cible les éléments :

h1

déjà présents dans les trois pages.

Le navigateur peut donc appliquer la même couleur aux titres :

Accueil
À propos
Contact

La structure HTML reste identique.

Nous avons uniquement ajouté une règle de présentation dans un fichier CSS partagé par les trois pages.

Vous allez maintenant refaire les étapes essentielles de cette première leçon sur le site construit dans le cours HTML.

1. Vérifier le dossier du projet

Votre dossier doit déjà contenir :

mon-premier-site

index.html
apropos.html
contact.html
ordinateur.jpg

Ajoutez dans ce même dossier :

styles.css

2. Relier les trois pages

Dans le

head

de

index.html

, ajoutez :

<link rel="stylesheet" href="styles.css">

Ajoutez ensuite exactement la même ligne dans :

apropos.html

et :

contact.html

3. Écrire la première règle

Dans

styles.css

, écrivez :

h1 {
    color: darkblue;
}

Enregistrez le fichier.

4. Vérifier le résultat

Ouvrez successivement :

index.html
apropos.html
contact.html

Vérifiez que les titres principaux :

Accueil
À propos
Contact

utilisent tous la même couleur.

5. Tester une autre valeur

Remplacez temporairement :

darkblue

par :

green

Enregistrez puis actualisez une page.

Remettez ensuite :

darkblue

et enregistrez à nouveau.

6. Expliquer ce que vous avez fait

Sans regarder la correction, expliquez avec vos propres mots :

1. pourquoi les trois pages peuvent utiliser le même fichier

styles.css

;
2. ce que représente

h1

dans la règle ;
3. ce que représente

color

;
4. ce que représente

darkblue

;
5. pourquoi le fait de modifier la couleur du titre ne change pas son rôle de

h1

.

CSS est le langage utilisé pour définir la présentation d’une page web.

Dans cette leçon, nous avons poursuivi le site construit dans le cours HTML sans créer de nouveau projet.

Nous avons ajouté :

styles.css

dans le même dossier que :

index.html
apropos.html
contact.html
ordinateur.jpg

Les trois pages chargent cette feuille avec :

<link rel="stylesheet" href="styles.css">

Nous avons ensuite écrit notre première règle :

h1 {
    color: darkblue;
}

Dans cette règle :

h1 = sélecteur
color = propriété
darkblue = valeur

Les accolades contiennent les déclarations.

Les deux-points séparent la propriété de sa valeur.

Le point-virgule termine la déclaration.

Le principe central reste :

HTML décrit le sens et la structure du contenu.

CSS contrôle sa présentation.

Dans la prochaine leçon, nous continuerons avec le même site et le même fichier

styles.css

pour apprendre à cibler plus précisément les éléments déjà présents dans nos pages.