CSS Diner pour apprendre à manipuler les sélecteurs CSS

Jouer avec les sélecteurs CSS

CSS Diner est un petit jeu très didactique, réalisé par le designer et codeur canadien Luke Pacholski, pour apprendre à utiliser les sélecteurs CSS, ou tout simplement pour tester ses connaissances en la matière de façon visuelle et ludique.

Connaître les sélecteurs CSS

Un sélecteur CSS, c’est une expression (une chaîne de caractère) qui permet d’identifier (sélectionner) précisément une catégorie d’éléments sur une page web pour lui appliquer une série de styles CSS. Ça, c’est ma définition personnelle de la chose, je ne sais pas s’il y a une définition « officielle ».
Par exemple, si le code HTML d’un site a été réalisé de façon correcte, pour que l’ensemble des titres de niveau 1 s’affichent en noir, il faut indiquer la règle CSS suivante dans la feuille de style :

H1 { color:#000000; }

Dans ce morceau de code, « H1 » est le sélecteur. Pour tous les éléments de type H1 (les titres de niveau 1), la propriété « color » prendra la valeur « #000000 » (valeur hexadécimale du noir). Savoir manipuler les sélecteurs fait donc partie des connaissances de base à maîtriser pour créer ou modifier l’aspect visuel d’un site.

Le sélecteur que nous venons de voir est le plus simple, il s’applique à toutes les balises identiques (H1, H2, A, DIV, TABLE, etc.). Mais souvent, on a besoin d’être un peu plus précis que cela pour ne sélectionner, par exemple, que les liens du fil d’Ariane, ou que les listes à puces des paragraphes de classe « intro » situés dans des balises DIV ayant « article1 » pour attibut ID. Autant dire que ça peut rapidement se compliquer, avec des sélecteurs du type :

div #article1 P.intro ul li.liste  { color:#000000; }

Pour apprendre à jongler avec la gymnastique cérébrale nécessaire à l’utilisation des sélecteurs, ou tout simplement pour réviser ses classiques en la matière, il y a CSS Diner.

Manipuler les sélecteurs CSS

CSS Diner est une petite application en ligne permettant d’apprendre à utiliser les sélecteurs CSS de façon ludique et visuelle, en symbolisant les éléments à sélectionner par des objets usuels, comme des assiettes ou des pommes. Pour parcourir les 26 niveaux du jeu, il faut à chaque fois découvrir et saisir dans une zone de texte le sélecteur permettant d’isoler l’élément demandé pour passer au niveau suivant.

Dans l’exercice suivant, il faut par exemple trouver le sélecteur qui permettra d’isoler les deux grosses pommes rouges.

Les sélecteur CSS avec CSS Diner

L’idée est très bonne, le jeu est très agréable et le tout est très bien réalisé (par Luke Pacholski, designer et codeur canadien). C’est en anglais mais pas besoin d’être bilingue pour comprendre comment ça marche !

Pour tester CSS Diner, c’est là : http://flukeout.github.io

 

One Response to “Jouer avec les sélecteurs CSS”

  1. Fred dit :

    L’idée est sympa mais ça n’est pas vraiment un cours qui permet d’apprendre les CSS

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *