Entretien CSS Débutant — Sélecteurs et Box Model

Q: Quelle propriété CSS définit la couleur du texte ?

Bonne réponse : color. La propriété color définit la couleur du texte. background-color définit la couleur d'arrière-plan. text-color et font-color n'existent pas en CSS standard.

Q: Qu'est-ce que le "box model" en CSS ?

Bonne réponse : La structure qui décrit l'espace occupé par un élément : contenu, padding, bordure et marge. Le box model (modèle de boîte) décrit comment chaque élément HTML est représenté comme une boîte rectangulaire composée de 4 couches : le contenu, le padding (espacement interne), la border (bordure) et la margin (marge externe).

Q: Quelle syntaxe permet de cibler tous les éléments <p> à l'intérieur d'un <div> ?

Bonne réponse : div p. div p est le sélecteur descendant — il cible tous les <p> imbriqués dans un <div>, à n'importe quelle profondeur. div > p cible uniquement les enfants directs. div + p cible le <p> immédiatement après le <div>. div, p cible les deux éléments séparément.

Q: Quelle valeur de la propriété display masque un élément SANS libérer son espace ?

Bonne réponse : visibility: hidden. visibility: hidden masque l'élément mais conserve son espace. display: none retire l'élément du flux et libère son espace. opacity: 0 rend l'élément invisible mais interactif. display: hidden n'existe pas.

Q: Que signifie l'unité em en CSS ?

Bonne réponse : La taille relative à la taille de police de l'élément parent. L'unité em est relative à la taille de police (font-size) de l'élément parent. Par exemple, si le parent a font-size: 16px, alors 2em = 32px. L'unité rem est similaire mais relative à l'élément racine <html>.

Q: Quelle est la différence entre margin et padding ?

Bonne réponse : margin est externe (espace entre éléments), padding est interne (espace entre contenu et bordure). margin est l'espace extérieur à la bordure — il crée un espace entre les éléments voisins. padding est l'espace intérieur à la bordure — il crée un espace entre le contenu et la bordure de l'élément. Le fond coloré (background) couvre le padding mais PAS les marges.

Q: Quel sélecteur cible un élément avec id="header" ?

Bonne réponse : #header. Le sélecteur d'ID utilise le symbole # suivi du nom de l'ID. Le sélecteur de classe utilise le point (.). Un ID doit être unique sur la page et a une spécificité plus élevée qu'une classe.

Q: Quelle propriété contrôle l'épaisseur d'un texte ?

Bonne réponse : font-weight. font-weight contrôle le poids (épaisseur) du texte. Les valeurs courantes sont normal (400), bold (700), ou des valeurs numériques de 100 à 900. font-style contrôle l'italique. font-size contrôle la taille.

Q: Comment écrire un commentaire en CSS ?

Bonne réponse : /* Ceci est un commentaire */. Les commentaires CSS s'écrivent entre /* et */. Ils peuvent s'étendre sur plusieurs lignes. La syntaxe // est utilisée en JavaScript,  en HTML, et # en Python ou SCSS (pas CSS pur).

Q: Qu'est-ce que la "cascade" dans les feuilles de style en cascade (CSS) ?

Bonne réponse : Le mécanisme par lequel le navigateur détermine quelle règle s'applique quand plusieurs règles ciblent le même élément. La cascade est l'algorithme qui résout les conflits entre règles CSS. Elle tient compte de l'origine (navigateur, auteur, utilisateur), de la spécificité (poids du sélecteur) et de l'ordre d'apparition. En cas d'égalité de spécificité, la dernière règle déclarée l'emporte.

Css Debutant Quiz-Css-Debutant Selecteurs-Css Box-Model Display Position Couleurs-Css Unites-Css Entretien-Css Qcm-Css-Debutant Apprendre-Css Front-End Css3

Débutant 🔀 Mixte 20 questions ⏱ 15 min

📝

Entretien CSS Débutant — Sélecteurs et Box Model

20 questions CSS niveau débutant : sélecteurs, box model, propriétés de base, display, position, couleurs et unités. Idéal pour préparer un premier entretien développeur web.

20 questions ⏱ ~15 min Niveau Débutant

Publié/Développé par Mezgani Said

Développeur web full‑stack et formateur spécialisé en Angular, TypeScript et Node.js, il partage sur AngularForAll des ressources complètes pour les développeurs : tutoriels pratiques, guides pas‑à‑pas, outils gratuits, exercices, QCM techniques et retours d’expérience issus de projets réels (SaaS, micro‑frontends, architectures modulaires, applications d’entreprise).
Le site couvre l’ensemble de l’écosystème web : front‑end, intégration HTML/CSS, Composants réutilisables, SEO, back‑end, cloud, IA, CLI, productivité, bien‑être, outils web et métiers du digital.
Un espace pensé pour générer, apprendre, progresser et développer des projets modernes avec des bonnes pratiques professionnelles.

