Guide Complet des Propriétés CSS pour la Mise en Forme Web

Les feuilles de styles, ou Cascading Style Sheets en anglais, sont connues sous l’abréviation de CSS. Le but de la CSS est de séparer la structure d’un document HTML de sa présentation : HTML sert à structurer le contenu, CSS sert à mettre en forme plus facilement un contenu structuré.

Dans cet article, nous allons vous réexpliquer brièvement à quoi servent les CSS et ensuite vous donner la liste de tous les groupes de CSS avec leurs différentes propriétés et leurs usages. Le but de cet article n’est pas de vous donner un cours sur les CSS et comment les écrire, il existe de très bons tutos pour cela mais de vous présenter un guide des CSS, afin que vous puissiez voir tout ce qui s’offre à vous.

Si votre site comporte plusieurs pages, LE gros avantage de la CSS est la possibilité d’avoir une feuille de style séparée. Si vous voulez changer la couleur et la taille de vos titres h1 par exemple, il vous suffit de l’écrire dans la css et ils se changeront dans tout le site, plus besoin d’aller les changer manuellement dans chaque page.

La liste de CSS que nous vous proposons ci-dessous n’est pas exhaustive mais elle est déjà très complète. Nous les avons regroupés par catégories. Pour les CSS qui vous paraissent inconnues, n’hésitez pas à utiliser le super site Can I use afin de vérifier la compatibilité de la CSS avec les navigateurs.

Le sommaire de référence CSS s'adresse aux utilisateurs qui s'y connaissent déjà en CSS et qui désirent avoir lors de leur travail quotidien une vue générale de la syntaxe et des éléments du langage importants dans la pratique. Le sommaire de référence n'est pas conçu pour les débutants! Le sommaire de référence ne prétend pas être exhaustif! Le sommaire de référence est tout indiqué comme aide à la navigation.

Listes et Numérotation avec CSS

Les CSS offrent un contrôle étendu sur la mise en forme des listes, notamment via la propriété list-style-type. Voici quelques options de numérotation pour les listes ordonnées (ol) :

decimal = pour les listes ol: numérotation 1.,2.,3.,4.
lower-roman = pour les listes ol: numérotation i.,ii.,iii.,iv.
upper-roman = pour les listes ol: numérotation I.,II.,III.,IV.
lower-alpha = pour les listes ol: numérotation a.,b.,c.,d.
upper-alpha = pour les listes ol: numérotation A.,B.,C.,D.
lower-greek = pour les listes ol: numérotation grecque: α., β., γ., δ.
decimal-leading-zero = pour les listes ol: numérotation 01.,02.,03.,04., ... 98.,99.
hiragana = pour les listes ol: numérotation en japonais (a, i, u, e, o, ka, ki, ...
katakana = pour les listes ol: numérotation en japonais (A, I, U, E, O, KA, KI, ...
hiragana-iroha = pour les listes ol: numérotation en japonais (i, ro, ha, ni, ho, he, to, ...
katakana-iroha = pour les listes ol: numérotation en japonais (I, RO, HA, NI, HO, HE, TO, ...