Exercices CSS

Base CSS

Les exercices ci-après doivent permettre d'utiliser les sélecteurs de base du CSS et de découvrir quelques propriétés courantes.

Base HTML

Tous les exercices de cette page utilisent le code HTML ci-après comme base.

<section>
	<h1>Mon titre 1</h1>
	<article>
		<h2>Mon Titre 2</h2>
		<p>Premier paragraphe</p>
		<p class="maclasse">Deuxième paragraphe</p>
		<p>Troisième paragraphe</p>
		<p id="monid">Quatrième paragraphe</p>
	</article>
	<article>
		<h2 class="maclasse">Mon Titre 3</h2>
		<p id="superid" class="maclasse">Cinquième paragraphe</p>
		<p>Sixième paragraphe</p>
	</article>
</section>

Exercice 1

Pour cet exercice, il faut :

• Changer la couleur du texte de tous les paragraphes
• Changer la couleur de fond et ajouter une marges intérieure aux éléments de classe maclasse
• Ajouter une bordure en trait continu, une marge intérieure et une marge extérieure à l'élément d'identifiant monid

Exercice 2

Pour cet exercice, il faut :

• Définir la couleur de texte des sections en vert et de marge d'au moins 100 pixels
• Définir la taille de police des titres 1 à 2.5em et petites majuscules
• Définir la taille de police des paragraphes à 14px
• Définir la taille de police des titres 2 à 2vw et la police de caractère en Helvetica

Exercice 3

Pour cet exercice, il faut :

• Changer la couleur du texte de tous les paragraphes en bleu
• Changer la couleur du texte des éléments de classe maclasse en vert
• Changer la couleur du texte des éléments d'identifiant superid en rouge

Exercice 4

Pour cet exercice, il faut :

• Définir le police des sections à helvetica.
• Pour les paragraphes définir une marge tout autour de 20px et faire en sorte que chaque mots s'écrivent avec une majuscule.
• Les titres de niveau 1 doivent être aligné au centre, écrit en rouge et de taille 2em.
• Les titres de niveau 2 doivent avoir une marge intérieure de 10px, être sur un fond rouge et avoir une bordure à gauche de 50px noire continue.