Appliquez une couleur rouge à tous les éléments
<h1> et centrez le texte des paragraphes
<p>.
Indice : Utilisez les sélecteurs h1 et
p.
<style>
/* Votre code CSS ici */
</style>
<h1>Titre principal</h1>
<p>Ceci est un paragraphe.</p>Corrigé :
<style>
h1 {
color: red;
}
p {
text-align: center;
}
</style>Explication : Les sélecteurs d'élément ciblent directement les balises HTML.
Appliquez une taille de police de 20px et une couleur bleue à tous les
éléments ayant la classe texte-important.
Indice : Utilisez le sélecteur
.texte-important.
<style>
/* Votre code CSS ici */
</style>
<p class="texte-important">Ce texte est important.</p>Corrigé :
<style>
.texte-important {
font-size: 20px;
color: blue;
}
</style>Explication : Les sélecteurs de classe ciblent tous les éléments ayant la classe spécifiée.
Appliquez un fond jaune clair et une bordure noire de 1px à l'élément
ayant l'id unique.
Indice : Utilisez le sélecteur #unique.
<style>
/* Votre code CSS ici */
</style>
<div id="unique">Contenu unique</div>Corrigé :
<style>
#unique {
background-color: lightyellow;
border: 1px solid black;
}
</style>Explication : Les sélecteurs d'id ciblent un élément unique dans la page.
Changez la couleur des liens en violet lorsqu'ils sont visités.
Indice : Utilisez le sélecteur a:visited.
<style>
/* Votre code CSS ici */
</style>
<a href="#">Lien exemple</a>Corrigé :
<style>
a:visited {
color: purple;
}
</style>Explication : Les pseudo-classes ciblent des états spécifiques des éléments.
Ajoutez une marge de 20px autour de tous les éléments
<div> et un rembourrage de 10px.
Indice : Utilisez les propriétés margin et
padding.
<style>
/* Votre code CSS ici */
</style>
<div>Contenu de la div</div>Corrigé :
<style>
div {
margin: 20px;
padding: 10px;
}
</style>
Explication : margin contrôle l'espace
extérieur, padding l'espace intérieur.