Banque de révision : les 30 questions corrigées

Voici l'intégralité des 30 questions de « Entretien CSS Débutant — Sélecteurs et Box Model », chacune avec sa bonne réponse et son explication. Le quiz interactif ci-dessus en tire une sélection aléatoire à chaque tentative — utilisez cette liste complète pour réviser.

background-color
text-color
color (bonne réponse)
font-color

Explication : La propriété color définit la couleur du texte. background-color définit la couleur d'arrière-plan. text-color et font-color n'existent pas en CSS standard.

Un modèle pour créer des boîtes décoratives sur une page
La structure qui décrit l'espace occupé par un élément : contenu, padding, bordure et marge (bonne réponse)
Un système de grille en colonnes et rangées
Un module CSS pour les animations 3D

Explication : Le box model (modèle de boîte) décrit comment chaque élément HTML est représenté comme une boîte rectangulaire composée de 4 couches : le contenu, le padding (espacement interne), la border (bordure) et la margin (marge externe).

Explique la différence entre box-sizing: content-box (défaut) et box-sizing: border-box pour montrer ta maîtrise du sujet.

div + p
div > p
div p (bonne réponse)
div, p

Explication : div p est le sélecteur descendant — il cible tous les <p> imbriqués dans un <div>, à n'importe quelle profondeur. div > p cible uniquement les enfants directs. div + p cible le <p> immédiatement après le <div>. div, p cible les deux éléments séparément.

display: none
visibility: hidden (bonne réponse)
opacity: 0
display: hidden

Explication : visibility: hidden masque l'élément mais conserve son espace. display: none retire l'élément du flux et libère son espace. opacity: 0 rend l'élément invisible mais interactif. display: hidden n'existe pas.

La taille en pixels de l'écran
La taille relative à la taille de police de l'élément parent (bonne réponse)
La moitié de la largeur du viewport
Un pixel indépendant du périphérique

Explication : L'unité em est relative à la taille de police (font-size) de l'élément parent. Par exemple, si le parent a font-size: 16px, alors 2em = 32px. L'unité rem est similaire mais relative à l'élément racine <html>.

margin est externe (espace entre éléments), padding est interne (espace entre contenu et bordure) (bonne réponse)
padding est externe (espace entre éléments), margin est interne (espace entre contenu et bordure)
margin et padding sont identiques, seul le nom change
margin agit uniquement en horizontal, padding uniquement en vertical

Explication : margin est l'espace extérieur à la bordure — il crée un espace entre les éléments voisins. padding est l'espace intérieur à la bordure — il crée un espace entre le contenu et la bordure de l'élément. Le fond coloré (background) couvre le padding mais PAS les marges.

