$course$/QCM de NSI/Première/CSS : mise en forme Feuilles de style en cascade (CSS), syntaxe d'une règle,
sélecteurs (élément, classe, identifiant), propriétés
courantes (couleur, taille, marges), modèle de boîte,
cascade et héritage, intégration au HTML.

]]> CSS : mise en forme — Q01 : Que signifie CSS ? Que signifie l'acronyme CSS ?

]]> CSS sépare la structure (HTML) de la
présentation (CSS). Bonne pratique pour la
maintenabilité.

]]> 1.0 0.0 0 true true abc Color and Style System

]]> Cette appellation n'a
pas d'existence officielle.
Le standard porte le nom
Cascading Style Sheets,
mis au point par le W3C.

]]> Cascading Style Sheets

]]> Bonne réponse : feuilles de style en
cascade. La cascade décrit comment les
règles s'appliquent et se combinent quand
plusieurs s'opposent.

]]> Computer Style Sheet

]]> Le sigle officiel est
Cascading Style Sheets.
La notion de « cascade »
est essentielle, car elle
décrit comment les règles
se combinent ou se
surchargent.

]]> Centralized Style Standard

]]> Cette dénomination est
inventée. Le sigle CSS
renvoie aux Cascading
Style Sheets, défini par
le W3C dès 1996.

]]> CSS : mise en forme — Q02 : Syntaxe d'une règle Quelle est la structure d'une règle CSS ?

]]> Exemple : p { color: red; font-size: 16px; }.
Le ; final est facultatif sur la dernière
déclaration mais recommandé.

]]> 1.0 0.0 0 true true abc `

css

sélecteur { propriété: valeur; ... }

]]> Bonne réponse : sélecteur (qui ?), accolades,
paires propriété : valeur séparées par des
points-virgules.

]]> `

css

<sélecteur propriété="valeur">

]]> Erreur : c'est plutôt une syntaxe HTML.

]]> `

css

sélecteur (propriété = valeur)

]]> Erreur : pas de parenthèses ni de signe
égal.

]]> `

css

