Quiz : Connaissez‑vous les bases du CSS ? (2025)
Êtes‑vous assez front‑end ?
Quiz : Connaissez‑vous le CSS ?
- CSS moderne ? 🤔
- Le CSS mérite‑t‑il une place sur votre CV ??? 🚀
- Choix multiples. 🤖 … À quel point cela peut‑il être difficile, hein ?
Sélectionnez le UN INVALIDE ❌ 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ère0vmin- minimum du viewportvmax- maximum du viewportvh- hauteur du viewportvw- 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
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.
Lequel 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).
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.
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.
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.
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.
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.
Comment centrer “shit” dans une boîte ?
Utiliser text-align: center; est la bonne façon de centrer du texte dans un élément bloc. Les propriétés align sont utilisées pour les mises en page flexbox, et margin: 0 auto; sert à centrer horizontalement les éléments bloc.
La propriété align-content est utilisée pour les mises en page grid, et text-content n’est pas une propriété CSS valide.
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.
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.
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.
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.
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.