AI Corrigé : TP2-CSS

Ce document est une correction l'exercice 1 du TP N°2 d'introduction aux CSS.

Le fichier tp02_CSS_correction.zip, que vous pouvez télécharger et décompressez sur votre compte contient une solution complète répondant à toutes les questions.

Ce document reprend les différentes questions du TP et pour chacune d'elles vous pouvez accéder à un corrigé en cliquant sur le bouton correspondant.

Partie 1: découverte des CSS

Le but de cet exercice est "d'habiller" progressivement un page HTLM avec des styles CSS pour passer progressivement d'un affichage "brut" sans mise en forme autre que celle appliquée automatiquement par le navigateur, à un affichage "stylé" contrôlé par vos styles CSS.

Exercice 1: styler tous les éléments d'un même type.

On veut "styler" la page afin d'obtenir les effets suivants (voir figure 2):

un fond simulant un effet parchemin,
les titres de niveau 1 centrés sur la page,
les titres de niveau 2 de couleur bleue sur fond doré (identifiant de couleur goldenrod),
le texte des paragraphes justifié (aligné) à gauche et à droite, avec un retrait de 16 pixels au début de chaque paragraphe.

Résultat de la décompression du fichier tp02_CSS.zip — Figure 2 : application d'un première feuille de styles au fichier `index.html`

Dotez la page index.html de styles CSS afin d'obtenir un affichage identique à celui présenté sur la figure 2. Dans un premier temps vous utiliserez des styles internes à la page (définis dans un élement <style> dans l'en tête de la page).

Essayez de trouvez une solution par vous-mêmes. Sinon, si vous souhaitez avoir quelques indications sur une manière de procéder, cliquez sur ce bouton:

Pour définir une feuille de styles interne à la page voir le paragraphe Internal style sheet de la page How To Add CSS du tutorial CSS de w3schools.com.

Pour appliquer un style à tous les éléments d'un même type dans une page on utilisera un sélecteur de balise (ou sélecteur d'élement). Voir la partie CSS Selectors du tutorial CSS de w3schools.com.

Pour définir une image ou couleur de fond : CSS Backgrounds du tutorial CSS de w3schools.com.

Pour l'alignement, la justification ou l'identation du texte vous pourrez vous référer aux propriétés : text-align et text-indent.

Il faut appliquer une image de fond à tout le document. On utilise le sélecteur body avec la propriété background-image.
Pour les titres de niveau 1 (h1) et 2 (h2) on utilise respectivement les propriétés:
- text-align pour centrer le texte des titres 1,
- color et background-colorpour définir la couleur du texte et la couleur du fond de titres 2.
Pour les paragraphes p on utilise les propriétés text-align pour la justification et text-indent pour le retrait.