sélecteur -> propriété -> valeur

]]> Erreur : syntaxe inventée.

]]> CSS : mise en forme — Q03 : Sélecteur d'élément Comment écrire une règle qui s'applique à
tous les paragraphes <p> ?

]]> Sélecteur d'élément : nom seul (h1, p,
div...). Il sélectionne tous les éléments
de ce type dans la page.

]]> 1.0 0.0 0 true true abc p { ... }

]]> Bonne réponse : on désigne le type d'élément par son nom (sans <>).

]]> <p> { ... }

]]> Erreur : pas de chevrons en CSS.

]]> #p { ... }

]]> Erreur : # désigne un id, pas un
élément.

]]> .p { ... }

]]> Erreur : . désigne une classe.

]]> CSS : mise en forme — Q04 : Sélecteur de classe Comment cibler les éléments ayant
class="bouton" ?

]]> Mnémonique : . = class (commencent
tous deux par 'c' à l'oreille). Une classe peut
être appliquée à plusieurs éléments.

]]> 1.0 0.0 0 true true abc bouton { ... }

]]> Erreur : sans préfixe, ce serait un
sélecteur d'élément (qui n'existerait pas).

]]> @bouton { ... }

]]> Erreur : @ introduit des règles
spéciales (@media, @import...).

]]> #bouton { ... }

]]> Erreur : # désigne un id (élément
unique).

]]> .bouton { ... }

]]> Bonne réponse : le point désigne une
classe. Très utilisé pour réutiliser un
style sur plusieurs éléments.

]]> CSS : mise en forme — Q05 : Sélecteur d'id Comment cibler l'élément ayant id="navigation" ?

]]> Trois sélecteurs de base : élément (sans
préfixe), classe (.), id (#). On peut les
combiner : p.important (paragraphes ayant
la classe « important »).

]]> 1.0 0.0 0 true true abc navigation { ... }

]]> Erreur : sans préfixe, ce serait un
sélecteur d'élément.

]]> .navigation { ... }

]]> Erreur : . désigne une classe.

]]> *navigation { ... }

]]> Erreur : * est le sélecteur universel
(tous les éléments).

]]> #navigation { ... }

]]> Bonne réponse : le dièse (#) désigne
un id. Comme un id doit être unique, ce
sélecteur cible un seul élément.

]]> CSS : mise en forme — Q06 : Couleur du texte Quelle propriété change la couleur du texte ?

]]> Distinguer color (texte) et
background-color (fond). Plusieurs syntaxes
pour les couleurs : nommée (red),
hexadécimale (#ff0000), rgb, rgba, hsl.

]]> 1.0 0.0 0 true true abc background

]]> Erreur : background (ou
background-color) change la couleur de fond, pas du texte.

]]> color

]]> Bonne réponse : color: red;,
color: #ff0000;, color: rgb(255, 0, 0);.

]]> font-color

]]> Erreur : propriété inexistante.

]]> text-color

]]> Erreur : propriété inexistante.

]]> CSS : mise en forme — Q07 : Intégrer du CSS Quelle est la meilleure pratique pour
intégrer du CSS dans un projet HTML ?

]]> Trois façons d'intégrer CSS : externe
(<link>), interne (<style>), inline
(style="..."). L'externe est la meilleure
pratique.

]]> 1.0 0.0 0 true true abc Un fichier .css séparé, lié via <link>

]]> Bonne réponse : séparation des
préoccupations, mise en cache par le
navigateur, partage entre pages, code
maintenable.

]]> Mettre du CSS dans chaque attribut style="..."

]]> Pratique courante mais à éviter :
répétitions, difficile à maintenir, ne
permet pas la réutilisation.

]]> Mettre tout le CSS dans une balise <style> à la fin du <body>

]]> Acceptable pour un prototype, mais le
fichier séparé est meilleur pour les
projets.

]]> Écrire le CSS dans le code JavaScript

]]> Existe (CSS-in-JS) mais hors programme NSI
et peu adapté à des projets simples.

]]> CSS : mise en forme — Q08 : Taille de texte Quelle propriété change la taille du texte ?

]]> Bonnes pratiques : utiliser des unités
relatives (em, rem) pour la
responsivité ; px pour les éléments
d'interface précis.

]]> 1.0 0.0 0 true true abc font-size

]]> Bonne réponse : font-size: 16px;,
font-size: 1.2em;. Unités courantes :
px (pixel), em (relatif au parent),
rem (relatif à la racine), %.

]]> large

]]> Erreur : large est une valeur, pas
une propriété (font-size: large;).

]]> size

]]> Erreur : propriété inexistante en CSS.

]]> text-size

]]> Erreur : propriété inexistante.

]]> CSS : mise en forme — Q09 : Commentaires CSS Comment écrire un commentaire en CSS ?

]]> Bonne pratique : commenter les sections
principales et les valeurs non triviales
(couleurs spécifiques, hacks de
compatibilité).

]]> 1.0 0.0 0 true true abc / commentaire /

]]> Bonne réponse : seule syntaxe valide en
CSS, peut s'étendre sur plusieurs lignes.

]]> // commentaire

]]> Erreur : c'est la syntaxe JavaScript, C++,
Java. CSS ne reconnaît pas //.

]]> -- commentaire

]]> Erreur : c'est la syntaxe SQL.

]]> # commentaire

]]> Erreur : c'est la syntaxe Python.

]]> CSS : mise en forme — Q10 : Lien vers fichier CSS Comment lier un fichier style.css à une page
HTML ?

]]> Convention : nommer la feuille style.css ou
main.css. Pour des styles spécifiques à
certaines pages, plusieurs feuilles peuvent
coexister.

]]> 1.0 0.0 0 true true abc `

html

<import rel="stylesheet" href="style.css">

]]> Erreur : balise inexistante en HTML. CSS a
@import mais c'est en CSS, pas en HTML.

]]> `

html

