Skip to content

Langage CSS

Objectifs

On aborde ici la thématique du Web et particulièrement les principales notions liées aux langages HTML / CSS.

L'objectif ici est de vous faire découvrir comment le style visuel d'une page Web peut être décrit à l'aide des langages HTML / CSS

Le langage CSS

Définition

Le langage CSS (pour Cascading Style Sheets : feuilles de style en cascade) sert à appliquer un style visuel la page HTML : couleurs, taille du texte, positions relatives de blocs, etc...

Les balises de structure

Les balises HTML neutres de structure <div> </div> et <span> </span> servent à regrouper des éléments pour leur appliquer un style visuel (vous verrez cela dans le paragraphe portant sur le langage CSS).

Elément div de structure

  • L'élément div associé aux balises <div> </div> est un élément dit neutre (sans rôle particulier) de type block. On dit que les balises <div> </div> sont des balises de structure.

Elément span de structure

  • L'élément span associé aux balises <span> </span> est un élément dit neutre (sans rôle particulier) de type inline. Les balises <span> </span> sont aussi des balises dites de structure.

Les balises structurantes de l'HTML5

On peut noter la présence, depuis l'HTML 5, de balises permettant de mieux structurer une page Web :

Balises Détails
<header> </header> Section d'introduction du document (en-tête de page)
<main> </main> Contenu principal du body
<footer> </footer> Section de conclusion d'une section (pied de page)
<section> </section> Section générique regroupant un même sujet 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Page HTML </title>
    </head>
    <body>
        <header>
            <h1> Entête </h1>
            <nav> 
                <a href="page1.html"> page 1</a>
                <br/>
                <a href="page2.html"> page 2</a>
            </nav>
        </header>
        <main>
            <section>
            <h2> Section 1 </h2>
            <p> Bla bla bla </p>
            </section>

            <section>
            <h2> Section 2 </h2>
            <p> Blo blo blo </p>
            </section>
        </main>
        <footer> 
            Pied de page
        </footer>
    </body>
</html>

Attributs id et class

Définition

En HTML, il est possible d'ajouter des attributs id et / ou class aux balises.

Exemple :

1
2
3
4
5
6
7
<h1 id="titre">J'aime, j'aime pas</h1>
<div class="aime">La NSI !!</div>
<div class="beurk">Les huîtres</div>
<div class="beurk">Le vide</div>
<div class="aime">Les maths</div>
<div class="aime">Les sciences de l'ingénieur</div>
<div class="aime beurk">Les huîtres en version numérique</div>
  • La valeur d'un attribut id doit être unique dans la page HTML afin d'identifier de façon unique un élément de la page.
  • La valeur d'un attribut class contient un nom (ou plusieurs espacés par des virgules) qui va permettre d'étiqueter autant d'éléments que souhaité dans la page.

La valeur de ces deux attributs sera, entre autre, utilisée afin :

  • de créer si besoin des liens relatifs pointant sur ces identifiants ;
  • d'imposer un style graphique aux éléments associés depuis le langage CSS.

Lien relatif sur un id

Définition

La présence d'attributs id dans les balises permet également de créer si besoin des liens relatifs pointant sur ces identifiants.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Liens vers id</title>
    </head>
    <body>
        <header>
            <nav> 
                <a href="index.html#1"> Vers la section 1</a>
                <br/>
                <a href="index.html#2"> Vers la section 2</a>
            </nav>
        </header>
        <main>
            <section id="1">
            <h2> Section 1 </h2>
            <p> Bla bla bla </p>
            </section>
            <section id="2">
            <h2> Section 2 </h2>
            <p> Blo blo blo </p>
            </section>
        </main>
        <footer> 
            Pied de page
        </footer>
    </body>
</html>

Application

Exercice 2.1

Dans VSCodium :

  • Créer un dossier intitulé Exercice_2_1 en cliquant sur l'icone .

  • Dans le dossier Exercice_2_1, créer un fichier nommé index.html en cliquant sur l'icone .