Pour définir les styles, on choisi pour le moment d'utiliser une balise style dans l'en-tête de la page (dans l'élément <head>).


<head>
    ...
    <style>
        /*
         * sélecteurs d'éléments HTML. Les styles s'appliquent à tous les élements.
         */
        body {
            background-image: url("images/parchemin2.jpg");
        }
        h1 {
            text-align: center;
        }
        h2 {
            color: blue;
            background-color: goldenrod;
        }
        p {
            text-indent: 16px;
            text-align: justify;
        }                                    
    </style> 
</head>

Exercice 2: styler un ensemble d'élements

On souhaite mettre en évidence certains paragraphes du texte en les surlignant avec une couleur jaune comme le montre la figure 3.

surlignage de paragraphes — Figure 3 : application d'un style surlignant certains paragraphes.

Modifiez votre feuille de style en conséquence afin d'obtenir cet effet.

Pour appliquer un style à un ensemble d'éléments, vous pouvez utiliser un sélecteur de classe (voir la partie CSS Selectors du tutorial CSS de w3schools.com).

On définit un style de nom .surligné que l'on applique avec l'attribut class aux paragraphes concernés.

Dans l'élément style de la partie head du document HTML on rajoute la règle


/*
 * sélecteur de classe, les styles ne s'applique que aux éléments ayant la classe
 * de style comme attribut.
 */
.surligne {
    background-color: yellow;
}

Pour indiquer qu'il s'agit d'une classe le nom du style dans sa déclaration est précédé d'un ., ensuite dans le corps du document (body) les éléments auxquels lestyle doit appliqué sont dotés d'un attribut class faisant référence au nom du style (sans le .).

<body>
        <h1>Lorem ipsum dolor</h1>
        <p class="surligne">Ultricies est pellentesque integer a aliquam euismod varius tempor.
            Nunc a eget justo vestibulum curabitur vel dolor molestie. Con elit ipsum. Pretium quis ultrices.
        </p>
        <p>Rhoncus cras sit tellus lacinia cursus. ... 
        </p>
        <h2>Sit amet nisl sed elit et</h2>
        <p>Justo felis a. ...
        </p>
        <p class="surligne">Mauris integer tempor urna pellentesque commodo sagittis libero maecenas. 
            Sed adipiscing suscipit felis ac scelerisque. Purus nec massa consequat aenean dolor. 
            Eu velit a.
        </p>
        <h1>Nulla interdum nam</h1>
        ...

Exercice 3: à propos des balises `<span>` et `<div>`

Question 1: Modifiez votre fichier index.html en encadrant la phrase "Ut cursus ut." du deuxième paragraphe à l'aide d'une balise <span>.

Rechargez la page index.html dans votre navigateur. Que constatez vous ?

A votre avis quelle peut être l'utilité cette balise ?

La balise span du tutorial HTML de w3schools.com.

Il n'y a aucune modification lors de l'affichage. La balise span sert à délémiter des éléments en ligne afin de pouvoir leur appliquer ensuite un style particulier.

...
            <p>Rhoncus cras sit tellus lacinia cursus. 
                <span>Ut cursus ut</span>.
                Sit suscipit  a facilisi nullam praesent. Tellus dignissim nulla
                quis purus suspendisse.  
                Tristique mollis morbi sed massa nulla
                cras ac egestas dolores donec erat.  Placerat sed mauris.
                A nihil mauris. Blandit nulla adipiscing. 
            </p>
...

A l'instar de ce qui a été effectué lors de l'exercice 2, on souhaite non seulement pouvoir surligner des paragraphes, mais également des portions de texte quelconques (phrases ou suites de mots), comme le montre la figure 4.

surlignage de portions de texte — Figure 4 : surlignage de portion de texte quelconques.

Question 2: Effectuez les modifications nécessaires afin d'obtenir cet effet.

Utilisez des balises <span> pour délimiter les portions de texte auxquelles vous appliquerez la classe de style définie à l'exercice 2.

il suffit de délimiter les portions de texte à surligner avec des balises span et de leur appliquer la classe de style surligne définie à l'exercice 2.


    <body>
        <h1>Lorem ipsum dolor</h1>
        <div id="cadre1">
            <p class="surligne">Ultricies est pellentesque integer a aliquam
                euismod varius tempor. Nunc a eget justo vestibulum curabitur ve
                l dolor molestie. Con elit ipsum. Pretium quis ultrices.
            </p>
            <p>Rhoncus cras sit tellus lacinia cursus. 
                <span class="surligne">Ut cursus ut</span>.
                Sit suscipit  a facilisi nullam praesent. Tellus dignissim nulla
                quis purus suspendisse.  
                Tristique mollis morbi sed massa <span class="surligne">nulla
                cras</span> ac egestas dolores donec erat.  Placerat sed mauris.
                A nihil mauris. Blandit nulla adipiscing. 
            </p>
            ...

Question 3: Faites en sorte que les deux premiers paragraphes de la dernière partie (Libero curabitur consectetuer...) du document soit eux aussi surlignés. Attention, on ne veut pas que le surlignage s'applique indépendamment à chacun des paragraphes comme sur la figure 5, mais à un bloc regroupant ceux-ci comme sur la figure 6.

Figure 5 : surlignage de deux paragraphes.

Figure 6 : surlignage d'un bloc regroupant deux paragraphes.

Utilisez une balise div pour encadrer les deux paragraphes et appliquez lui la classe de style que vous avez précédemment définie pour le surlignage.

De la même manière que l'on a utilisé des balises span pour délimiter les portions de texte en ligne à surligner à l'intérieur des paragraphes, on utilise un élement bloc de type div pour regrouper les deux paragraphes en un même bloc, bloc que l'on pourra styler en lui appliquant la classe surligne.


    <body>
        ...
        <h2>Libero curabitur consectetuer aliquam autem vestibulum</h2>
        <div class="surligne">
            <p>Sodales quisque ipsum vehicula ligula metus id enim cursus. 
                Lacus elit amet. Consectetuer sapien a eget non felis tortor tristique
                justo. Mi mi nulla. Maecenas in quisque.
                Tempor tempus lacus. 
            </p>
            <p>
                Nec rhoncus laoreet pellentesque eget vehicula nulla libero massa.
                Nec id accumsan. Id amet sagittis. Nec sit quam. Eleifend nibh magna.
            </p>
        </div>
        <p>
            Bibendum commodo dolor odio tristique justo lacus vestibulum turpis
            pretium proin vestibulum ut id sem. 
            Consequat gravida nulla velit tempor commodo cubilia blandit.
        </p>
    </body>

Exercice 4: styler un élément particulier

On souhaite modifier l'affichage de manière à ce que les deux premiers paragraphes soient (figure 7)

dans un cadre de fond gris dont le bord est un trait plein noir.
en italique avec une police deux fois plus petite que le texte normal

encadrement de portions de texte. — Figure 7 : particularisation des paragraphe de début du document.

Question 1: Effectuez les modifications nécessaires afin d'obtenir cet effet.

Utilisez une balise div pour encadrer les deux paragraphes, que vous doterez d'un identifiant (attribut id). Définissez ensuite un style pour cet identifiant (voir Sélecteurs de styles dans le cours css de w3schools).

Pour définir une bordure utiliser les propriétes borders.

Pour définir la taille et le style de la police de caractères, utilisez les propriétés font-style et font-size (voir le chapitre CSS fonts du tutorial w3schools).

On utilise un élement bloc de type div pour regrouper les deux paragraphes en un même bloc, élément auquel on associé un attribut id avec par exemple la valeur "cadre1". Pour stylerce bloc, on défini un style de nom #cadre1 avec les propriétés :

border-style pour définir la bordure du cadre.
background-color pour définir la couleur du fond du cadre.
font-style et font-size pour définir le style et la taille du texte.

Le style:

/*
 * sélecteur par identifiant
 */
#cadre1 {
    border-style: solid;
    font-style: italic;
    font-size: 0.5em;
    background-color: rgb(210,210,210);
}

