TP 05 : Images de fond et sélecteurs simples

Ajouter une règle appliquant le style suivant aux titres de second niveau :

• couleur de fond #f1c1ea
• padding haut et bas de 1em
• padding gauche et droite de 2em

Modifier la règle précédemment ajoutée pour que le style s'applique à la fois aux titres de second niveau et au titre de premier niveau. NB: il est interdit d'ajouter une autre règle !

On souhaite mettre en évidence toutes les occurrences du mot « pâte ». Pour ce faire, dans le HTML, on a attribué la classe pate à toutes les occurrences du mot « pâte » (grâce à un élément span, qui n'a pas de sémantique intrinsèque). Ajouter une règle CSS qui met en gras les éléments de classe pate et leur donne une couleur de fond comme sur l'image ci-contre.

Sur la page il y a des petits encadrés, représentés par des éléments aside dans le HTML. Les titres de ces encadrés étant des h2, ils ont donc (normalement !) le style des autres h2 de la page. Cependant, ça ne convient pas : on voudrait qu'ils soient de couleur tomato sur fond blanc. Ajouter une règle qui fait cela — mais le style des autres h2 ne doit pas changer !

Certains encadrés sont intitulés « Le saviez-vous ? » et ont la classe didyouknow. On voudrait qu'ils aient un style différent : il faut que leur bordure et leur titre, au lieu d'être de couleur tomato, soient de couleur #151. Ajouter deux règles pour implémenter cette consigne.

Chaque section du texte est dans un élément section, à qui on a donné un identifiant. On va utiliser cela pour mettre en valeur une des sections (pour simuler par exemple le fait que c'est la section courante, ou une section sélectionnée par l'internaute). Ajouter une règle qui met une ombre et un padding autour de la section « Pâtes fraîches », comme sur l'image ci-contre.

On voudrait mettre encore plus en valeur cette section « sélectionnée ». Ajouter une règle qui ajoute une ombre de couleur tomato au texte des éléments de classe pate qui sont dans la section « Pâtes fraîches », comme sur l'image ci-contre.

Dans la liste des sortes de pâtes, on voudrait que la puce des items de premier niveau soit le caractère ★, et que la puce des items de second niveau soit le caractère ☆. Implémenter ce style en ajoutant deux règles qui utilisent la propriété list-style-type (à laquelle on peut donner n'importe quelle chaîne de caractères).

On voudrait que le mot « pâte » soit encore davantage mis en évidence dans les titres. Ajouter une seule règle qui met en majuscules et qui ajoute un espacement de 1em entre les lettres des éléments de classe pate qui sont dans un titre de premier ou second niveau. (Bien sûr, les autres éléments de classe pate ne doivent pas être impactés.)