CSS Basics Flashcards
Que signifie CSS et quel est son rôle dans le développement web ?
CSS signifie Cascading Style Sheet (Feuille de style en cascade). C’est un langage de règles qui permet de sélectionner les éléments d’une page pour en changer l’apparence. Le CSS est responsable de toute la mise en forme visuelle d’un site web, permettant de contrôler la typographie, les couleurs, le positionnement, les dimensions, l’adaptabilité et les animations.
Quelles sont les trois méthodes pour intégrer du CSS dans une page HTML ? Laquelle est recommandée et pourquoi ?
Les trois méthodes sont :
* Le CSS externe (via un fichier .css séparé lié avec une balise <link></link>)
* Le CSS interne (dans une balise <style> dans le <head> du document)
* Le CSS en ligne (directement dans l'attribut style d'un élément HTML)
La méthode recommandée est le CSS externe car :
* Le fichier peut être partagé entre plusieurs pages HTML
* Le HTML reste dédié uniquement à la structure sémantique de la page
* La séparation des préoccupations facilite la maintenance
* Les fichiers peuvent être mis en cache par le navigateur pour améliorer les performances</style>
Expliquez la structure d’une règle CSS. Quels sont ses composants principaux ?
Une règle CSS se compose de :
* Un sélecteur qui définit les éléments ciblés
* Un bloc de déclarations entre accolades {}
* À l’intérieur du bloc, plusieurs déclarations séparées par des points-virgules
* Chaque déclaration est composée d’une propriété et d’une valeur séparées par deux-points
* Par exemple : h1 { color: blue; font-size: 20px; }
Pouvez-vous expliquer la différence entre les sélecteurs de type, de classe et d’ID ?
Sélecteur de type (ex: h1) : cible toutes les balises du type spécifié
* Sélecteur de classe (ex: .main-heading) : cible tous les éléments ayant l’attribut class correspondant; plusieurs éléments peuvent avoir la même classe
* Sélecteur d’ID (ex: #aboutHeading) : cible l’élément unique ayant cet identifiant; chaque ID doit être unique dans la page
Les sélecteurs d’ID ont une spécificité plus élevée que les classes, qui elles-mêmes ont une spécificité plus élevée que les sélecteurs de type.
Comment fonctionnent les sélecteurs hiérarchiques ? Quelle est la différence entre .content ul li et div.content ul li ?
Les sélecteurs hiérarchiques ciblent des éléments en fonction de leur position dans l’arborescence du DOM. L’espace entre les sélecteurs indique une relation descendant/ancêtre.
La différence entre .content ul li et div.content ul li:
* .content ul li cible tous les éléments li qui sont descendants d’un ul qui est lui-même descendant de n’importe quel élément avec la classe “content”
* div.content ul li est plus spécifique et cible uniquement les éléments li qui sont descendants d’un ul qui est lui-même descendant d’une div qui a la classe “content”
Expliquez la différence entre les sélecteurs adjacents (h1 + p) et les sélecteurs généraux de voisinage (h1 ~ p).
- Le sélecteur adjacent (h1 + p) cible uniquement l’élément p qui suit immédiatement un élément h1 et qui partage le même parent
- Le sélecteur général de voisinage (h1 ~ p) cible tous les éléments p qui suivent un élément h1 et qui partagent le même parent, qu’ils soient adjacents ou non
Comment pourriez-vous sélectionner tous les éléments pairs d’une liste ? Donnez un exemple de code.
On peut utiliser le sélecteur :nth-child(2n) ou :nth-child(even).
Exemple :
ul li:nth-child(2n) {
background-color: lightgray;
}
Ce code sélectionnera tous les éléments pairs d’une liste et leur appliquera un fond gris clair.
Qu’est-ce que la spécificité en CSS et pourquoi est-elle importante ?
La spécificité est un système de priorité qui détermine quelle règle CSS s’applique lorsque plusieurs règles ciblent le même élément et la même propriété. C’est important car cela permet de résoudre les conflits de style de manière prévisible et cohérente.
Comment créeriez-vous un sélecteur qui cible uniquement le premier paragraphe après un titre de niveau 2 ?
Utilisation du sélecteur adjacent :
css
h2 + p {
font-weight: bold;
color: blue;
Comment styliseriez-vous différemment un élément au survol de la souris ?
En utilisant la pseudo-classe :hover :
css
button {
background-color: blue;
color: white;
}
button:hover {
background-color: darkblue;
cursor: pointer; }
Dans quel ordre les styles CSS sont-ils appliqués quand plusieurs règles ciblent le même élément ?
Les styles sont appliqués dans cet ordre de priorité (du moins prioritaire au plus prioritaire) :
1. Styles par défaut du navigateur
2. Styles par sélecteur de type (ex: p, h1)
3. Styles par sélecteur de classe (ex: .section)
4. Styles par sélecteur d’ID (ex: #about)
5. Styles inline (via l’attribut style)
6. Styles avec !important
À spécificité égale, c’est la dernière règle déclarée dans le code qui l’emporte.
Comment la priorité est-elle déterminée entre un sélecteur de type, un sélecteur de classe et un sélecteur d’ID ?
La priorité est déterminée par la spécificité. Du moins prioritaire au plus prioritaire :
1. Sélecteur de type (ex: section) - spécificité faible
2. Sélecteur de classe (ex: .section) - spécificité moyenne
3. Sélecteur d’ID (ex: #about) - spécificité élevée
Par exemple, si un élément a un style défini par un sélecteur de type et un autre par un sélecteur de classe, c’est le style défini par la classe qui sera appliqué en cas de conflit.
Comment éviter les problèmes de spécificité dans vos feuilles de style ?
- Éviter l’utilisation des sélecteurs d’ID pour le styling
- Préférer les classes avec des noms spécifiques et sémantiques
- Éviter les sélecteurs trop profondément imbriqués
- Organiser les styles de manière modulaire
- Utiliser une méthodologie comme BEM (Block Element Modifier)
- Éviter l’utilisation de !important
- Créer une architecture CSS cohérente
Pourquoi est-il généralement préférable d’utiliser des classes plutôt que des IDs pour le styling CSS ?
- Les classes sont réutilisables sur plusieurs éléments
- Les IDs ont une spécificité très élevée qui peut créer des problèmes de cascade
- L’utilisation des classes permet une meilleure modularité
- Les classes facilitent la maintenance du code
- Les IDs sont préférables pour le JavaScript et les liens d’ancrage plutôt que pour le styling
Expliquez comment et pourquoi on utiliserait le sélecteur d’enfant direct (>) plutôt qu’un sélecteur descendant (espace).
Le sélecteur d’enfant direct > cible uniquement les éléments qui sont des enfants directs de l’élément parent, et non tous les descendants.
On l’utiliserait par exemple :
css
section > p {
margin-top: 1em;
}
Cela appliquera la marge uniquement aux paragraphes directement enfants de section, mais pas aux paragraphes qui seraient dans un div à l’intérieur de la section. C’est utile pour créer des styles plus précis et éviter les effets secondaires non désirés.
Expliquez ce qu’est la cascade en CSS et comment elle interagit avec la spécificité.
La cascade est le processus par lequel le navigateur détermine quelles règles CSS appliquer à chaque élément. Elle fonctionne selon trois critères appliqués dans cet ordre :
1. L’importance (les règles avec !important priment)
2. La spécificité des sélecteurs
3. L’ordre dans le code (la dernière règle déclarée l’emporte à spécificité égale)
La cascade et la spécificité travaillent ensemble pour déterminer quels styles sont appliqués lorsque plusieurs règles ciblent le même élément.
Quels sont les avantages d’utiliser des fichiers CSS externes plutôt que du CSS en ligne ou interne ?
- Séparation claire entre structure (HTML) et présentation (CSS)
- Réutilisation du même CSS sur plusieurs pages
- Mise en cache par le navigateur améliorant les performances
- Facilité de maintenance et d’organisation
- Meilleure gestion des médias queries pour le responsive design
- Possibilité de désactiver ou changer les styles sans toucher au HTML
- Chargement conditionnel selon les besoins
Comment le CSS peut-il contribuer à l’accessibilité d’un site web ?
Le CSS peut améliorer l’accessibilité en :
* Garantissant un contraste suffisant entre le texte et l’arrière-plan
* Permettant l’agrandissement du texte sans casser la mise en page
* Fournissant des styles pour les états de focus visibles
* Permettant d’adapter l’affichage pour différents appareils
* Utilisant des unités relatives (em, rem) pour permettre l’adaptation aux préférences utilisateur
* Créant des designs responsifs qui fonctionnent sur tous les dispositifs
* Fournissant des alternatives visuelles pour les éléments interactifs
Quels sont les différents domaines que le CSS permet de contrôler dans une interface utilisateur web, selon le document ?
Selon le document, le CSS permet de contrôler :
* La typographie
* Les couleurs
* Le positionnement
* Les dimensions
* L’adaptabilité (responsive design)
* Les animations
Comment géreriez-vous les conflits de style dans un projet avec plusieurs feuilles de style ?
- Établir une architecture CSS claire avec une convention de nommage (comme BEM, SMACSS ou OOCSS)
- Organiser les feuilles de style par fonctionnalité ou par composant
- Utiliser un préprocesseur CSS pour faciliter la modularité
- Établir une priorité d’import des feuilles de style
- Minimiser l’usage des sélecteurs à haute spécificité
- Documenter les principes de style du projet
- Implémenter éventuellement des approches comme CSS Modules ou des solutions CSS-in-JS pour isoler les styles