Le code HTML


...
</head>
    <body>
        <h1>Lorem ipsum dolor</h1>
        <div id="cadre1">
            <p class="surligne">Ultricies est pellentesque integer a aliquam
                euismod varius tempor.  Nunc a eget justo vestibulum curabitur
                vel dolor molestie. Con elit ipsum.
                Pretium quis ultrices.
            </p>
            <p>Rhoncus cras sit tellus lacinia cursus. 
                <span class="surligne">Ut cursus ut</span>.Sit 
                suscipit a facilisi nullam praesent.
                Tellus dignissim nulla quis purus suspendisse.  
                Tristique mollis morbi sed massa nulla cras ac egestas dolores
                donec erat. Placerat sed mauris. A nihil mauris. 
                Blandit nulla adipiscing. 
            </p>
        </div>
        <h2>Sit amet nisl sed elit et</h2>
        ...

On souhaite maintenant modifier l'affichage de manière à placer le troisième et quatrième paragraphe ainsi que le deuxième titre de niveau 1 dans un cadre de fond bleu transparent (opacité = 0.15) et de bordure un trait pointillé comme le montre la figure 8.

Question 2: Effectuez les modifications nécessaires afin d'obtenir cet effet.

C'est la même chose que pour l'exercice précédent (un div avec un attribut id, et un style spécifique pour cet id).

Pour définir un couleur avec transparence voir le chapitre CSS colors du tutorial CSS du w3schools, et plus spécifiquement la définition de valeur de couleur avec rgba (a pour le canal alpha qui définit la transparence).

C'est la même chose que pour la question précédente. On utilise un élement bloc de type div pour regrouper les deux paragraphes et le titre de niveau 1 dans un même bloc, élément auquel on associé un attribut id avec par exemple la valeur "cadre2". Pour styler ce bloc, on définit un style de nom #cadre2 avec les propriétés :

border-style pour définir la bordure du cadre.
background-color pour définir la couleur du fond du cadre. Pour définir un fond bleu transperent on utlise la valeur rga(0,0,255,0.15), les trois premières valeurs définissant respectivement les composantes Rouge, Verte (Green) et Bleue de la couleur, le quatrième paramètre définissant l'opacité (canal alpha, 1 = couleur opaque, 0 = couleur complètement transparente).

Le style:

#cadre2 {
    border-style:dashed;
    background-color: rgba(0, 0, 255, 0.15);
}