Copier-coller le code HTML ci-dessous dans le fichier index.html :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Liens vers id</title>
    </head>
    <body>
        <header>
            <nav> 
                <a href="index.html#1"> Vers la section 1</a>
                <br/>
                <a href="index.html#2"> Vers la section 2</a>
            </nav>
        </header>
        <main>
            <section id="1">
            <h2> Section 1 </h2>
            <p> Bla bla bla </p>
            </section>
            <section id="2">
            <h2> Section 2 </h2>
            <p> Blo blo blo </p>
            </section>
        </main>
        <footer> 
            Pied de page
        </footer>
    </body>
</html>

Ouvrir le fichier index.html avec le navigateur Firefox.

A présent, dans VSCodium, modifier le code HTML présent dans le fichier index.html afin d'ajouter deux autres liens relatifs afin d'obtenir le visuel ci-dessous :

Retour au langage CSS

Définition

Le code CSS est le code qui se situe entre les balises <style> </style> (contenues dans l'élément head) :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8"/>
        <title>Titre de la page</title>
        <style>
            #titre{
                background-color : #9F003D;
            }
            .aime{
                color: blue;
            }
            .beurk{
                background-color : red
            }
            p{
                background-color : green;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h1 id="titre">J'aime, j'aime pas</h1>
        <div class="aime">La NSI !!</div>
        <div class="beurk">Les huîtres</div>
        <div class="beurk">Le vide</div>
        <div class="aime">Les maths</div>
        <div class="aime">Les sciences de l'ingénieur</div>
        <div class="aime beurk">Les huîtres en version numérique</div>
        <p>Autre exemple</p>
        Dernier exemple avec l'<span class="aime">élément structurant inline</span> !
    </body>
</html>

Rendu de la page :

Application

Exercice 2.2

Dans VSCodium :

  • Créer un dossier intitulé Exercice_2_2 en cliquant sur l'icone .

  • Dans le dossier Exercice_2_2, créer un fichier nommé index.html en cliquant sur l'icone .

Copier-coller le code HTML ci-dessous dans le fichier index.html :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8"/>
        <title>Titre de la page</title>
        <style>
            #titre{
                background-color : #9F003D;
            }
            .aime{
                color: blue;
            }
            .beurk{
                background-color : red
            }
            p{
                background-color : green;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h1 id="titre">J'aime, j'aime pas</h1>
        <div class="aime">La NSI !!</div>
        <div class="beurk">Les huîtres</div>
        <div class="beurk">Le vide</div>
        <div class="aime">Les maths</div>
        <div class="aime">Les sciences de l'ingénieur</div>
        <div class="aime beurk">Les huîtres en version numérique</div>
        <p>Autre exemple</p>
        Dernier exemple avec l'<span class="aime">élément structurant inline</span> !
    </body>
</html>

Ouvrir le fichier index.html avec le navigateur Firefox.

A présent, dans VSCodium, modifier le code HTML afin d'ajouter un paragraphe associé à l'identifiant para et y ajouter le style suivant :

  • police de couleur blanche (white) ;
  • arrière-plan de couleur bleu (blue).

A présent, dans VSCodium, modifier le code HTML afin d'ajouter deux paragraphes associés à la classe para_italique et y ajouter le style suivant :

  • police en italique (à l'aide de la propriété font-style: italic;)

A présent, dans VSCodium, modifier le code HTML afin de modifier la couleur du titre. Pour cela voici ici un selecteur de couleur permettant d'obtenir le code hexadécimal de la couleur souhaitée (genre #D6F12C).

Règle CSS

Définition

Une règle CSS est caractérisée par deux principaux éléments :

  • Un sélecteur de balises permettant de préciser à quelles balises du document le style s'applique ;
  • Une déclaration de style, définie entre accolades, permettant de préciser le style à appliquer aux balises sélectionnées sous la forme de couples propriété / valeur.

A noter :

  • un symbole # dans le sélecteur fait référence à un attribut id ;
  • un symbole . dans le sélecteur fait référence à un attribut class.

La description des règles du code CSS est donnée ci-dessous :

La règle CSS ci-dessous indique que l'élément associé à l'id de valeur titre a une couleur d'arrière-plan spécifique (ici vert clair).

#titre{
    background-color : #9F003D; 
}

A noter qu'ici la couleur est ici décrite en hexadécimal sous la forme de trois octets décrivant respectivement les composantes rouge, verte et bleue de la couleur souhaitée.

La règle CSS ci-dessous indique que l'ensemble des éléments associés à la class de valeur aime ont une couleur de police bleue.

.aime{
    color: blue;
}

La règle CSS ci-dessous indique que l'ensemble des éléments associés à la class de valeur beurk ont une couleur d'arrière-plan rouge :

.beurk{
    background-color : red
}

La règle CSS ci-dessous indique que tous les éléments p ont un arrière-plan vert et un texte en gras :

p{
    background-color : green;
    font-weight: bold;
}

Application

Exercice 2.3

Dans VSCodium :

  • Créer un dossier intitulé Exercice_2_3 en cliquant sur l'icone .

  • Dans le dossier Exercice_2_3, créer un fichier nommé index.html en cliquant sur l'icone .

Copier-coller le code HTML / CSS ci-dessous dans le fichier index.html.

Compléter ce code HTML / CSS ci-dessous afin de lui appliquer le style visuel ci-dessous.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Page HTML</title>
        <style>
            ...

            #section2{
                background-color: yellow
            }
            footer{
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <header class="entete">
            <h1 class="niveau1">Entête</h1>
            <nav> 
                <a href="page1.html"> page 1</a>
                <br/>
                <a href="page2.html"> page 2</a>
            </nav>
        </header>
        <main>
            <section id="section1">
            <h2>Section 1</h2>
            <p>Bla bla bla</p>
            </section>

            <section id="section2">
            <h2>Section 2</h2>
            <p>Blo blo blo</p>
            </section>
        </main>
        <footer> 
            Pied de page
        </footer>
    </body>
</html>

Dans VSCodium :

  • Dans le dossier Exercice_2_3, créer un fichier nommé page1.html et un fichier nommé page2.html en cliquant sur l'icone .

Ouvrir le fichier index.html avec le navigateur Firefox. Vérifier le bon fonctionnement des deux liens hypertextes.

Feuille de style CSS

Définition

Il est possible d'appliquer ce style à d'autres pages d'un site en isolant le code CSS dans un fichier dédié (ici le fichier style.css nommé feuille de style) puis en utilisant la balise orpheline <link href="..." rel="stylesheet" type="text/css"/> dans l'entête de toutes les pages HTML du site.

Exemple de fichier CSS :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
#titre{
    background-color : #9F003D;
}