<style src="style.css" type="text/css">

]]> Erreur : <style> n'a pas d'attribut
src. Il sert à inclure du CSS interne.

]]> `

html

<css rel="stylesheet" href="style.css" />

]]> Erreur : la balise <css> n'existe pas.

]]> `

html

<link rel="stylesheet" href="style.css">

]]> Bonne réponse : balise <link> avec
rel="stylesheet" (relation = feuille de
style) et href (chemin). À placer dans
<head>.

]]> CSS : mise en forme — Q11 : Modèle de boîte Dans le modèle de boîte CSS, quels sont les
quatre composants concentriques d'un élément
(de l'intérieur vers l'extérieur) ?

]]> Comme une carte postale dans une enveloppe :
contenu (la carte), padding (le matelas
autour), border (l'enveloppe), margin
(l'espace entre l'enveloppe et la suivante).

]]> 1.0 0.0 0 true true abc bordure, marge, padding, contenu

]]> Erreur : ordre incorrect.

]]> padding, contenu, marge, bordure

]]> Erreur : ordre incorrect.

]]> contenu, padding, bordure, marge

]]> Bonne réponse : content (contenu),
padding (rembourrage interne),
border (bordure), margin (marge
externe).

]]> marge, contenu, bordure, padding

]]> Erreur : ordre incorrect.

]]> CSS : mise en forme — Q12 : Cascade et priorité Si deux règles s'appliquent au même élément,
laquelle l'emporte ?

]]> Calcul de spécificité : (a, b, c) où a =
nombre d'id, b = nombre de classes, c =
nombre d'éléments. Comparaison
lexicographique.

]]> 1.0 0.0 0 true true abc Au hasard, selon le choix interne du navigateur

]]> Erreur : la cascade est déterministe,
rien n'est laissé au choix du navigateur.

]]> Celle dont le sélecteur est le plus court, donc le plus général

]]> Erreur : c'est l'opposé, le sélecteur le
plus spécifique l'emporte.

]]> La plus spécifique, sinon la dernière écrite

]]> Bonne réponse : la cascade hiérarchise par
spécificité, puis par ordre de
déclaration. !important outrepasse
tout (à éviter).

]]> La toute première écrite dans le fichier

]]> Erreur : c'est l'inverse pour la même
spécificité (la dernière écrite l'emporte).

]]> CSS : mise en forme — Q13 : Héritage Que signifie qu'une propriété CSS est
héritée ?

]]> Toutes les propriétés ne sont pas héritées :
color, font-family oui ; border,
padding, margin non. Forcer
l'héritage : inherit.

]]> 1.0 0.0 0 true true abc Elle ne fonctionne que sur le premier élément

]]> L'héritage en CSS n'est
pas restreint au premier
élément ; il se propage
dans toute la sous-arborescence,
du parent vers ses
descendants.

]]> Elle s'applique à tous les éléments de la page

]]> Erreur : pas global, mais hiérarchique.

]]> Transmise du parent aux enfants

]]> Bonne réponse : par exemple, color est
héritée : body { color: blue; } rend
tout le texte de la page bleu, sauf si
un descendant la redéfinit.

]]> Elle est interdite par CSS3

]]> Erreur : très utilisée.

]]> CSS : mise en forme — Q14 : Unités CSS Quelle unité exprime une taille de texte
relative à la taille de police de
l'élément parent ?

]]> Deux unités relatives à connaître : em
(relative au parent) et rem (relative à la
racine). Bonne pratique d'accessibilité :
utiliser ces unités pour le texte, ainsi
l'utilisateur peut ajuster la taille de base
(préférences navigateur) et tout le site
s'adapte proportionnellement.

]]> 1.0 0.0 0 true true abc em

]]> Bonne réponse : 1.2em vaut 120 % de la
taille de police du parent. Adaptatif et
accessible.

]]> rem

]]> Erreur : rem est relatif à la
racine (<html>), pas au parent.

]]> cm

]]> Erreur : unité physique absolue, peu
adaptée à l'écran.

]]> px (pixel)

]]> Erreur : taille fixe, indépendante du
parent.

]]> CSS : mise en forme — Q15 : Sélecteurs combinés Que cible le sélecteur nav a (avec un
espace) ?

]]> Combinateurs : (descendant), > (enfant
direct), + (frère adjacent), ~ (frère).
Et , pour grouper plusieurs sélecteurs.

]]> 1.0 0.0 0 true true abc Le premier <a> après un <nav>

]]> Erreur : ce serait nav + a (frère adjacent).

]]> Tous les <a> descendants d'un <nav>

]]> Bonne réponse : l'espace est le
combinateur de descendance. Pour les
enfants directs : nav > a.

]]> Aucun élément

]]> Le sélecteur nav a
est parfaitement valide
et cible bien des éléments :
tous les liens situés à
l'intérieur d'une zone
de navigation.

]]> Les éléments qui sont à la fois <nav> et <a>

]]> Erreur : c'est nav,a (virgule) qui ciblerait
les deux. Et un élément ne peut être à
la fois nav et a.

]]> CSS : mise en forme — Q17 : Couleurs en CSS Lesquels de ces formats désignent la même couleur (rouge pur) ?

]]> Quatre formats principaux : nommés (148
noms), hex (#rrggbb), rgb/rgba (transparence
via le 4ᵉ canal), hsl/hsla (teinte/saturation/
luminosité, plus intuitif).

]]> 1.0 0.0 0 true true abc red, #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)

]]> Bonne réponse : tous ces formats
représentent le rouge pur. Choisir selon
ce qui est plus lisible/calculable.

]]> Seulement red et #ff0000, pas les deux autres

]]> Erreur : les quatre sont équivalents.

]]> Aucun, chacun donne une nuance de rouge différente

]]> Au moins l'un de ces
formats représente bien
du rouge ; en réalité,
tous les quatre désignent
exactement la même couleur.

]]> Seulement la notation rgb(255, 0, 0), la plus précise

]]> La notation rgb(255, 0, 0)
n'est pas la seule à
désigner du rouge pur.
Le mot-clé red, le code
hexadécimal #ff0000 et
la notation HSL produisent
le même résultat.

]]> CSS : mise en forme — Q18 : Deux règles de même spécificité `

css

p { color: blue; }

p { color: red; }

html

<p>Texte</p>

`
Quelle est la couleur du texte ?

]]> La cascade compare d'abord la spécificité ;
en cas d'égalité (ici deux sélecteurs
d'élément), c'est l'ordre d'apparition qui
décide : la dernière règle écrite l'emporte.

]]> 1.0 0.0 0 true true abc Rouge, car la dernière règle écrite l'emporte

]]> Bonne réponse : les deux sélecteurs p
ont exactement la même spécificité
(0,0,1). À égalité, c'est l'ordre
d'écriture qui départage, à savoir la
dernière règle déclarée.

]]> Bleu, car la première règle rencontrée est prioritaire

]]> Erreur classique : croire que la première
déclaration « verrouille » la propriété.
C'est l'inverse, à spécificité égale la
dernière règle écrite écrase la
précédente.

]]> Noir, car les deux règles s'annulent mutuellement

]]> Erreur : un conflit CSS n'annule jamais
les règles en jeu. La cascade est faite
précisément pour trancher, ici en faveur
de la dernière règle écrite.

]]> Cela dépend du navigateur qui affiche la page

]]> Erreur : la résolution de la cascade est
normalisée et identique dans tous les
navigateurs. À spécificité égale, la
dernière règle écrite l'emporte partout.

]]> CSS : mise en forme — Q20 : Plusieurs classes Un élément peut-il avoir plusieurs classes ?

]]> Multi-classes = principe de composition.
Très utilisé par les frameworks (Bootstrap,
Tailwind) : combiner de petits utilitaires
pour bâtir une mise en forme.

]]> 1.0 0.0 0 true true abc Oui, séparées par des virgules simples

]]> Erreur : l'attribut class est découpé
sur les espaces, la virgule n'est pas un
séparateur. class="bouton,primaire"
définirait une seule classe nommée
« bouton,primaire ».

]]> Non, une seule par élément

]]> Erreur : on peut en mettre plusieurs.

]]> Oui, séparées par des espaces

]]> Bonne réponse : pratique pour combiner
des styles modulaires. Chaque classe est
appliquée indépendamment.

]]> Non, il faut utiliser un id

]]> Erreur : id et class sont indépendants.

]]> CSS : mise en forme — Q21 : Style ne s'applique pas Mon CSS ne semble pas s'appliquer à un élément.
Quelles sont les causes les plus probables ?

]]> Réflexe : ouvrir l'inspecteur (F12),
sélectionner l'élément, regarder l'onglet
« Styles » pour voir quelles règles
s'appliquent et lesquelles sont surchargées.

]]> 1.0 0.0 0 true true abc HTML5 ne supporte tout simplement pas du tout CSS

]]> Erreur : c'est l'inverse.

]]> Faute de frappe, surcharge, ou fichier non chargé

]]> Bonne réponse : trois pistes classiques.
Outils de débogage : inspecteur du
navigateur (F12), onglet « Computed »
montre les styles appliqués réellement et
d'où ils viennent.

]]> Il faut redémarrer le serveur web après chaque modification

]]> Possiblement (cache navigateur), mais
rarement la cause profonde.

]]> Le CSS est trop lent et n'a pas fini de s'appliquer

]]> Le moteur de rendu CSS
applique les règles
quasi instantanément.
Si un style ne s'affiche
pas, la cause est presque
toujours un sélecteur
erroné, une règle plus
spécifique ou un fichier
mal chargé.

]]> CSS : mise en forme — Q25 : Synthèse Parmi les affirmations suivantes sur CSS,
laquelle est fausse ?

]]> Mnémonique : .classe = catégorie (peut
regrouper N éléments) ; #id = identifiant
(un seul). À ne pas confondre.

]]> 1.0 0.0 0 true true abc Le modèle de boîte CSS comprend contenu, padding, bordure, marge

]]> Vrai : modèle fondamental.

]]> CSS sépare la présentation de la structure (HTML)

]]> Vrai : principe fondamental.

]]> La spécificité hiérarchise les sélecteurs : id > classe > élément

]]> Vrai : règle de la cascade.

]]> Un sélecteur de classe cible un seul élément à la fois

]]> Faux (donc bonne réponse) : une classe
(sélecteur préfixé par .) peut être
appliquée à plusieurs éléments. C'est le
id qui est unique par convention.

]]> CSS : mise en forme — Q26 : Largeur totale d'une boîte On applique le style suivant à un paragraphe
(modèle par défaut, box-sizing: content-box) :