Le code HTML:

        ...
        <h2>Sit amet nisl sed elit et</h2>
        <div id="cadre2">
            <p>Justo felis a. Massa pretium vel. Sapien consectetuer 
                <span>nullam</span> blandit enim nec laoreet fringilla
                consectetuer. Dui ut a. Pulvinar hac suscipit praesent
                cursus et. 
            </p>
            <p class="surligne">Mauris integer tempor urna pellentesque 
                commodo sagittis libero maecenas. 
                Sed adipiscing suscipit felis ac scelerisque. Purus nec
                massa consequat aenean dolor. Eu velit a.
            </p>
            <h1>Nulla interdum nam</h1>
        </div>
        <h2>Scelerisque praesent</h2>
       ...

Exercice 5: styler un pseudo élément

Pour terminer on souhaite mettre en évidence la première lettre de chaque paragraphe, en utilisant des caractères gras de couleur rouge et de taille 1.8 fois plus grande que le texte normal comme le montre la figure 9.

Effectuez les modifications nécessaires afin d'obtenir cet effet.

Pour éviter de mettre une balise span autour de la première lettre de chaque paragraphe, il est beaucoup plus simple d'utiliser le pseudo-élément prévu à cet effet dans les CSS.

Pour styler les premières lettres de chaque paragraphe on utilise le pseudo élément first-letter pour définir un style p::first-letter. Les propriétés de ce style sont

font-weight et font-size pour définir le poids (ici bold) et la taille du texte.
color pour définir la couleur du texte.

/*
* sélecteur de pseudo élément
*/
p::first-letter {
    font-size: 1.8em;
    color: red;
    font-weight: bolder;
}

Exercice 6: feuille de style externe

Le fichier page2.html contient lui aussi du code HTML "Lorem ipsum".

Question 1:

Sauvegardez le code source de cette page dans le répertoire tp02_CSS où se trouve le fichier index.html que vous avez mis en forme dans les exercices précédents.
Modifiez les pages index.html et page2.html pour que chacune contienne un lien hypertexte vers l'autre page.
Faites en sorte que page2.html s'affiche comme indiqué sur la figure 10 en adoptant les mêmes styles que la page index.html

Le mieux pour partager les styles entre les deux pages est d'utiliser un feuille de style externe (voir le chapitre How To Add CSS du tutorial de w3schools).

Tout d'abord, un fois la page page2.html ajoutée au site, il faut créer les liens de navigation entre les deux pages. Ceci est effectué en écrivant des liens hypertexte (balise <a>) que nous placerons dans un élement nav, ce qui donne dans le fichier index.html:

     ...
    <body>
        <nav>
            <a href="page2.html">page 2</a>
        </nav>
        <h1>Lorem ipsum dolor</h1>
        <div id="cadre1">
        ...

et dans le fichier page2.html

     ...
    <body>
        <nav>
            <a href="index.html">page 1</a>
        </nav>
        <h1>Lorem ipsum dolor</h1>
        <div id="cadre1">
        ...

Pour que index.html et page2.html partagent les mêmes styles il faut "externaliser" les styles, précédemment définis dans l'en-tête de la page index.html, dans un fichier CSS (ici par exemple dans le fichier tp2.css situé dans le répertoire css du site).

Attention: le chemin pour définir l'image de fond du style body est un chemin relatif par rapport à l'endroit où se trouve la définition du style. Lorsque le style était défini dans la page index.html, ce chemin était ./images/parchemin2.jpg. Il faut ici le remplacer par ../images/parchemin2.jpg.

Le fichier tp2.css:

/* 
    Styles pour les pages du site du TP2
    Created on : 27 sept. 2018, 13:16:16
    Author     : Philippe Genoud
*/
body {
    background-image: url("../images/parchemin2.jpg");
}
h1 {
    text-align: center;
}
h2 {
    color: blue;
    background-color: goldenrod;
}
p {
    text-indent: 16px;
    text-align: justify;
}
/*
 * sélecteur de classe
 */
.surligne {
    background-color: yellow;
}

/*
* selecteurs par un identifiant d'élément
*/
#cadre1 {
    border-style: solid;
    font-style: italic;
    font-size: 0.5em;
    background-color: rgb(210,210,210);
}
#cadre2 {
    border-style:dashed;
    background-color: rgba(0, 0, 255, 0.15);
}