.aime{
    color: blue;
}

.beurk{
    background-color : red
}

p{
    background-color : green;
    font-weight: bold;
}

Fichier HTML associé :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8"/>
        <title>Titre de la page</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>
    </head>     
    <body>
        <h1 id="titre">J'aime, j'aime pas</h1>
        <div class="aime">La NSI !!</div>
        <div class="beurk">Les huitres</div>
        <div class="beurk">Le vide</div>
        <div class="aime">Les maths</div>
        <div class="aime">Les sciences de l'ingénieur</div>
        <div class="aime beurk">Les huitres en version numérique</div>
        <p>Autre exemple</p>
        Dernier exemple avec l'<span class="aime">élément structurant inline</span> !
    </body>
</html>

Application

Exercice 2.4

Dans VSCodium :

  • Créer un dossier intitulé Exercice_2_4 en cliquant sur l'icone .

  • Dans le dossier Exercice_2_4, créer un fichier nommé index.html et un fichier nommé style.css en cliquant sur l'icone .

Isoler le code CSS de la page HTML/CSS dessous dans le fichier style.css. Ajouter la balise orpheline <link href="style.css" rel="stylesheet" type="text/css"/> dans le fichier index.html.

Ouvrir le fichier index.html avec le navigateur Firefox afin de vérifier si le style visuel imposé par le code CSS est bien appliqué à la page Web.

