Les sélecteurs - Exercices 03
Voici une série d'exercices pour expérimenter les sélecteurs CSS.
-
4ttr
5tq
- Découverte
Voici une série d'exercices pour expérimenter les sélecteurs CSS.
Chaque énoncé décrit l’objectif visuel, sans indiquer comment y parvenir.
Applique une couleur de texte différente aux éléments
Transforme tous les textes des paragraphes pour qu’ils apparaissent centrés dans la page.
.importantCrée un style pour la classe important qui met le texte en rouge, en gras, et augmente la taille du texte.
Change l’apparence du bloc avec l’id header afin qu'il ressemble à une zone d’en-tête visible et structurée (applique un fond, une hauteur fixe, et un alignement du texte justifié).
<div>Ajoute une bordure noire de 2px autour de tous les
.carteModifie la présentation de la classe carte pour qu’elle possède un espace autour d’elle ainsi qu’un espace interne confortable (ajoute une marge externe et une marge interne).
Applique une police différente ("Segoe UI") à tous les éléments <p> afin qu’elle contraste avec le reste de la page.
Crée un style pour la classe btn qui donne l’apparence d’un véritable bouton cliquable avec: couleur blanche, fond bleu, bordure arrondie, padding interne suffisant.
Fais en sorte que toutes les images affichées en <img> aient une largeur précise et uniforme (fixe la largeur de toutes les images à 300px.)
Donne à la classe warning un style qui évoque clairement un message d’avertissement (avec fond jaune pâle, texte gras et noir et bordure orange).
Change l’apparence du bloc #footer pour qu’il ressemble à une zone de bas de page structurée (centre le texte, impose un fond gris et ajoute un padding de 20px).
Crée un style pour .success (vert) et un autre pour .error (rouge) afin que chacun corresponde à son rôle (succès / erreur).
Améliore la classe carte (ou une nouvelle classe si tu préfères) pour qu’elle prenne la forme d’un encadré de dimensions fixes. --> Bordure, hauteur fixe (200px), largeur fixe (300px), marge interne de 15px et marges externes automatiques (auto).
<h1>Applique la police "Impact" uniquement aux
Crée une classe .highlight qui donne l’impression que le texte est surligné comme au marqueur (fond jaune et un padding léger autour du texte).
Modifie l’apparence de l’élément #banner pour qu’il occupe toute la largeur de la page et se distingue du reste avec largeur 100%, fond coloré (#673ab7) et texte centré.
Applique une bordure bleue uniquement au paragraphe ayant id="intro".
Donne à la classe .encart l’apparence d’un petit bloc compact, placé dans un coin de la page ou visuellement séparé du reste. --> largeur 200px, padding interne et fond clair.
Crée la classe .square pour qu’elle devienne un carré régulier facilement reconnaissable avec un fond coloré (#e91e63) et une bordure noire.
Stylise la liste #menu pour que ses éléments apparaissent côte à côte (display: inline-block) comme un menu de navigation simple. Change la couleur de fond (#673ab7) et celle du texte (#ffeb3b).