Back
Close

Exercices CSS

profThiernesse
1,528 views
Previous: Base CSS Next: Finale

Les sélecteurs

L'adresse suivante fourni les références en terme de sélecteurs CSS : W3Schools selector

Exercice 1

Ce premier exercice est un petit jeu de découverte des sélecteurs. L'objectif est de trouver le bon sélecteur pour le/les élément(s) que l'on désire cibler.

Le jeu se trouve à cette adresse : CSS Diner.

Exercice 2

Code HTML utilisé
<h1>Mon titre 1</h1>
<p>Premier paragraphe</p>
<p>Deuxième paragraphe</p>	
<article>
	<h2>Mon Titre 2</h2>
	<p>Troisième paragraphe</p>
	<p>Quatrième paragraphe</p>
	<section>
		<h2>Mon Titre 3</h2>
		<p>Cinquième paragraphe</p>
		<p>Sixième paragraphe</p>		
	</section>
</article>

En utilisant les sélecteurs réaliser les mises en forme suivantes :

  • le corps du document doit être écrit en helvetica.
  • les titres de niveau 1 doivent être centrés et écrits en rouge.
  • tous les titres de niveau 2 doivent soulignés.
  • les titres de niveau 2 dans les sections doivent être verts.
  • les titres 2 de niveau dans les articles doivent être bleus.
  • les paragraphes suivant directement un titre de niveeau 2 doivent être en rouge italique.
  • les paragraphes suivant un titre de niveau 1 doivent être en violet.
Exerice 2
/* Ajouter votre CSS ici */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Create your playground on Tech.io
This playground was created on Tech.io, our hands-on, knowledge-sharing platform for developers.
Go to tech.io
codingame x discord
Join the CodinGame community on Discord to chat about puzzle contributions, challenges, streams, blog articles - all that good stuff!
JOIN US ON DISCORD
Online Participants