Le développement web avancé repose sur une compréhension fine des mécanismes de mise en forme et de structuration des pages.
HTML et CSS ne servent pas uniquement à afficher du contenu, mais permettent aussi de créer des interfaces précises, accessibles et adaptées aux usages modernes.
Pour les étudiants, les développeurs en formation ou les candidats à des examens techniques, maîtriser ces notions constitue un véritable atout.
Cette page s’intéresse aux concepts plus approfondis du design web, notamment les sélecteurs complexes, les pseudo-éléments, la gestion de l’ordre visuel et les unités relatives.
Ces notions jouent un rôle essentiel dans la création d’interfaces claires et ergonomiques.
L’objectif est d’aider l’apprenant à dépasser les bases et à comprendre comment les navigateurs interprètent et organisent le contenu, afin de produire des pages professionnelles et bien structurées.
Le développement web avancé repose sur une compréhension fine des mécanismes de mise en forme et de structuration des pages.
HTML et CSS ne servent pas uniquement à afficher du contenu, mais permettent aussi de créer des interfaces précises, accessibles et adaptées aux usages modernes.
Pour les étudiants, les développeurs en formation ou les candidats à des examens techniques, maîtriser ces notions constitue un véritable atout.
Cette page s’intéresse aux concepts plus approfondis du design web, notamment les sélecteurs complexes, les pseudo-éléments, la gestion de l’ordre visuel et les unités relatives.
Ces notions jouent un rôle essentiel dans la création d’interfaces claires et ergonomiques.
L’objectif est d’aider l’apprenant à dépasser les bases et à comprendre comment les navigateurs interprètent et organisent le contenu, afin de produire des pages professionnelles et bien structurées.
QCM
1
Corrigé
Quel sélecteur cible tous les éléments <p> qui suivent immédiatement un élément <h2> ?
A. h2 p
B. h2 > p
C. h2 + p
D. h2 ~ p
Afficher la réponse
Cliquez pour voir la correction
Quelle propriété CSS permet de définir l'ordre d'affichage d'un élément dans un conteneur Flex ou Grid ?
A. z-index
B. order
C. flex-index
D. display-order
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La propriété 'order' permet de réorganiser visuellement les éléments sans modifier le HTML.
QCM
3
Corrigé
Quel pseudo-élément CSS est utilisé pour insérer du contenu avant le contenu d'un élément ?
A. ::first-line
B. ::after
C. ::before
D. ::marker
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
::before est utilisé avec la propriété 'content' pour ajouter du style ou du texte décoratif.
QCM
4
Corrigé
Que fait la propriété CSS 'box-shadow: 5px 10px 8px #888888;' ?
A. Ajoute une bordure de 5px
B. Ajoute une ombre portée à l'élément
C. Définit le rayon des coins
D. Change l'opacité du bloc
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Elle définit les décalages horizontal/vertical, le flou et la couleur de l'ombre.
QCM
5
Corrigé
Quelle balise HTML est utilisée pour définir une liste de termes et leurs descriptions ?
A. <ul>
B. <ol>
C. <dl>
D. <list>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<dl> signifie 'Description List', utilisée avec <dt> (terme) et <dd> (description).
QCM
6
Corrigé
Quelle unité CSS est relative à la taille de la police de l'élément parent ?
A. rem
B. px
C. em
D. vh
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Contrairement au 'rem' (racine), le 'em' est relatif à la taille de police du parent direct.
QCM
7
Corrigé
Comment forcer un texte à rester sur une seule ligne sans jamais revenir à la ligne ?
A. text-wrap: none;
B. white-space: nowrap;
C. line-break: forbidden;
D. overflow: hidden;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'white-space: nowrap' empêche le texte de s'adapter à la largeur du conteneur.
QCM
8
Corrigé
Quelle propriété CSS permet de lisser les polices sur certains navigateurs ?
A. text-rendering
B. font-smoothing
C. font-style
D. smooth-text
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'text-rendering: optimizeLegibility' aide à améliorer le rendu visuel des caractères.
QCM
9
Corrigé
Quel attribut HTML est utilisé pour spécifier la langue d'un document ou d'un élément ?
A. language
B. lang
C. xml:lang
D. locale
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'attribut 'lang' est crucial pour l'accessibilité et les moteurs de recherche.
QCM
10
Corrigé
Quel sélecteur CSS cible les éléments qui n'ont pas d'enfants (ni texte, ni balise) ?
A. :no-child
B. :void
C. :empty
D. :blank
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La pseudo-classe ':empty' cible les éléments totalement vides.
QCM
11
Corrigé
Quelle est la fonction de la balise <abbr> en HTML ?
A. Mettre un texte en gras
B. Définir une abréviation ou un acronyme
C. Créer un lien hypertexte
D. Insérer une citation
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Elle permet de donner la signification complète via l'attribut 'title'.
QCM
12
Corrigé
Quelle propriété CSS permet de contrôler l'aspect visuel des bordures d'un tableau vide ?
A. empty-cells
B. border-empty
C. table-layout
D. visibility
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'empty-cells: hide;' permet de masquer les bordures des cellules sans contenu.
QCM
13
Corrigé
Quel type d'input HTML5 permet de restreindre la saisie à un nombre ?
A. <input type='digit'>
B. <input type='number'>
C. <input type='integer'>
D. <input type='tel'>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'input 'number' permet aussi d'utiliser les attributs min, max et step.
QCM
14
Corrigé
En CSS, que fait 'background-attachment: fixed;' ?
A. L'image d'arrière-plan ne bouge pas pendant le défilement
B. L'image couvre tout l'écran
C. L'image se répète à l'infini
D. L'image est centrée horizontalement
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Cela crée un effet de parallaxe simple où le contenu défile sur une image fixe.
QCM
15
Corrigé
Quelle est la valeur par défaut de 'flex-direction' ?
A. column
B. row-reverse
C. row
D. stacked
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Par défaut, les éléments d'un conteneur flex se placent horizontalement (en ligne).
QCM
16
Corrigé
Quelle balise HTML est utilisée pour spécifier des ressources d'images alternatives ?
A. <source>
B. <picture>
C. <imgset>
D. <media>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<picture> permet de charger différentes images selon la taille de l'écran (Art Direction).
QCM
17
Corrigé
Quelle propriété CSS permet de définir si le texte est coupé avec des points de suspension ?
A. text-overflow: ellipsis;
B. text-cut: true;
C. overflow-style: dots;
D. word-clip: ellipsis;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Utilisé avec 'overflow: hidden' et 'white-space: nowrap', il ajoute '...' en fin de ligne.
QCM
18
Corrigé
Que signifie la valeur 'pointer-events: none;' en CSS ?
A. L'élément est invisible
B. L'élément ne répond plus aux clics de souris
C. Le curseur devient une main
D. L'élément est désactivé dans le formulaire
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'élément devient 'transparent' pour les interactions souris (on clique à travers).
QCM
19
Corrigé
Quelle propriété CSS permet de créer des colonnes de texte comme dans un journal ?
A. column-count
B. text-columns
C. flex-columns
D. grid-template-columns
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'column-count' divise automatiquement un bloc de texte en plusieurs colonnes fluides.
QCM
20
Corrigé
En HTML5, quel attribut est utilisé pour stocker des données personnalisées ?
A. custom-*
B. data-*
C. id-*
D. meta-*
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les attributs 'data-nom' permettent de stocker des infos récupérables en JS ou CSS.
QCM
21
Corrigé
Quelle est la principale différence entre :is() et :where() en termes de spécificité ?
A. :is() additionne les spécificités de tous ses arguments, contrairement à :where().
B. :where() a toujours une spécificité nulle, alors que :is() prend la spécificité de son argument le plus fort.
C. :is() a toujours une spécificité nulle, contrairement à :where().
D. :where() prend la spécificité de son argument le plus faible.
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, ce qui est idéal pour des styles de base faciles à surcharger.
QCM
22
Corrigé
Dans le modèle de boîte (box-sizing: border-box), si un élément a une largeur de 300px, un padding de 20px et une bordure de 5px, quelle est la largeur de son contenu réel ?
A. 300px
B. 275px
C. 250px
D. 350px
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Avec border-box, le padding (2x20) et la bordure (2x5) sont déduits de la largeur totale de 300px (300 - 40 - 10 = 250).
QCM
23
Corrigé
Que permet d'accomplir la valeur 'subgrid' appliquée à grid-template-columns ?
A. Elle divise chaque cellule de grille en une grille de 2x2.
B. Elle force l'élément enfant à définir ses propres colonnes sans tenir compte du parent.
C. Elle permet à l'élément enfant d'utiliser les lignes de colonne définies sur son parent.
D. Elle crée une grille indépendante du flux principal du document.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le subgrid permet d'aligner parfaitement des éléments imbriqués sur les pistes (tracks) de la grille parente.
QCM
24
Corrigé
Quel sélecteur CSS permet de cibler un élément <form> uniquement s'il contient un <input> invalide ?
A. form > input:invalid
B. form:has(input:invalid)
C. form:invalid
D. form < input:invalid
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La pseudo-classe :has() est un sélecteur relationnel puissant qui permet de cibler un parent en fonction de l'état de ses enfants.
QCM
25
Corrigé
Quelle propriété CSS permet de créer un contexte de formatage de bloc (BFC) sans modifier l'apparence visuelle ?
A. display: flow-root
B. overflow: hidden
C. float: left
D. display: inline-block
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
flow-root est la méthode moderne pour contenir les flottants sans les effets secondaires de 'overflow: hidden' ou 'clear'.
QCM
26
Corrigé
À quoi sert la propriété 'content-visibility: auto' ?
A. À traduire automatiquement le contenu textuel.
B. À optimiser le rendu en sautant le calcul des éléments hors écran.
C. À rendre un élément invisible pour les lecteurs d'écran.
D. À forcer l'affichage du contenu même si l'élément est vide.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Cette propriété améliore considérablement les performances de rendu en ne traitant que ce qui est proche du viewport.
QCM
27
Corrigé
Quelle unité CSS est basée sur la largeur du caractère '0' (zéro) de la police actuelle ?
A. ex
B. em
C. ch
D. rem
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
L'unité ch est idéale pour limiter la largeur des lignes de texte afin d'optimiser le confort de lecture (environ 60-80ch).
QCM
28
Corrigé
Quel est l'effet de 'isolation: isolate' ?
A. Il empêche l'élément d'être cliqué par l'utilisateur.
B. Il bloque l'héritage des styles CSS pour tous les enfants.
C. Il retire l'élément du flux normal du document.
D. Il crée un nouveau contexte d'empilement (stacking context).
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Isolate permet de confiner les z-index et les mix-blend-mode à l'intérieur de l'élément sans modifier le positionnement.
QCM
29
Corrigé
Quelle valeur de 'object-fit' permet de conserver le ratio d'une image tout en remplissant le conteneur, au risque de la rogner ?
A. contain
B. fill
C. cover
D. none
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Cover redimensionne l'image pour couvrir tout le conteneur en gardant ses proportions, idéal pour les headers.
QCM
30
Corrigé
En CSS Grid, comment peut-on forcer un élément à occuper toute la largeur d'une ligne sans connaître le nombre exact de colonnes ?
A. grid-column: 1 / span all
B. grid-column: 1 / -1
C. grid-column: 1 / 100%
D. grid-column: auto-fill
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'index -1 fait référence à la dernière ligne de la grille, permettant de traverser tout le conteneur dynamiquement.
QCM
31
Corrigé
Quel sélecteur cible un lien <a> uniquement si son attribut 'href' commence 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 ^= sélectionne les attributs dont la valeur commence par la chaîne de caractères spécifiée.
QCM
32
Corrigé
À quoi sert la pseudo-classe :focus-visible ?
A. À afficher une bordure rouge sur les éléments obligatoires.
B. À styliser le focus uniquement lorsqu'il est déclenché par le clavier (Tab).
C. À rendre les éléments de focus transparents à la souris.
D. À forcer l'affichage du focus même si l'élément est masqué.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Elle évite l'affichage d'un indicateur de focus disgracieux lors d'un clic souris tout en respectant l'accessibilité clavier.
QCM
33
Corrigé
Laquelle de ces propriétés permet de décaler le soulignement d'un texte par rapport à sa ligne de base ?
A. text-indent
B. text-underline-position
C. text-underline-offset
D. vertical-align
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Text-underline-offset offre un contrôle typographique précis sur la distance entre le texte et son soulignement.
QCM
34
Corrigé
Quelle est la particularité des 'Container Queries' par rapport aux 'Media Queries' ?
A. Elles sont plus rapides à charger par le navigateur.
B. Elles ne s'appliquent qu'aux images et aux vidéos.
C. Elles permettent de styliser un élément en fonction de la taille de son conteneur parent.
D. Elles ignorent complètement la taille du viewport.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Les Container Queries permettent de créer des composants modulaires dont le style dépend de l'espace disponible dans leur parent.
QCM
35
Corrigé
Que signifie l'unité 'rem' en CSS ?
A. Root em : elle est relative à la taille de police du parent direct.
B. Relative em : elle est relative à la taille de police de l'élément lui-même.
C. Responsive em : elle s'adapte à la résolution de l'écran.
D. Root em : elle est relative à la taille de police de l'élément racine (html).
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
L'unité rem assure une cohérence globale car elle se base uniquement sur la racine du document.
QCM
36
Corrigé
Comment s'appelle l'effet où les marges verticales de deux blocs adjacents fusionnent ?
A. Margin collapse
B. Margin nesting
C. Margin overlap
D. Margin grouping
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Le margin collapse fait en sorte que seule la plus grande marge soit appliquée entre deux éléments successifs.
QCM
37
Corrigé
À quoi sert la fonction 'clamp(1rem, 5vw, 2rem)' ?
A. À définir une largeur fixe qui ne change jamais.
B. À limiter une valeur entre un minimum, un idéal (fluide) et un maximum.
C. À additionner trois unités différentes pour créer une taille géante.
D. À arrondir les angles d'un conteneur selon la largeur du viewport.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Clamp est idéal pour la typographie responsive, empêchant le texte de devenir trop petit ou trop grand.
QCM
38
Corrigé
Quelle propriété CSS permet de modifier la direction du texte (ex: de droite à gauche pour l'arabe) ?
A. text-align
B. writing-mode
C. direction
D. text-orientation
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La propriété direction (avec les valeurs ltr ou rtl) contrôle le flux horizontal de lecture.
QCM
39
Corrigé
Quel est le comportement par défaut de 'flex-basis' ?
A. 0%
B. 100%
C. content
D. auto
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
La valeur auto indique au navigateur d'utiliser la largeur/hauteur définie ou, à défaut, la taille du contenu.
QCM
40
Corrigé
Quelle propriété permet de définir l'espacement entre les lignes de 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 (interlignage) définit la hauteur de la boîte de ligne, gérant l'espace vertical entre les textes.
Mots & Définitions
Consultez les définitions des termes importants.
Le sélecteur adjacent permet de cibler un élément qui suit immédiatement un autre élément spécifique. Il est utilisé pour appliquer un style précis dans un contexte très ciblé. Cela aide à structurer finement l’apparence d’une page.
La propriété order permet de modifier l’ordre visuel des éléments dans un conteneur flex ou grid. Elle agit uniquement sur l’affichage, sans changer la structure HTML. C’est un outil puissant pour organiser une interface de manière flexible.
Les pseudo-éléments permettent de styliser des parties spécifiques d’un élément ou d’insérer du contenu décoratif. Ils sont souvent utilisés pour enrichir l’interface sans modifier le HTML. Cela améliore la séparation entre contenu et présentation.
Box-shadow permet d’ajouter une ombre portée autour d’un élément. Elle contribue à créer une hiérarchie visuelle et un effet de profondeur. Cette propriété améliore l’esthétique et la lisibilité des interfaces.
Une liste de définition est utilisée pour associer des termes à leurs descriptions. Elle est adaptée aux glossaires et contenus explicatifs. Elle apporte une structure sémantique claire au document.
L’unité em est relative à la taille de la police de l’élément parent. Elle permet des mises en page flexibles et cohérentes. Son utilisation favorise l’adaptabilité du design.
La propriété white-space contrôle la gestion des espaces et des retours à la ligne dans un texte. Elle permet de forcer ou d’empêcher le passage à la ligne. C’est un réglage important pour l’affichage du contenu textuel.
L’attribut lang indique la langue d’un document ou d’un élément. Il améliore l’accessibilité et l’interprétation par les navigateurs et lecteurs d’écran. C’est un élément clé pour les sites multilingues.
Le DOM représente la structure hiérarchique d’une page web. Il permet d’accéder et de manipuler les éléments via des scripts ou des styles. Comprendre le DOM est essentiel pour le développement web moderne.
Les attributs data-* permettent de stocker des données personnalisées dans le HTML. Ces données peuvent être utilisées par le CSS ou le JavaScript. Ils facilitent la communication entre structure et comportement.
À propos de ce QCM
Les QCM proposés abordent des notions avancées du HTML et du CSS, indispensables pour concevoir des interfaces web modernes et efficaces.
Les sélecteurs CSS, qu’ils soient adjacents ou conditionnels, permettent de cibler précisément les éléments selon leur position ou leur état.
Cette précision offre un contrôle fin sur l’apparence sans alourdir la structure HTML.
Les pseudo-éléments et propriétés visuelles, comme les ombres portées ou la gestion du débordement, contribuent à enrichir l’interface tout en respectant les bonnes pratiques.
Ils permettent d’ajouter des détails graphiques sans compromettre la lisibilité du code.
Les propriétés liées au texte, telles que la gestion des espaces ou des coupures, jouent un rôle clé dans le confort de lecture.
La mise en page flexible est également au cœur de ces QCM.
Les propriétés liées à Flexbox et aux unités relatives permettent d’organiser les éléments de manière dynamique, indépendamment de l’ordre du code.
Cette logique est essentielle pour créer des designs adaptables à différentes tailles d’écran et contextes d’utilisation.
Les balises et attributs HTML abordés renforcent la dimension sémantique et interactive des pages.
Ils améliorent l’accessibilité, la structuration du contenu et la communication entre HTML, CSS et scripts.
Enfin, la compréhension du DOM et des données personnalisées prépare l’apprenant à des usages plus avancés du développement front-end.
Ces QCM favorisent ainsi une montée en compétence progressive, une auto-évaluation efficace et une préparation solide aux examens ou projets professionnels.
Conclusion
Cette série de QCM offre une approche approfondie des concepts avancés du HTML et du CSS.
Elle permet de consolider les connaissances techniques tout en développant une vision plus structurée du design web.
En s’entraînant régulièrement, l’apprenant affine son raisonnement, améliore sa maîtrise des outils et gagne en autonomie.
Ces compétences sont essentielles pour réussir des évaluations, concevoir des interfaces modernes et évoluer vers des projets web plus complexes.
La compréhension de ces notions constitue une base solide pour tout parcours en développement front-end.
