Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire la présentation d’un document écrit en HTML ou XML. Il est principalement utilisé pour styliser les pages web, en définissant des règles qui déterminent l’apparence des éléments sur la page.
Comment fonctionne le CSS ?
- Sélection des éléments :
- Le CSS fonctionne en ciblant des éléments HTML via des sélecteurs. Les sélecteurs indiquent quels éléments de la page doivent être stylisés. Par exemple, le sélecteur
pcible tous les éléments<p>(paragraphes) sur la page. - Il existe plusieurs types de sélecteurs, y compris les sélecteurs de type (
h1,p, etc.), les sélecteurs de classe (.classe), les sélecteurs d’identifiant (#id), et les sélecteurs d’attributs.
- Application des styles :
- Après avoir sélectionné les éléments, le CSS applique des règles de style à ces éléments. Une règle de style se compose d’un ou plusieurs propriétés et valeurs.
- Par exemple, la règle
color: red;appliquée à un élément change la couleur du texte en rouge. - Une règle CSS typique ressemble à ceci :
css p { color: blue; font-size: 16px; }
Cela signifie que tous les paragraphes (<p>) sur la page auront un texte bleu et une taille de police de 16 pixels.
- Cascading :
- Le terme « cascading » dans CSS fait référence à la manière dont les styles sont appliqués lorsqu’il y a des conflits entre différentes règles. Le CSS utilise un système de priorité appelé spécificité pour décider quelle règle appliquer lorsqu’il y a plusieurs règles en conflit.
- Par exemple, si vous avez une règle générale pour tous les paragraphes (
p { color: blue; }) et une autre règle plus spécifique pour un paragraphe particulier (#important-paragraph { color: red; }), la règle la plus spécifique (celle avec l’ID) l’emportera, et le paragraphe avec l’ID « important-paragraph » sera rouge.
- Héritage :
- Certaines propriétés CSS sont héritées des éléments parents aux éléments enfants. Par exemple, si vous définissez une couleur de texte sur un conteneur
<div>, tous les éléments enfants (par exemple,<p>,<span>, etc.) hériteront de cette couleur, sauf si vous spécifiez une autre couleur pour les enfants.
- Boîte de modèle (Box Model) :
- Tous les éléments HTML peuvent être considérés comme des boîtes rectangulaires. Le modèle de boîte (box model) est utilisé pour déterminer la taille des éléments, en tenant compte de la largeur, la hauteur, le remplissage (padding), la bordure (border) et les marges (margin).
- Par exemple :
css div { width: 200px; padding: 10px; border: 5px solid black; margin: 20px; }
Ce code crée une boîte pour un<div>qui a une largeur de 200 pixels, un remplissage de 10 pixels, une bordure de 5 pixels et une marge de 20 pixels autour de l’élément.
- Média Queries :
- Les media queries permettent de créer des styles CSS qui ne s’appliquent que sous certaines conditions, par exemple sur des écrans de taille spécifique ou des dispositifs particuliers. C’est l’un des principes fondamentaux du design responsive.
- Exemple :
css @media (max-width: 600px) { body { background-color: lightblue; } }
Ici, la couleur de fond du<body>deviendra bleu clair uniquement si la largeur de l’écran est inférieure à 600 pixels.
Résumé
En résumé, le CSS est un outil puissant qui vous permet de séparer le contenu (HTML) de la présentation (styles) pour construire des pages web attrayantes et bien structurées. Il fonctionne en sélectionnant des éléments HTML, en appliquant des styles définis et en respectant les règles de spécificité, d’héritage et de boîte de modèle.
Image par DC Studio on Freepik