Code Html/Css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Page HTML</title>
        <style>
            .entete{
                font-weight: bold;
            }
            .niveau1{
                color: blue;
                background-color: red;
            }
            #section1{
                background-color: cyan
            }
            #section2{
                background-color: yellow
            }
            h2{
                font-weight: bold;
                font-style: italic;
            }
            footer{
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <header class="entete">
            <h1 class="niveau1">Entête</h1>
            <nav> 
                <a href="page1.html"> page 1</a>
                <br/>
                <a href="page2.html"> page 2</a>
            </nav>
        </header>
        <main>
            <section id="section1">
            <h2>Section 1</h2>
            <p>Bla bla bla</p>
            </section>

            <section id="section2">
            <h2>Section 2</h2>
            <p>Blo blo blo</p>
            </section>
        </main>
        <footer> 
            Pied de page
        </footer>
    </body>
</html>

Exemples de propriétés CSS

Voici, ci-dessous, une liste clairement non exhaustive de certaines propriétés CSS et les valeurs possibles associées.

Il existe beaucoup d'autres propriétés (voir ici par exemple), ce cours ne se veut volontairement pas exhaustif, car le programme de SNT ne l'impose pas.

Propriétés Exemples de valeur Description
color #00ff00 couleur du texte
green couleur du texte
background-color #ff0000 couleur de fond
red couleur de fond
rgb(255,0,0) couleur de fond
border-width 3px épaisseur du trait de bordure
border-style dotted trait de bordure en pointillés
solid trait de bordure plein
dashed trait de bordure en discontinu
border-color #00ff00 couleur de bordure
border 1px dashed red bordure trait discontinu couleur rouge 1px d'épaisseur
font-weight normal graisse de police normal
light graisse de police fine
bold graisse de police gras
font-style normal style normal
italic style italique
font-family sans-serif
avec-serif
text-align center texte centré
left texte gauche
right texte droite
justify texte centré
font-size 20px taille de référence de 20px
3rem 3 fois la taille de référence
margin 5px 5 pixels de marge
padding 3px 3 pixels d'écart

Taille de police

Définition

En ce qui concerne la taille de police des textes présents dans une page, il est possible :

  • d'imposer une taille de police de référence à la page (ici à la ligne 8, on impose une taille de 30px pour la taille de police de référence) différente de celle par défaut (qui est de 16px).
  • puis de choisir la taille de police des autres éléments relativement à cette taille de référence (ici à la ligne 11, on spécifie que les éléments div comporteront des textes en police 3rem soit 3 plus grande que la police de référence).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Taille de police</title>
    <style>
        body{
            font-size: 30px /* 30px : taille de référence de la police de la page */
        }
        div{
            font-size: 3rem; /* taille 3 fois plus grande que la taille de référence */
        }
    </style>
</head>
<body>
    bla bla
    <div>blo blo</div>
</body>
</html>

Application

Exercice 2.5

Comprendre et tester le code précédent.

Modifier le code précédent afin d'ajouter une balise div dont la police est 5 fois plus grande que la taille de référence.

Margin / Padding

Définition

Tous les éléments HTML sont constitués d'une "boite rectangulaire" qui permet de délimiter son contenu et son éloignement avec d'autres éléments HTML.

Sur la représentation ci-dessus :

  • le cadre noir le plus intérieur correspond au contenu de l'élément ;
  • le cadre rouge est la bordure de l'élément (que le code CSS peut permettre de faire apparaître) ;
  • le cadre noir le plus extérieur correspond à zone à partir de laquelle un autre élément pourra être présent.

La zone entre le contenu et la bordure est la zone d'ajustement que la propriété padding permet de modifier.

La zone au-delà de la bordure est la zone de marge que la propriété margin permet de modifier.

Il est possible grâce aux propriétés comme padding-top, margin-left, etc... de ne modifier qu'une des composantes de la zone d'ajustement ou de marge.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Propriétés margin / padding</title>
    <style>
        body{
            border: 2px dotted black;   /* bordure continue noire de 2px d'épaisseur */
        }
        .zone{
            border: 3px solid red;      /* bordure continue noire de 2px d'épaisseur */
            margin : 10px;              /* marge de 10px en hauteur et largeur */
            padding: 20px;              /* ajustement de 20px entre la bordure et le contenu de la balise */
        }
        .element{
            border: 2px dotted black;   /* bordure pointillée noire de 2px d'épaisseur */
        }
    </style>
</head>
<body>
    <div class="zone">
        <div class="element">
            bla bla
        </div> 
    </div>
</body>
</html>

Application

Exercice 2.6

Comprendre et tester le code précédent.

Compléter le code HTML / CSS ci-dessous afin d'obtenir le visuel souhaité (remarque les propriétés margin et padding auront ici des valeurs de 0px, 10px ou de 20px.

Code HTML / CSS

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Propriétés margin / padding</title>
    <style>
        ...
    </style>
</head>
<body>
    <div class="zone">
        <div class="element">
            bla bla
        </div>
        <div class="element2">
            blo blo
        </div>
        ...
    </div>
</body>
</html>

Rendu visuel attendu

Grille

Définition

Le code CSS permet aussi de positionner des éléments sur une grille :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Mise en place d'une grille</title>
    <style>
        body{
            border: 2px dotted black;   /* bordure pointillée noire de 2px d'épaisseur */
            width: 80%;                 /* le corps de la page occupe 80% de la largeur du navigateur*/
            margin: 10px auto;          /* marge de 10px en hauteur et automatique en largeur */
        }
        .zone{
            border: 3px solid red;
            margin : 10px;
            padding: 20px;

            display: grid;              /* le sélecteur "zone" fait office de grille */
            grid-template-columns: 25% 50% 25%; /* la grille se compose de 3 colonnes :
                                                    - une de largeur 25% 
                                                    - une de largueur 50%
                                                    - une de largeur 25% */
        }
        .element{
            border: 2px dotted black;   /* bordure pointillée noire de 2px d'épaisseur */
            margin-bottom : 5px;        /* marge de 10px en bas */
            padding: 20px;              /* ajustement de 20px entre la bordure et le contenu de la balise */
        }
    </style>
</head>

<body>
<div class="zone">
    <div class="element">
        Zone 1
        <p>bla bla</p>
    </div> 
    <div class="element">
        Zone 2
        <p>bli bli</p>
    </div>
    <div class="element">
        Zone 3
        <p>blo blo</p>
    </div>
    <div class="element">
        Zone 4
        <p>blu blu</p>
    </div>
</div>

</body>
</html>

L'élément div associé à la classe zone possède :

  • la propriété display: grid ce qui signifie que les éléments que contient cet élément div (ici les éléments div associés à la classe élément) seront affichés suivant un principe de grille, chacun correspondant à une cellule de la grille.
  • la propriété grid-template-columns: 25% 50% 25% qui signifie que les lignes de la grille seront composées de 3 cellules (la première d'une largeur de 25% du conteneur, la seconde d'une largeur de 50% du conteneur et la dernière de 25% de la largeur du conteneur). Dans l'exemple, seules quatre cellules apparaissent au total, car l'élément div associé à la classe zone ne contient que 4 éléments.

Application

Exercice 2.7

Comprendre et tester le code précédent.

Modifier le code ci-dessous afin de créer une grille de 5 colonnes en faisant apparaître 12 cellules avec le texte Cellule X (X étant le numéro de la cellule) selon le rendu visuel ci-dessous :

Remarque : La propriété margin-left devra aussi être utilisée.

Rendu visuel attendu

Code à modifier

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Mise en place d'une grille</title>
    <style>
        body{
            width: 80%;
            margin: 10px auto;
        }
        .zone{
            border: 3px solid red;
            margin : 10px;
            padding: 20px;

            display: grid;
            grid-template-columns: 25% 50% 25%;
        }
        .element{
            border: 2px dotted black;
            margin-bottom : 5px;
            padding: 20px;
        }
    </style>
</head>

<body>
<div class="zone">
    <div class="element">
        Zone 1
    </div> 
    <div class="element">
        Zone 2
    </div>
    <div class="element">
        Zone 3
    </div>
    <div class="element">
        Zone 4
    </div>
    <div class="element">
        Zone 5
    </div>
    <div class="element">
        Zone 6
    </div>
    <div class="element">
        Zone 7
    </div>
</div>

</body>
</html>

Exercice 2.8

Proposer un code CSS permettant d'obtenir le rendu visuel ci-dessous à partir du code HTML suivant :

Code HTML

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Grille dans une grille</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>
    </head>

    <body>
        <div class="grille_principale">

        <div class="element">
        Bla bla bla
        </div>

        <div class="grille">
            <div class="element">
                Blo blo blo
            </div>
            <div class="element">
                Blo blo blo
            </div>
            <div class="element">
                Blo blo blo
            </div>
            <div class="element">
                Blo blo blo
            </div> 
        </div>
        </div>
    </body>
</html>

Rendu visuel attendu

Code CSS à compléter

html{
    font-family: sans-serif;
    font-size: 12px;
}

body{           
    width: 80%;
    margin: auto;
}

.grille_principale{
    ...
}

.grille{
    ...
}

.element{
    ...
}