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 (angl.). 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 (angl.). 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 (angl.) 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 (angl.).
Tutoriels pour les débutant·e·s
- Votre premier site : Mettre en forme le contenu
-
Cet article propose une brève présentation de ce qu'est CSS et de son utilisation, à destination des personnes totalement débutantes en développement web.
- Bases de la présentation CSS
-
Le module de bases CSS de la section Apprendre le développement web enseigne les fondamentaux de CSS depuis le début.
- Présentation du texte en CSS
-
Ce module aborde les fondamentaux, notamment la définition de la police, du gras, de l'italique, de l'espacement des lignes et des lettres, des ombres portées et d'autres fonctionnalités du texte. Il se termine par l'application de polices personnalisées à votre page, et la présentation des listes et des liens.
- Mise en page CSS
-
Il est temps d'apprendre à disposer correctement vos boîtes les unes par rapport aux autres et à la zone d'affichage (viewport en anglais) du navigateur. Ce module aborde les flottants, le positionnement, d'autres outils de mise en page modernes, et la création de présentations adaptatives qui s'ajustent aux différents appareils, tailles d'écran et résolutions.
Référence
La référence CSS est une ressource exhaustive pour les développeur·euse·s web expérimenté·e·s, décrivant chaque propriété et concept de CSS, notamment :
- La syntaxe et les formes du langage
- Spécificité, héritage et cascade
- Sélecteurs CSS, dont les pseudo-éléments, imbrication, portée et parties d'ombre
- Règles CSS, dont les requêtes média et les requêtes de conteneur
- Le module des valeurs et unités CSS, dont les types de données numériques, types de données textuelles et notations fonctionnelles
- Le modèle de boîte et la fusion des marges
- Bloc englobant
- Contextes de superposition et de formatage de bloc
- Valeurs initiale, calculée, utilisée et réelle
- Les propriétés raccourcies CSS
- Mise en page de boîte flexible, multi-colonnes et grille
- Animations, transitions et transformations
Recettes CSS
Le cookbook de mise en page CSS vise à rassembler des recettes pour les schémas de mise en page courants, utiles à implémenter sur vos sites. En plus de fournir du code à utiliser comme point de départ dans vos projets, ces recettes mettent en avant les différentes façons d'utiliser les spécifications de mise en page et les choix que vous pouvez faire en tant que développeur·euse.
Outils pour le développement CSS
- Vous pouvez utiliser le Service de validation CSS du W3C (angl.) pour vérifier la validité de votre CSS. C'est un outil de débogage précieux.
- Les outils de développement de Firefox (angl.) vous permettent de visualiser et d'éditer le CSS en direct d'une page via les outils Inspecteur (angl.) et Éditeur de style (angl.).
- L'extension Web Developer pour Firefox vous permet de suivre et d'éditer le CSS en direct sur les sites surveillés.
Bugs meta
- Firefox : Bug Firefox 1323667