Dan Levy

Quiz : Connaissez‑vous les bases du CSS ? (2025)

Êtes‑vous assez front‑end ?

Quiz : Connaissez‑vous le CSS ?

1. 

Échauffement : Polices

Sélectionnez la SEULE VALEUR INVALIDE ❌ pour font-size :

10cx est incorrect car cx n’est pas une unité CSS réelle. (Du moins au moment de la rédaction.)

Les unités populaires incluent les familières px, rem, em.

Les unités plus récentes sont utiles pour des mises en page dynamiques et réactives.

  • ch - largeur du caractère 0
  • vmin - minimum du viewport
  • vmax - maximum du viewport
  • vh - hauteur du viewport
  • vw - largeur du viewport

Il existe également plusieurs unités qui existent depuis toujours mais sont rarement utilisées, comme cm pour les centimètres, mm, in pour les pouces, pt pour les points

2. 

Échauffement : Couleurs

Pouvez‑vous repérer le UNIQUE code hex valide 👍 ?

Les codes hexadécimaux peuvent être utilisés pour représenter des couleurs en CSS. Ils sont précédés d’un # et doivent contenir 3, 4, 6 ou 8 chiffres hexadécimaux.

Le code hex de 3 caractères est une forme courte du code de 6 caractères, chaque caractère étant répété. Le code de 4 caractères inclut un canal alpha pour la transparence.

Par exemple #ABC équivaut à #AABBCC, et #ABCD équivaut à #AABBCCDD. Pour en savoir plus sur la gestion des valeurs hex, consultez mon quiz sur les nombres JavaScript.

3. 

Échauffement : Unités

Laquelle de ces unités N’EST PAS une unité CSS valide ❌ ?

Les nouvelles unités comme ch, vmin, vmax, vh, vw sont très utiles pour les mises en page dynamiques/réactives.

Il existe aussi plusieurs unités qui existent depuis toujours mais sont rarement utilisées, comme cm pour les centimètres, mm, in pour les pouces, pt pour les points, pc, cap pour la taille des lettres capitales, et ex qui correspond à la hauteur de la lettre x.

Les unités populaires incluent le familier px pour les pixels, em relatif à la taille de police de l’élément, et rem qui est secrètement un hommage au groupe oublié des années 90 R.E.M. (bon, pas vraiment, c’est juste une unité em relative qui référence l’élément racine).

4. 

Sélecteur : Fondamentaux

Quel sélecteur correspond le mieux au HTML suivant ?

<a id="home" name="home" href="/home">Home</a>

La bonne réponse est a#home[name='home'], qui correspond à la fois aux attributs id et name. Les sélecteurs CSS sont sensibles à la casse, donc #Home ne fonctionnerait pas, et les espaces impliquent des éléments enfants, ce qui ne s’applique pas ici.

Le sélecteur :contains() n’est pas un sélecteur CSS standard, mais il est disponible dans certaines bibliothèques JS.

5. 

Sélecteur : Fondamentaux

Quel sélecteur correspond au bouton HTML suivant ?

<button onclick="openModal()">Contact</button>

La bonne réponse est button[onclick], qui cible la présence de l’attribut onclick.

Notez que :link ne cible que les liens href non visités, ::click n’est pas un pseudo‑élément valide, et :focus ne cible que l’élément ayant le focus.

6. 

Sélecteur : Fondamentaux

Lequel de ces sélecteurs est invalide ?

Le sélecteur c > > d {} est invalide car le combinateur enfant est répété sans sélecteur entre les deux caractères >.

Les autres sélecteurs sont valides. Un sélecteur de type comme c {} est syntaxiquement du CSS valide même si c n’est pas un élément HTML standard.

7. 

Sélecteur : Fondamentaux

Quel sélecteur correspond au dernier lien dans le HTML suivant ?

<nav>
  <a name="home" href="/home">Home</a>
  <a name="login" href="/login">Login</a>
  <a name="help" href="/help">Help</a>
</nav>

Le sélecteur correct est a:last-child, qui correspond au dernier <a> lorsqu’il est également le dernier enfant de son parent. nav:nth-child(3) correspondrait à un élément <nav> qui est le troisième enfant de son propre parent.

8. 

Sélecteur : Spécificité

Quel sélecteur aura la priorité ?

Le sélecteur a#quote a la priorité car l’ID possède une spécificité plus élevée que les sélecteurs basés sur les balises ou les classes.

9. 

Mises en page : centrage

Quelle déclaration centre horizontalement le texte en ligne dans le bloc qui le contient ?

text-align: center; centre le texte dans un élément bloc. La propriété CSS align n’existe pas. margin: 0 auto; peut centrer un bloc dont la largeur est contrainte ; elle ne centre pas son texte.

align-content aligne le contenu dans les contextes compatibles, notamment les grilles et les conteneurs flex sur plusieurs lignes ; ce n’est pas la propriété d’alignement du texte. text-content n’est pas une propriété CSS valide.

10. 

Mises en page : centrage

Comment centrer le contenu verticalement à l’intérieur d’un conteneur bloc en utilisant la mise en page de flux moderne ?

Utiliser align-content est la méthode moderne pour centrer verticalement le contenu d’un conteneur bloc en mise en page de flux.

Les propriétés align-items et justify-content sont utilisées pour les mises en page flexbox et grid, mais pas pour le flux.

margin: 0 auto; et margin: auto; centrent un élément bloc horizontalement, mais pas verticalement.

11. 

Mises en page : unités

Quelle est la taille en pixels du texte du lien <a> dans le HTML suivant ?

<body style="font-size: 40px !important;">
  <nav style="font-size: 50%;">
    <a style="font-size: 25%;">HOME</a>
  </nav>
</body>

La font-size de <a> se calcule à 5 px : 40 px (body) × 50 % (nav) = 20 px, puis 20 px × 25 % = 5 px.

12. 

Unités : REM

Quelle sera la taille en pixels de 1.2rem pour le lien “HOME” dans le HTML suivant ?

<html style="font-size: 10px;">
  <body style="font-size: 20px;">
    <a style="font-size: 1.2rem;">HOME</a>
  </body>
</html>

1.2rem correspond à 12 px car les unités rem se réfèrent à la taille de police racine ou de <html>, définie ici à 10 px.

13. 

Unités : EM

Comme dans la question précédente, quelle sera la taille en pixels de 1.2em pour le lien “HOME” dans le HTML suivant ?

<html style="font-size: 10px;">
  <body style="font-size: 20px;">
    <a style="font-size: 1.2em;">HOME</a>
  </body>
</html>

1.2em correspond à 24 px car les unités em se réfèrent à la taille de police héritée, fixée ici à 20 px.

14. 

Sélecteur : Spécificité

Quel sélecteur a la spécificité la plus basse ?

:where(.card) .title a la spécificité la plus basse. La pseudo‑classe :where() et tout ce qu’elle contient contribue 0-0-0, donc seul .title compte. :is(.card) .title conserve la spécificité de .card, .card .title possède deux classes, et #card .title inclut un ID.

Loading comments...