`css p { width: 200px; padding: 10px; border: 2px solid black; margin: 15px; }`

Quelle largeur totale ce paragraphe occupe-t-il
horizontalement, marges comprises ?

]]> Avec box-sizing: content-box (défaut), la
largeur rendue vaut width + padding + bordures.
La propriété box-sizing: border-box change la
convention : width inclut alors padding et
bordure (l'élément ferait 200 px de large, soit
230 px avec ses marges), ce qui simplifie les
calculs de mise en page.

]]> 1.0 0.0 0 true true abc 227 px

]]> Erreur : ce calcul (200 + 10 + 2 + 15) ne
compte chaque épaisseur qu'une fois. Padding,
bordure et marge s'appliquent des deux
côtés de la boîte, il faut donc les
compter deux fois chacun.

]]> 254 px

]]> Bonne réponse : de part et d'autre du contenu,
chaque couche compte deux fois, soit
200 + 2 × 10 + 2 × 2 + 2 × 15 = 254 px.

]]> 224 px

]]> Erreur : ce calcul (200 + 2 × 10 + 2 × 2)
oublie la marge. Même extérieure à la
bordure, elle fait partie de la place occupée
par l'élément dans la page.

]]> 200 px

]]> Erreur : avec le modèle par défaut
(content-box), width ne désigne que la
largeur du contenu. Padding, bordure et
marge s'ajoutent autour.

]]> CSS : mise en forme — Q22 : Quelle règle l'emporte Considérez le code HTML suivant :

