CSS : Feuilles de style en cascade
CSS (pour Cascading Style Sheets en anglais), soit feuilles de style en cascade, est un langage de feuille de style utilisé pour décrire la présentation d'un document écrit en HTML ou XML (y compris les dialects XML que sont SVG, MathML, ou XHTML). CSS décrit la façon dont les éléments doivent être affichés à l'écran, sur papier, à l'oral ou sur d'autres médias.
CSS est l'un des langages principaux du Web ouvert et a été standardisé par le W3C. Auparavant, le développement des différentes parties de la spécification CSS était réalisé de façon synchrone, permettant d'avoir une version pour l'ensemble de la recommandation. Vous avez donc pu entendre parler de CSS1, CSS2.1, voire CSS3. Toutefois, il n'y aura pas de version CSS4 ou d'autres version globale numérotée de CSS.
En effet, après CSS 2.1, la portée de la spécification a augmenté significativement et les avancées sur les différents modules CSS ont commencé à diverger, et il est alors devenu plus efficace de développer et diffuser les recommandations par module. Plutôt que d'avoir une version globale de la spécification CSS, le W3C collecte désormais de façon périodique un instantané du dernier état stable de la spécification CSS et de l'avancée de chaque module. Les modules de spécification CSS ont un numéro de version, appelé niveau, comme le module de spécification CSS sur les couleurs de niveau 5.
Ressources principales
- Introduction à CSS
-
Si vous débutez en développement web, n'hésitez pas à consulter l'article les bases de CSS pour découvrir CSS, ce que c'est et comment l'utiliser.
- Tutoriels CSS
-
Notre section Apprendre le Web - CSS contient de nombreux tutoriels pour vous guider d'un niveau débutant à intermédiaire en CSS. Elle couvre l'ensemble des concepts fondamentaux en CSS.
- La référence CSS
-
Une référence exhaustive destinée aux développeuses et développeurs web expérimentés et qui décrit chaque propriété et concept de CSS.
Tutoriels
La section CSS - Apprendre le Web fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable.
- Premiers pas en CSS
-
CSS est utilisé pour mettre en forme et organiser le contenu sur page web, par exemple en modifiant la police, la couleur, la taille, ou l'espacement du contenu. On peut ainsi l'organiser en plusieurs colonnes, ajouter des animations ou d'autres décorations. Ce module est une introduction en douceur à CSS, expliquant les fondamentaux de son fonctionnement, la syntaxe et comment commencer à l'utiliser pour mettre en forme un document HTML.
- Les blocs de construction de CSS
-
Ce module explore la cascade et l'héritage, les différents types de sélecteurs disponibles, les unités, le dimensionnement, la mise en forme des arrière-plans et des bordures, le débogage et plus encore.
L'objectif est de fournir une boîte à outils pour écrire du CSS correct et vous permettre de comprendre les fondamentaux théoriques avant d'aller plus loin vers la mise en forme du texte et les dispositions CSS.
- Mettre en forme le texte
-
Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens.
- La disposition en CSS
-
On voit ici comment correctement placer les boîtes dans la zone d'affichage (viewport). Grâce aux concepts précédents, on peut désormais étudier les différentes méthodes pour positionner les éléments sur une page : les boîtes flexibles (flexbox), les grilles CSS et d'autres techniques historiques.
- Comment utiliser CSS afin de résoudre certains problèmes usuels
-
Ce module fournit des liens vers du contenu expliquant comment utiliser CSS afin de résoudre des problèmes fréquemment rencontrés lors de la création d'une page web.
Références
- La référence CSS
-
Une référence exhaustive, destinée aux développeuses et développeurs web expérimentés. Elle décrit les différentes propriétés et concepts qui composent CSS.
- Les concepts majeurs de CSS
-
Plusieurs articles de cette section présentent les aspects clés du langage. On y décrit notamment :
- La syntaxe et les formes du langage
- La spécificité et l'héritage, et la cascade
- Les unités et valeurs CSS et les notations fonctionnelles
- Le modèle de boîtes et la fusion des marges
- Le bloc englobant
- L'empilement et le contexte de formatage de blocs
- les concepts de valeur initiale, valeur calculée, valeur utilisée et valeur réelle
- Les propriétés raccourcies
- Les boîtes flexibles CSS (flexbox)
- Les grilles CSS
- Les sélecteurs CSS
- Les requêtes media (media queries)
- Les animations
Livre de recettes
Le livre de recettes de disposition CSS contient différentes recettes pour mettre en place différentes dispositions courantes. En plus de fournir du code pouvant servir de point de départ, ces recettes illustrent les différentes façons dont les spécifications CSS liées à la disposition peuvent être utilisées ainsi que les choix à faire lors du développement.
Outils de développement CSS
- Le service de validation CSS du W3C permet de vérifier si une feuille de style CSS est valide.
- Les outils de développement de Firefox permettent de visualiser, d'éditer une feuille de style en direct grâce à l'inspecteur et à l'éditeur de styles.