Les styles CSS - Tutoriel
CSS
CSS = C
ascading S
tyle S
heets.
Soit en français les feuilles de styles en cascade.
CSS est un langage de mise en forme qui peut s'appliquer à de nombreux types de documents mais son utilisation la plus courante est la mise en forme des pages HTML ou des documents XML.
HTML comporte lui aussi des possibilités de mise en forme mais, depuis la version HTML5, la mise en forme directe
dans le document HTML est devenue obsolète.
Il est en effet souhaitable de séparer les données et la mise en forme :
- HTML véhicule les informations proprement dites,
- CSS s'occupe de leur mise en forme.
CSS est un langage déclaratif facile à appréhender. Sa seule difficulté est de comporter beaucoup de mots clés. Ce site est là pour vous aider à retrouver les syntaxes.
Où commencer ?
Pour découvrir les principes de base du CSS, commencez votre lecture par les tutoriels. Vous pouvez aussi accéder directement à :
- La référence des
selectors
, ou despseudo-classes
etpseudo-elements
. - La liste des unités CSS.
- La liste des couleurs CSS.
- La liste des propriétés et de leurs valeurs, ainsi que la liste des fonctions sont accessibles à partir de la table des matières à gauche de l'écran ou du menu "hamburger" sur un mobile.
- Enfin, un index thématique est affiché ci-dessous.
Index thématique par modules.
La liste ci-dessous est celle des modules de standardisation publiés par le W3C. En cliquant sur un module, vous afficherez tous les termes définis dans ce module (propriétés, fonctions, etc.).
Compositions et mélanges
(Propriété)
(Propriété)
(Propriété)CSS 2 - Spécification concernant les feuilles de styles en cascade - Version 2
(Directive)
(Propriété)
(Fonction)CSS 3 - Spécification concernant les feuilles de styles en cascade - Version 3
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Événements de pointeur
(Propriété)Media Queries
(Directive)
(Directive)Module CSS - Adaptation du terminal
(Directive)Module CSS - Affichage
(Propriété)Module CSS - Ajustement de la taille du texte
(Propriété)Module CSS - Ajustement des couleurs
(Propriété)
(Propriété)Module CSS - Alignement des blocs
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Animations
(Directive)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Annotations Ruby
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Arrière-plans et bordures
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Cascade et héritage
Module CSS - Couleurs
(Directive)color()
.
(Propriété)
(Fonction)sRGB
.
(Fonction)
(Fonction)
(Fonction)
(Fonction)L*a*b*
.
(Fonction)L*C*H*
.
(Fonction)L*a*b*
avec une correction perceptive.
(Fonction)L*C*H*
avec une correction perceptive.
(Propriété)
(Fonction)
(Fonction)Module CSS - Débordements
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Décoration du texte
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Dimensionnement des blocs
(Propriété)
(Propriété)
(Propriété)
(Fonction)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Éléments positionnés
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Fonctions d'accélération
(Fonction)
(Fonction)Module CSS - Formes de base
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Propriété)
(Propriété)
(Propriété)Module CSS - Fragmentation
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Génération de contenu
(Propriété)
(Fonction)
(Propriété)
(Fonction)
(Fonction)
(Fonction)Module CSS - Images
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Propriété)
(Propriété)
(Fonction)
(Propriété)
(Propriété)
(Fonction)
(Fonction)
(Fonction)
(Fonction)Module CSS - Interface utilisateur de base
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Listes et compteurs
(Fonction)
(Propriété)
(Propriété)
(Propriété)
(Fonction)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Masquage
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Media paginé
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Directive)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Mise en page en ligne
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Mise en page multi-colonnes
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Mise en page par flex-box
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Mise en page par grille
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Fonction)
(Fonction)Module CSS - Modèle de blocs
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Modes d'écriture
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Pages flottantes
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Parole (TTS)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Polices de caractères
(Directive)
(Directive)
(Directive)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Propriétés et valeurs logiques
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Propriétés personnalisées (variables) - Niveau 1
(Fonction)Module CSS - Pseudo-éléments
(Sélecteur)
(Sélecteur)
(Sélecteur)file
.
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)Module CSS - Régions
Module CSS - Règles conditionnelles
(Directive)@when
. Définit des règles CSS qui ne seront traitées que sous certaines condidions.
(Directive)
(Directive)Module CSS - Styles de compteurs
(Directive)
(Fonction)Module CSS - Stylisation des barres de défilement
(Propriété)
(Propriété)Module CSS - Tableaux
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Texte
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Transformations
(Propriété)
(Fonction)
(Fonction)
(Propriété)
(Fonction)
(Propriété)
(Propriété)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Propriété)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Propriété)Module CSS - Transitions
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)Module CSS - Valeurs et unités
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)Module CSS - Will change - Niveau 1
(Propriété)Module filtres et effets
(Propriété)
(Fonction)
(Fonction)
(Propriété)
(Fonction)
(Fonction)
(Propriété)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)
(Fonction)Sélecteurs
(Sélecteur)
(Sélecteur)
(Sélecteur):is()
.
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)is()
.
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)
(Sélecteur)Styles pour la restitution vocale
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)
(Propriété)SVG (Scalable Vector Graphics)
(Propriété)