/*
* sélecteur de pseudo élément
*/
p::first-letter {
    font-size: 1.8em;
    color: red;
    font-weight: bolder;
}

Ensuite, il suffit de remplacer l'élément style qui se trouvait dans l'en-tête (balise head) de la page index.html par une balise link avec comme valeur de l'attribut href le chemin relatif depuis la page index.html vers le fichier tp2.css.

<!DOCTYPE html>
<html lang="la">
    <head>
        <title>Lorem Ipsum</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <link href="css/tp2.css" rel="stylesheet" type="text/css"/>
 </head>
    <body>
        <nav>
            <a href="page2.html">page 2</a>
        </nav>
        <h1>Lorem ipsum dolor</h1>
        <div id="cadre1">
        ...

On procède de même dans le fichier page2.html.

Exercice 7: Boites et marges

On voudrait que les titres de niveau h1 soient encadrés par une boite au fond rouge, avec comme bordure un trait plein noir, la boite étant centrée et occupant 75% de la largeur de la fenêtre, et avec une police un peu plus grosse (3.0em au lieu de 2.0em la valeur par défaut de h1 (figure 11)). De plus on veut que la marge supérieure de la boite (qui la sépare du bloc précédant) soit de 40 pixels et que sa marge inférieure (qui la sépare du bloc suivant) soit de 25 pixels.

Pour en savoir plus consultez la page CSS Box Model du tutoriel w3schools.

Question 1: Modifiez vos styles de manière à obtenir l'affichage ci-dessus pour les éléments h1.

On rajoute au style h1 les propriétés ci-dessous:

h1 {
    text-align: center;  /* texte centré (dans la zone occupée par l'élément h1)*/
    border: solid; /* bordure solide : trait plein */
    font-size: 3.0em;  /* taille de police 3 fois plus grosse*/
    background: red;   /* couleur de fond rouge*/
    width: 75%;    /* largeur de l'élément h1 : 3/4 de l'élément englobant */
    margin: 40px auto 20px auto;  /* marges dans l'ordre haut, droit, bas, gauche
           - les marges haut, droit et gauche sont automatiques afin que l'élément
             h1 soit centré dans la fenêtre,
           - la marge basse est de 20 pixels.
    */
}

De manière similaire, on veut que les éléments de titre de niveau 2 (h2) soient eux aussi dotés d'un cadre, décalé de 40 pixels à gauche et à droite de la fenêtre du navigateur et de 10 pixels par rapport aux élements blocs précédant et suivant. De plus, on souhaite que le texte du titre soit décalé de 30 pixels à gauche et 10 pixels en haut et en bas à l'intérieur du cadre comme le montre la figure 11b ci-dessous.

marges internes et externes. — Figure 11b : boite et marges externes et internes.

Question 2: Modifiez vos styles de manière à obtenir l'affichage ci-dessus pour les éléments h2.

On rajoute au style h2 les propriétés ci-dessous:

h2 {
    color: blue;
    background-color: goldenrod;
    /* règles ajoutées pour l'exercice 7.1 */
    border: solid 1px;   /* bordure trait plein */
    margin: 10px 40px 10px 40px;  /* marges extérieures dans l'ordre haut, droit, bas, gauche */
    padding : 10px 30px;/* marges intérieures le premier nombre donne les marges haute et basse
                          le deuxième nombre donne les marges gauche et droite */
}

Exercice 8: "Combinateurs"

L'objectif de cet exercice est de vous faire manipuler les sélecteurs de style, en particulier les "combinateurs" qui utilisent les relations entre les éléments de l'arbre DOM pour sélectionner les éléments d'une page HTML.

attention Dans les questions qui suivent, pour obtenir les mise en forme demandées, vous devrez définir des styles CSS sans vous servir ni de sélecteurs de classe (.xxx) ni de sélecteurs d'identifiant (#yyy).

Pour en savoir plus consultez la page CSS Combinators du tutoriel w3schools.

Question 1: avant toute chose, intégrez à votre site la page page3.html. Elle contient les éléments HTML (en particulier les éléments <section>) nécessaires aux questions suivantes.

Tout d'abord, un fois la page page3.html ajoutée au site, il faut créer les liens de navigation de la page index.html et de la page page2.html vers la page page3.html. Ce qui donne dans le fichier index.html l'ajout suivant:

     ...
    <body>
        <nav>
            <a href="page2.html">page 2</a>
            <a href="page3.html">page 3</a>
        </nav>
        <h1>Lorem ipsum dolor</h1>
        <div id="cadre1">
        ...