<p class="alerte" id="principal">Texte</p>

Trois règles CSS sont définies dans la même feuille de style :

- p { color: blue; }
- .alerte { color: orange; }
- #principal { color: red; }

De quelle couleur le mot « Texte » s'affichera-t-il ?

]]> La spécificité d'un sélecteur se calcule à partir
du nombre d'identifiants, de classes et d'éléments
qu'il contient. Un identifiant pèse plus qu'une
classe, qui pèse plus qu'un sélecteur d'élément.
Le style en ligne (style="...") est encore
au-dessus, et !important permet d'outrepasser
la cascade naturelle (à utiliser avec parcimonie).

]]> 1.0 0.0 0 true true abc Rouge, car le sélecteur d'identifiant a la spécificité la plus élevée

]]> Bonne réponse : lorsqu'aucune règle n'est marquée
!important et qu'il n'y a pas de style en ligne,
c'est la spécificité qui départage. L'identifiant
(#principal) l'emporte sur la classe (.alerte),
qui l'emporte elle-même sur le sélecteur d'élément
(p).

]]> Bleu, car le sélecteur d'élément p est le plus général donc le plus prioritaire

]]> Erreur : c'est exactement l'inverse. En CSS, plus
un sélecteur est précis, plus il est prioritaire.
Le sélecteur d'élément est le moins spécifique.

]]> Orange, car la règle de la classe est la deuxième dans la feuille

]]> Erreur : l'ordre des règles n'intervient qu'en cas
d'égalité de spécificité. Ici, l'identifiant est
plus spécifique que la classe, donc l'ordre n'a
pas d'effet.

]]> La couleur est indéterminée car trois règles différentes s'appliquent en même temps

]]> Erreur : la cascade CSS définit précisément un
ordre de priorité (spécificité, puis ordre
d'apparition) qui rend la résolution toujours
déterministe.

]]> CSS : mise en forme — Q23 : Calcul d'une largeur rendue Une boîte CSS reçoit les propriétés suivantes :

width: 200px; padding: 20px; border: 2px solid black; margin: 10px;

Avec box-sizing: border-box, quelle est la
largeur rendue de la boîte (zone occupée à
l'écran par le contenu, le padding et la bordure,
sans inclure la marge externe) ?

]]> En border-box, la largeur rendue est directement
\text{width} ; en content-box (défaut), elle vaut
\text{width} + 2 \times \text{padding} + 2 \times
\text{bordure}, soit ici 244 px. C'est pourquoi de
nombreux projets définissent , ::before, *::after
{ box-sizing: border-box; } dans leur feuille de
style globale : les dimensions annoncées sont alors
celles réellement occupées.

]]> 1.0 0.0 0 true true abc 200 px, car width fixe directement la largeur rendue

]]> Bonne réponse : en border-box, la largeur
rendue vaut exactement \text{width}, padding et
bordure compris. Le contenu se réduit alors à
200 - 2 × 20 - 2 × 2 = 156 px. La
marge reste à l'extérieur de la boîte.

]]> 244 px (200 + 2 × 20 + 2 × 2)

]]> Erreur : ce calcul applique la formule du modèle
par défaut content-box, où padding et bordure
s'ajoutent à width. En border-box, ils sont
déjà inclus dans les 200 px annoncés.

]]> 156 px (200 - 2 × 20 - 2 × 2)

]]> Erreur : 156 px est la largeur du contenu
seul, une fois padding et bordure retranchés.
L'énoncé demande la largeur rendue de la boîte,
qui vaut ici directement width.

]]> 220 px, en incluant la marge des deux côtés

]]> Erreur : la marge externe représente l'espace que
la boîte revendique autour d'elle, pas la largeur
de la boîte. L'énoncé demande explicitement de
l'exclure du calcul.

]]>