Le développement web moderne ne se limite plus à l’affichage de contenus simples : il exige des interfaces souples, accessibles et agréables à utiliser.
HTML et CSS jouent un rôle central dans cette évolution en permettant de structurer l’information et de contrôler précisément son apparence.
La maîtrise de concepts avancés, tels que les variables CSS, les pseudo-classes ou les unités relatives, est devenue indispensable pour les étudiants, les développeurs débutants et les candidats à des examens ou concours techniques.
Cette page propose une approche pédagogique orientée vers la compréhension des mécanismes essentiels du design web actuel.
Elle met en lumière la gestion du style, des interactions utilisateur et de l’adaptabilité des interfaces.
L’objectif est d’aider l’apprenant à consolider ses bases, à comprendre les bonnes pratiques et à progresser vers une écriture de code plus propre, plus lisible et plus efficace.
Le développement web moderne ne se limite plus à l’affichage de contenus simples : il exige des interfaces souples, accessibles et agréables à utiliser.
HTML et CSS jouent un rôle central dans cette évolution en permettant de structurer l’information et de contrôler précisément son apparence.
La maîtrise de concepts avancés, tels que les variables CSS, les pseudo-classes ou les unités relatives, est devenue indispensable pour les étudiants, les développeurs débutants et les candidats à des examens ou concours techniques.
Cette page propose une approche pédagogique orientée vers la compréhension des mécanismes essentiels du design web actuel.
Elle met en lumière la gestion du style, des interactions utilisateur et de l’adaptabilité des interfaces.
L’objectif est d’aider l’apprenant à consolider ses bases, à comprendre les bonnes pratiques et à progresser vers une écriture de code plus propre, plus lisible et plus efficace.
QCM
1
Corrigé
Comment déclare-t-on une variable CSS globale ?
A. @variable --main-color: #000;
B. :root { --main-color: #000; }
C. $main-color: #000;
D. var main-color = #000;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les variables CSS (custom properties) se déclarent avec '--' et sont souvent placées dans ':root' pour être globales.
QCM
2
Corrigé
Quelle fonction CSS est utilisée pour insérer la valeur d'une variable ?
A. get()
B. val()
C. var()
D. use()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La fonction var(--nom-variable) permet d'appeler une propriété personnalisée définie précédemment.
QCM
3
Corrigé
Quelle propriété CSS permet de transformer une image en noir et blanc ?
A. image-style: gray;
B. color: monochrome;
C. filter: grayscale(100%);
D. background-blend-mode: saturation;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La fonction 'grayscale()' de la propriété 'filter' modifie le rendu des couleurs d'un élément.
QCM
4
Corrigé
Quel sélecteur cible un élément <input> qui est actuellement désactivé ?
A. :off
B. :disabled
C. :inactive
D. :not-active
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La pseudo-classe ':disabled' cible les champs de formulaire ayant l'attribut HTML 'disabled'.
QCM
5
Corrigé
Que fait la propriété 'text-transform: capitalize;' ?
A. Met tout le texte en majuscules
B. Met la première lettre de chaque mot en majuscule
C. Met uniquement la première lettre de la phrase en majuscule
D. Agrandit la taille de la police
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'capitalize' force la première lettre de chaque mot en capitale sans toucher aux autres lettres.
QCM
6
Corrigé
Quelle balise HTML est utilisée pour afficher une échelle de mesure (comme l'usage d'un disque dur) ?
A. <progress>
B. <range>
C. <meter>
D. <scale>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<meter> est utilisé pour une mesure scalaire dans une plage connue (ex: température, stockage).
QCM
7
Corrigé
Quelle propriété CSS permet de définir l'espacement entre les lignes d'un texte ?
A. letter-spacing
B. word-spacing
C. line-height
D. text-indent
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'line-height' définit la hauteur de la ligne, influençant l'espace vertical entre les lignes.
QCM
8
Corrigé
En CSS, que permet de faire la propriété 'resize: both;' sur un textarea ?
A. Redimensionner l'élément en hauteur et largeur
B. Dupliquer l'élément
C. Adapter la taille au contenu automatiquement
D. Afficher deux barres de défilement
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'resize' permet à l'utilisateur d'ajuster manuellement la taille d'un bloc (souvent utilisé avec overflow).
QCM
9
Corrigé
Quel attribut HTML est utilisé pour spécifier un texte d'aide dans un champ de formulaire ?
A. hint
B. placeholder
C. value
D. label
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le 'placeholder' affiche un court message dans le champ avant que l'utilisateur ne saisisse quelque chose.
QCM
10
Corrigé
Quelle propriété CSS permet de contrôler l'ordre des éléments flex sans changer le HTML ?
A. z-index
B. flex-position
C. order
D. flex-order
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La propriété 'order' accepte des nombres entiers pour réorganiser les enfants d'un conteneur flex.
QCM
11
Corrigé
Quelle est la valeur par défaut de la propriété 'display' pour une balise <span> ?
A. block
B. inline
C. inline-block
D. flex
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les éléments comme <span> ou <a> sont 'inline' (en ligne) par défaut.
QCM
12
Corrigé
Quelle propriété CSS permet d'ajouter un espacement entre les colonnes d'un texte multi-colonnes ?
A. column-gap
B. column-padding
C. grid-gap
D. margin-columns
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'column-gap' définit l'espace blanc entre les colonnes générées par 'column-count'.
QCM
13
Corrigé
Comment appelle-t-on le modèle qui définit la structure de toute page web ?
A. CSS Object Model
B. Document Object Model (DOM)
C. Web Structure Model
D. Hypertext Model
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le DOM est l'interface de programmation qui représente le document HTML comme une structure en arbre.
QCM
14
Corrigé
Quelle propriété CSS permet de masquer les éléments qui sortent de leur conteneur ?
A. display: none;
B. visibility: hidden;
C. overflow: hidden;
D. clip: auto;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'overflow: hidden' coupe tout contenu dépassant les dimensions définies de l'élément parent.
QCM
15
Corrigé
Quel sélecteur cible le premier paragraphe à l'intérieur de chaque div ?
A. div p:first-of-type
B. div p:first-child
C. div > p:first
D. div + p:first-child
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
':first-of-type' est plus sûr car il cible le premier <p> même s'il y a un titre avant lui.
QCM
16
Corrigé
Quelle propriété CSS permet d'inverser les couleurs d'un élément ?
A. filter: reverse();
B. color-mode: invert;
C. filter: invert(100%);
D. mix-blend-mode: difference;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La fonction 'invert()' de la propriété 'filter' crée un effet négatif sur les couleurs.
QCM
17
Corrigé
Quel attribut HTML permet de regrouper des options dans un menu déroulant ?
A. <group>
B. <option-group>
C. <optgroup>
D. <fieldset>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<optgroup> permet de structurer les menus <select> très longs avec des étiquettes de catégories.
QCM
18
Corrigé
Que signifie l'unité relative 'vh' ?
A. 1% de la hauteur de la fenêtre d'affichage
B. La hauteur de la police (vertical height)
C. La valeur de la hauteur parente
D. Vitesse de défilement (velocity height)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'vh' (viewport height) est égal à 1% de la hauteur totale de la fenêtre du navigateur.
QCM
19
Corrigé
Quelle propriété CSS permet de rendre un élément invisible tout en gardant son espace ?
A. display: none;
B. opacity: 0;
C. visibility: hidden;
D. filter: blur(100%);
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'visibility: hidden' cache l'élément mais le navigateur réserve toujours la place occupée dans la mise en page.
QCM
20
Corrigé
Quel attribut HTML5 permet de désactiver la correction automatique dans un champ texte ?
A. correct='off'
B. autocorrect='off'
C. spellcheck='false'
D. no-check
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
L'attribut 'spellcheck' indique si le navigateur doit vérifier l'orthographe du texte saisi.
QCM
21
Corrigé
Quelle est la principale différence entre les pseudo-classes :is() et :where() ?
A. :is() est réservé aux sélecteurs d'ID alors que :where() cible les classes.
B. :where() a toujours une spécificité nulle, contrairement à :is() qui prend celle de son argument le plus fort.
C. :is() ne peut pas être imbriqué alors que :where() le peut.
D. :where() n'est pas supporté par les navigateurs basés sur Chromium.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
:where() permet de grouper des sélecteurs sans alourdir leur poids, facilitant les surcharges ultérieures.
QCM
22
Corrigé
En CSS Grid, quelle est la fonction du mot-clé 'subgrid' ?
A. Créer une grille indépendante à l'intérieur d'une cellule.
B. Forcer l'élément enfant à ignorer les colonnes de son parent.
C. Permettre à un enfant d'utiliser les lignes et colonnes définies sur son parent direct.
D. Diviser chaque cellule en quatre sous-cellules égales.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le subgrid permet d'aligner parfaitement des descendants profonds sur la structure de la grille parente.
QCM
23
Corrigé
Quel sélecteur permet de cibler un élément parent uniquement s'il contient un enfant spécifique ?
A. :target
B. :focus-within
C. :within
D. :has()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
:has() est le 'sélecteur de parent' tant attendu, capable de vérifier la présence de descendants ou de frères.
QCM
24
Corrigé
Dans le modèle de boîte 'border-box', si width=100px, padding=10px et border=5px, quelle est la largeur totale de l'élément ?
A. 100px
B. 130px
C. 115px
D. 120px
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Avec 'border-box', le padding et la bordure sont inclus dans la largeur définie de l'élément.
QCM
25
Corrigé
Quelle propriété CSS permet d'optimiser le rendu en sautant le calcul des éléments hors écran ?
A. content-visibility: auto
B. render-strategy: fast
C. display: skip-offscreen
D. will-change: scroll
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Cette propriété permet au navigateur d'ignorer le rendu d'un bloc tant qu'il n'approche pas du viewport.
QCM
26
Corrigé
Que permet d'accomplir 'isolation: isolate' en CSS ?
A. Empêcher le texte d'être sélectionné par l'utilisateur.
B. Créer un nouveau contexte d'empilement (stacking context) sans modifier le z-index.
C. Bloquer l'héritage des variables CSS vers les enfants.
D. Masquer l'élément pour les lecteurs d'écran uniquement.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Il permet de s'assurer que les z-index internes d'un composant ne s'entremêlent pas avec le reste de la page.
QCM
27
Corrigé
L'unité 'ch' est basée sur quelle mesure typographique ?
A. La hauteur moyenne des lettres minuscules (x-height).
B. La largeur du caractère '0' (zéro) de la police actuelle.
C. La hauteur de la ligne de base (baseline).
D. La largeur totale du caractère 'M'.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'unité 'ch' est idéale pour limiter la largeur des paragraphes à un nombre précis de caractères.
QCM
28
Corrigé
Quelle valeur de 'object-fit' conserve le ratio d'une image en remplissant le conteneur, quitte à la rogner ?
A. contain
B. fill
C. none
D. cover
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
'cover' redimensionne l'image pour couvrir tout l'espace en préservant ses proportions originales.
QCM
29
Corrigé
À quoi sert la propriété 'scroll-margin-top' ?
A. Ajouter un padding fixe au sommet de la page.
B. Définir un décalage pour qu'un élément ancré ne soit pas caché par un header fixe.
C. Ralentir la vitesse de défilement vers le haut.
D. Empêcher le scroll sur les appareils tactiles.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
C'est la solution moderne pour éviter que les headers collants ne recouvrent la cible d'un lien d'ancre.
QCM
30
Corrigé
Quel sélecteur cible un lien <a> dont l'attribut href commence exactement par 'https' ?
A. a[href^='https']
B. a[href$='https']
C. a[href*='https']
D. a[href|='https']
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
L'opérateur '^=' signifie 'commence par' dans les sélecteurs d'attributs CSS.
QCM
31
Corrigé
Que fait 'flex-basis: 0' par rapport à 'flex-basis: auto' ?
A. Il masque l'élément s'il n'y a pas assez de place.
B. Il ignore la taille du contenu pour distribuer l'espace de manière égale.
C. Il force l'élément à prendre 100% de la largeur du parent.
D. Il empêche l'élément de rétrécir si le conteneur est trop petit.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
En mettant la base à 0, Flexbox répartit l'espace uniquement selon le ratio 'flex-grow'.
QCM
32
Corrigé
Quel pseudo-élément permet de styliser le texte sélectionné par l'utilisateur ?
A. ::text-select
B. ::highlight
C. ::selection
D. ::active-text
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
::selection permet de changer la couleur de fond et du texte lors de la sélection à la souris.
QCM
33
Corrigé
Quelle propriété permet d'appliquer un flou sur les éléments situés DERRIÈRE un bloc semi-transparent ?
A. filter: blur()
B. background-filter
C. backdrop-filter
D. opacity-blur
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le backdrop-filter est essentiel pour créer l'effet 'frosted glass' (verre dépoli).
QCM
34
Corrigé
Comment s'appelle le mécanisme où les marges verticales de deux blocs adjacents se rejoignent ?
A. Margin nesting
B. Margin overflow
C. Margin collapse
D. Margin grouping
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le margin collapse fait que seule la plus grande marge entre deux éléments est conservée.
QCM
35
Corrigé
Quelle est la particularité des Container Queries (@container) ?
A. Elles ne fonctionnent que sur les images SVG.
B. Elles adaptent le style selon la taille du parent et non du viewport global.
C. Elles sont plus rapides que les Media Queries standard.
D. Elles nécessitent l'utilisation obligatoire de JavaScript.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Elles permettent de créer des composants réellement modulaires et autonomes.
QCM
36
Corrigé
Quel mot-clé de 'background-repeat' permet de répéter une image sans la couper, en l'étirant légèrement ?
A. round
B. space
C. repeat-all
D. fill
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'round' ajuste la taille de l'image pour qu'un nombre entier de répétitions tienne dans le bloc.
QCM
37
Corrigé
En CSS, que permet de réaliser la fonction clamp(1rem, 5vw, 2rem) ?
A. Forcer le texte à rester sur une seule ligne.
B. Définir une valeur fluide avec une limite minimale et maximale.
C. Arrondir les pixels à l'entier le plus proche.
D. Multiplier une valeur par son inclinaison écran.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Clamp est l'outil ultime pour la typographie responsive sans media queries.
QCM
38
Corrigé
Quelle propriété permet de définir l'ordre de priorité d'affichage sur l'axe Z ?
A. depth-index
B. layer-order
C. z-index
D. stack-priority
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le z-index gère la superposition des éléments (nécessite une position autre que 'static').
QCM
39
Corrigé
Quel sélecteur cible tous les éléments <li> qui suivent directement un autre <li> ?
A. li ~ li
B. li + li
C. li > li
D. li || li
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'opérateur '+' est le combinateur de frère adjacent direct.
QCM
40
Corrigé
Que signifie l'unité 'rem' ?
A. Relative to element margin.
B. Root em : relatif à la taille de police de la racine (html).
C. Real em : relatif à la taille réelle de l'écran.
D. Retina em : relatif à la densité de pixels.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Contrairement à 'em', 'rem' reste constant quel que soit l'imbrication des éléments.
Mots & Définitions
Consultez les définitions des termes importants.
Les variables CSS permettent de stocker des valeurs réutilisables, comme des couleurs ou des tailles. Elles facilitent la maintenance du code en évitant les répétitions. Une modification de la variable se répercute automatiquement sur tous les styles qui l’utilisent.
La fonction var() permet d’utiliser la valeur d’une variable CSS dans une règle de style. Elle rend les feuilles de style plus flexibles et dynamiques. C’est un outil central pour construire des thèmes cohérents.
Les filtres CSS servent à appliquer des effets visuels à des éléments comme les images ou les blocs. Ils permettent par exemple de modifier les couleurs, le contraste ou la luminosité. Ces effets sont gérés directement par le navigateur.
Les pseudo-classes CSS permettent de cibler un élément selon son état ou son comportement. Elles sont souvent utilisées pour gérer les interactions ou les statuts particuliers. Elles enrichissent considérablement la mise en forme conditionnelle.
La propriété text-transform contrôle la transformation visuelle des lettres d’un texte. Elle peut modifier l’apparence sans changer le contenu réel. Cela permet d’améliorer la lisibilité ou l’uniformité du texte.
Les balises de formulaire HTML servent à collecter des informations auprès de l’utilisateur. Elles permettent de créer des champs de saisie, des sélections et des indicateurs visuels. Elles sont essentielles pour l’interaction sur une page web.
Line-height définit l’espacement vertical entre les lignes d’un texte. Une bonne gestion de cet espacement améliore la lisibilité. C’est un paramètre important pour le confort de lecture.
Flexbox est un modèle de mise en page CSS conçu pour organiser les éléments dans une direction donnée. Il facilite l’alignement et la distribution de l’espace. Il est très utilisé pour créer des interfaces adaptatives.
Le mode d’affichage inline place les éléments sur une même ligne sans retour automatique. Il respecte le flux du texte environnant. Ce comportement est courant pour les éléments courts.
Le DOM représente la structure logique d’une page web sous forme d’arbre. Il permet aux navigateurs et aux scripts d’accéder aux éléments et de les manipuler. C’est une base essentielle du développement web moderne.
La propriété overflow contrôle l’affichage du contenu qui dépasse les limites d’un conteneur. Elle permet de masquer, afficher ou gérer le débordement. Cela aide à maîtriser l’apparence globale de la page.
Les unités relatives s’adaptent aux dimensions de l’écran ou aux paramètres du document. Elles favorisent la création de designs flexibles et responsives. Elles sont essentielles pour l’accessibilité multi-écrans.
À propos de ce QCM
Les QCM présentés abordent des notions clés du CSS et du HTML avancé, indispensables pour concevoir des interfaces modernes et maintenables.
Les variables CSS constituent un premier pilier, en permettant de centraliser les valeurs importantes comme les couleurs ou les espacements.
Cette approche favorise la cohérence visuelle et simplifie les évolutions futures du design.
Les propriétés avancées, telles que les filtres ou les transformations de texte, offrent un contrôle précis sur l’apparence des éléments.
Elles permettent d’améliorer l’expérience utilisateur sans modifier le contenu structurel.
Les pseudo-classes enrichissent cette logique en adaptant le style selon l’état ou le comportement des éléments, renforçant ainsi l’interactivité.
La mise en page occupe également une place essentielle.
Les notions liées au modèle flexbox, à l’ordre des éléments et au débordement du contenu aident à comprendre comment organiser efficacement les composants d’une page.
Ces concepts sont fondamentaux pour créer des interfaces réactives et bien structurées.
Les balises et attributs de formulaire complètent cet apprentissage en introduisant la dimension interactive du web.
Ils permettent de collecter des données tout en améliorant l’ergonomie et la clarté pour l’utilisateur.
Enfin, la compréhension du DOM et des unités relatives renforce la capacité à concevoir des pages adaptables à tous les écrans.
Grâce à ces QCM, l’apprenant développe ses compétences théoriques, s’entraîne de manière ciblée et se prépare efficacement à des évaluations ou projets concrets.
Conclusion
Cette série de QCM offre une vision approfondie des outils essentiels du HTML et du CSS avancé.
Elle permet de mieux comprendre la logique du design web moderne et d’acquérir des réflexes professionnels.
En s’exerçant régulièrement, l’utilisateur consolide ses connaissances, améliore sa capacité d’analyse et gagne en autonomie dans la création d’interfaces.
Cette progression continue constitue un atout majeur pour réussir des examens, des concours ou des projets web ambitieux, tout en posant des bases solides pour évoluer dans le développement front-end.