et dans le fichier page2.html

     ...
    <body>
        <nav>
            <a href="index.html">page 1</a>
            <a href="page3.html">page 3</a>
        </nav>
        <h1>Lorem ipsum dolor</h1>
        <div id="cadre1">
        ...

Ensuite dans page3.html il faut intégrer la feuille de styles du site et créer un élement de navigation permettant de retourner vers la page d'acceuil ou la page 2

     ...
    <head>
        ...
        <link href="css/tp2.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <nav>
            <a href="index.html">page 1</a>
            <a href="page2.html">page 2</a>
        </nav>
        <h1>Lorem ipsum dolor</h1>
        <div id="cadre1">
        ...

On souhaite tout d'abord faire une distinction entre les titres de niveau (h2) selon qu'ils se trouvent ou non dans une section (voir figure 12).

Figure 12 : mise en forme des titres de niveau h1 selon leur position dans le document (page3.html).

Si le titre n'est pas dans un section, il sera "stylé" comme dans l'exercice 7 qui précède.
Si le titre est dans une section, il sera stylé de la manière suivante:
- pas de bordure,
- texte en italique,
- taille de police un peu plus petite que pour les titres hors section (1.25em au lieu de 1.5em),
- marges internes supérieure et inférieure plus petites (3 pixels au lieu de 10 pixels).

Question2: modifiez votre feuille de styles de manière à afficher les titres de niveau h2 comme indiqué ci-dessus.

Utilisez un sélecteur de style combiné qui permet de définir les propriétés à appliquer à tout élément h2 qui descend (directement ou indirectement) d'un élement section.

On utilise le sélecteur de style combiné section h2 qui permet de définir les propriétés à appliquer à tout élément h2 qui descend (directement ou indirectement) d'un élement section. La règle ci-dessous est ajoutée en fin du fichier tp2.css.

section h2 {   /* sélecteur descendant: toute balise h2 qui descend de section */
    border: none; /* annule border: solid; hérité de la règle h2 */
    font-style: italic;
    font-size: 1.25em;
    padding-top : 3px; /* marge intérieure haute */
    padding-bottom: 3px; /* marge intérieure basse */
}

Attention: les propriétés définies précédemment pour les éléments h2 (voir exercice 7) sont héritées. Pour éviter qu'elle ne s'appliquent ici il faut les redéfinir avec la valeur appropriée. Par exemple border: none; est là pour éviter que les titres de niveau h1 situés dans une section aient une bordure solide.

On souhaite maintenant que les listes numérotées soient affichées comme suit (figure 13):

Figure 13 : mise en forme des listes numérotées (page3.html).

les chiffres de premier niveau sont des chiffres romains majuscules,
les chiffres de deuxième niveau sont des lettres,
les chiffres de troisième niveau sont des chiffres romains minuscules.

Question3: Modifiez vos styles de façon à ce que les listes numérotées soient affichées comme indiqué ci-dessus.

La propriété list-style-type permet de définir le type de marqueur utilisé pour les éléments d'une liste.

Un sélecteur de style combiné permet de définir les propriétés à appliquer à tout élément li qui descend directement (child) d'un élement ol.

Il faut définir ici trois styles de sélecteurs respectifs :

ol > li pour les chiffres de premier niveau
ol > li > ol > li pour les chiffres de deuxième niveau
ol > li > ol > li > ol > li pour les chiffres de troisième niveau

Ce qui donne:

/*
chiffres de premier niveau : chiffres romains majuscules.
Il s'agit des éléments <li> qui descendent directement (child) d'un élément
<ol>
*/
ol > li {  /* sélecteur de <li> descendant direct (child) de <ol> */
    list-style-type: upper-roman;
}
/* 
chiffres de deuxième niveau : lettres.
Il s'agit des éléments<li> qui descendent directement (child) d'un élément
<ol> qui lui même est enfant d'un élément <li> enfant d'un élément <ol>
*/
ol > li > ol > li {
    list-style-type: lower-alpha;
}
/* 
chiffres de troisième niveau : des chiffres romains minuscules.
encore un niveau*/
ol > li > ol > li > ol > li {
    list-style-type: lower-roman; 
}

Partie 2: Mise en forme de votre mini-site

Correction en cours de construction...