Mentionne le "margin collapse" : les marges verticales entre deux blocs adjacents fusionnent (la plus grande l'emporte), ce qui est un comportement souvent surprenant.

.header
#header (bonne réponse)
*header
id=header

Explication : Le sélecteur d'ID utilise le symbole # suivi du nom de l'ID. Le sélecteur de classe utilise le point (.). Un ID doit être unique sur la page et a une spécificité plus élevée qu'une classe.

font-size
text-weight
font-weight (bonne réponse)
font-style

Explication : font-weight contrôle le poids (épaisseur) du texte. Les valeurs courantes sont normal (400), bold (700), ou des valeurs numériques de 100 à 900. font-style contrôle l'italique. font-size contrôle la taille.

// Ceci est un commentaire
/* Ceci est un commentaire */ (bonne réponse)
# Ceci est un commentaire

Explication : Les commentaires CSS s'écrivent entre /* et */. Ils peuvent s'étendre sur plusieurs lignes. La syntaxe // est utilisée en JavaScript,  en HTML, et # en Python ou SCSS (pas CSS pur).

Une animation de chute d'éléments sur la page
Le mécanisme par lequel le navigateur détermine quelle règle s'applique quand plusieurs règles ciblent le même élément (bonne réponse)
La façon dont les styles sont hérités automatiquement de parent à enfant
L'ordre dans lequel les fichiers CSS sont chargés par le serveur

Explication : La cascade est l'algorithme qui résout les conflits entre règles CSS. Elle tient compte de l'origine (navigateur, auteur, utilisateur), de la spécificité (poids du sélecteur) et de l'ordre d'apparition. En cas d'égalité de spécificité, la dernière règle déclarée l'emporte.

Distingue la cascade (résolution des conflits) de l'héritage (transmission de certaines propriétés du parent aux enfants). Ce sont deux mécanismes distincts.

Retire l'élément du flux normal et le positionne par rapport à la fenêtre
Positionne l'élément relativement à son premier ancêtre positionné
Permet de décaler l'élément par rapport à sa position d'origine, sans le retirer du flux (bonne réponse)
Fixe l'élément à sa position et empêche tout défilement

Explication : Avec position: relative, l'élément reste dans le flux normal ET peut être décalé avec top, right, bottom, left par rapport à sa position naturelle. L'espace qu'il occupait est conservé. Il devient aussi un ancêtre positionné pour ses enfants en absolute.

border-style: rounded
corner-radius
border-radius (bonne réponse)
round-corners

Explication : border-radius arrondit les coins d'un élément. On peut définir toutes les coins en une valeur (border-radius: 8px), chaque coin séparément (border-radius: 5px 10px 15px 20px), ou créer un cercle parfait avec border-radius: 50%.

100 pixels de large
100% de la largeur de l'écran
100% de la largeur de l'élément contenant (parent) (bonne réponse)
100% de la largeur du viewport

Explication : width: 100% signifie que l'élément prend 100% de la largeur de son parent. Si le parent fait 800px, l'élément fera 800px. Pour la largeur du viewport, on utilise 100vw.

block prend toute la largeur disponible et crée un saut de ligne ; inline s'intègre dans le flux de texte (bonne réponse)
block est utilisé pour les images, inline pour le texte
block et inline se comportent identiquement, seule la nomenclature change
inline s'affiche en pleine largeur, block s'intègre dans le texte

Explication : Un élément block (<div>, <p>) occupe toute la largeur disponible et force un saut de ligne avant et après. Un élément inline (<span>, <a>) s'intègre dans le flux de texte, prend uniquement la largeur de son contenu et ne crée pas de saut de ligne.

Mentionne aussi inline-block qui combine les deux : s'intègre dans le flux comme inline mais accepte largeur/hauteur comme un block.

color: hex(FF5733)
color: 0xFF5733
color: #FF5733 (bonne réponse)
color: rgb-hex(FF5733)

Explication : Les couleurs hexadécimales en CSS commencent par # suivi de 6 chiffres hexadécimaux (0-9, A-F) représentant Rouge, Vert, Bleu (RR-GG-BB). On peut aussi utiliser la notation courte à 3 chiffres (#F53 = #FF5533).

text-style
font-family (bonne réponse)
font-name
typeface

Explication : font-family spécifie la famille de polices à utiliser. On peut lister plusieurs polices comme valeurs de secours : font-family: Arial, Helvetica, sans-serif;. Si la première police n'est pas disponible, le navigateur essaie la suivante.

element-shadow
box-shadow (bonne réponse)
shadow-box
border-shadow

Explication : box-shadow ajoute une ombre à un élément. La syntaxe est : box-shadow: offset-x offset-y blur-radius spread-radius color. Exemple : box-shadow: 2px 4px 8px rgba(0,0,0,0.2);. Pour l'ombre du texte, on utilise text-shadow.

text-align: center appliqué à l'élément
margin: auto sur l'axe horizontal avec une largeur définie (bonne réponse)
display: center sur l'élément parent
float: center sur l'élément

Explication : Pour centrer un élément block horizontalement, utilise margin: 0 auto (ou margin-left: auto; margin-right: auto) avec une largeur définie (width ou max-width). Le navigateur répartit automatiquement l'espace restant de chaque côté. text-align: center centre uniquement le contenu inline (texte, images inline).

Précise qu'avec Flexbox, on utilise justify-content: center sur le parent, ce qui est bien plus flexible.

Cache l'élément entier
Coupe le contenu qui dépasse les dimensions de l'élément (bonne réponse)
Crée une barre de défilement automatique
Empêche le texte de se mettre sur plusieurs lignes

Explication : overflow: hidden coupe (clip) tout contenu qui dépasse les bordures de l'élément. Les autres valeurs sont : visible (défaut, le contenu dépasse), scroll (barre de défilement toujours visible), auto (barre de défilement seulement si nécessaire).

p.intro
#hero (bonne réponse)
div p span
.card .title

Explication : L'ID #hero a la spécificité la plus élevée (0,1,0,0 = 100 points). Les classes et pseudo-classes valent 10 points chacune, les éléments 1 point. p.intro = 0,0,1,1 (11pts), .card .title = 0,0,2,0 (20pts), div p span = 0,0,0,3 (3pts).

text-spacing
letter-spacing
line-height (bonne réponse)
word-spacing

Explication : line-height définit la hauteur de ligne (interlignage). Une valeur unitless comme line-height: 1.5 est recommandée — elle est relative à la taille de police courante. letter-spacing espace les lettres et word-spacing espace les mots.

L'élément est retiré du flux et positionné par rapport à son ancêtre positionné le plus proche (bonne réponse)
L'élément reste dans le flux et se positionne selon ses voisins
L'élément est fixé en haut de la page, visible lors du défilement
L'élément occupe toute la largeur et hauteur de la page

Explication : Avec position: absolute, l'élément est retiré du flux (il ne prend plus de place dans la mise en page) et se positionne par rapport au premier ancêtre ayant une position autre que static. Si aucun ancêtre positionné n'existe, il se positionne par rapport au <body>.

Pour utiliser position: absolute sur un enfant et le positionner à l'intérieur du parent, ajoute position: relative sur le parent.

transparency
filter: alpha
opacity (bonne réponse)
visibility

Explication : opacity définit la transparence d'un élément. Sa valeur va de 0 (totalement transparent) à 1 (totalement opaque). Elle affecte l'élément ET tous ses enfants. Pour ne rendre transparent que la couleur de fond, utilise rgba(r,g,b,a) sur la propriété background-color.

Change la police en une police en majuscules
Affiche tout le texte en majuscules (bonne réponse)
Augmente la taille du texte
Met le texte en gras

Explication : text-transform: uppercase affiche tout le texte en MAJUSCULES, sans modifier le contenu HTML. Les autres valeurs sont lowercase (minuscules), capitalize (première lettre de chaque mot en majuscule) et none (valeur par défaut).

margin
spacing
gap
padding (bonne réponse)

Explication : padding crée un espacement interne entre le contenu d'un élément et sa bordure. margin crée un espacement externe entre les éléments. gap est utilisé dans les contextes Flexbox et Grid pour l'espacement entre les éléments enfants.

(bonne réponse)

Explication : La balise <link rel="stylesheet" href="style.css"> placée dans le <head> HTML lie une feuille de style externe. L'attribut rel="stylesheet" indique la relation, href spécifie le chemin du fichier CSS.

Les styles définis sur un élément parent se transmettent automatiquement à TOUS ses enfants pour toutes les propriétés
Certaines propriétés (couleur, police…) se transmettent aux enfants ; d'autres (marges, bordures…) ne s'héritent pas (bonne réponse)
L'héritage est désactivé par défaut et doit être activé avec inherit: true
Seules les classes CSS s'héritent, pas les propriétés directes

Explication : L'héritage permet à certaines propriétés CSS définies sur un parent de se transmettre aux descendants. Les propriétés qui s'héritent sont principalement liées au texte : color, font-family, font-size, line-height. Les propriétés de boîte (margin, padding, border) ne s'héritent pas. On peut forcer l'héritage avec inherit.

Utilise inherit comme valeur pour forcer l'héritage, initial pour revenir à la valeur par défaut du navigateur, et unset pour réinitialiser intelligemment.

stack-order
layer-index
z-index (bonne réponse)
depth

Explication : z-index contrôle l'ordre d'empilement des éléments positionnés (non-static). Un z-index plus élevé place l'élément au-dessus. z-index: 1 est au-dessus de z-index: 0. Les valeurs négatives placent l'élément derrière. z-index n'a d'effet que sur les éléments positionnés.

background-size: auto
background-size: 100%
background-size: contain
background-size: cover (bonne réponse)

Explication : background-size: cover redimensionne l'image pour couvrir entièrement l'élément en conservant les proportions. Si nécessaire, l'image est rognée. contain adapte l'image pour être entièrement visible (sans rogner, mais peut laisser des espaces vides).

Creative Style Syntax
Cascading Style Sheets (bonne réponse)
Computer Styled Structure
Content Styling System

Explication : CSS signifie Cascading Style Sheets (Feuilles de Style en Cascade). C'est un langage de présentation utilisé pour décrire l'apparence des documents HTML. Le mot "Cascading" fait référence à l'algorithme de cascade qui détermine quelle règle s'applique en cas de conflit.

Le "Cascading" dans CSS est fondamental — explique comment la cascade, la spécificité et l'héritage interagissent pour déterminer le style final appliqué à chaque élément.