— Publié le 29 juillet 2017 —

Les feuilles de styles, ou Cascading Style Sheets en anglais, sont connues sous l’abréviation de CSS. Ce langage permet de gérer la présentation des documents HTML, il est recommandé par le fameux W3C (World Wide Web Consortium), au même titre que le HTML ou le XML.

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. Si vous voulez en savoir plus et voir les CSS fonctionner, nous vous invitons à consulter nos articles dédiés.

En bref…

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é. La mise en forme s’applique grâce à des styles sur de nombreux éléments : le positionnement, la police, les couleurs, les bordures, les arrière-plans, les animations…

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. Quel gain de temps !

Un autre avantage des CSS est de pouvoir gérer des règles différentes pour chaque support d’affichage : un navigateur classique, une télévision, un support mobile – tablette ou smartphone -, un lecteur braille…

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 tuto pour cela mais de vous présenter un guide des CSS, afin que vous puissiez voir tout ce qui s’offre à vous. Amusez-vous bien !

Tous les groupes de CSS

La liste de CSS que nous vous proposons ci-dessous n’est pas exhaustive mais elle est déjà très complète. Elle peut vous donner des idées de choses que vous pensiez impossibles ou complexes mais qui, en fait, sont faciles à mettre en oeuvre avec les CSS.

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. La colonne CSS dans nos tableaux indique la version de CSS de la propriété : CSS1, CSS2 ou CSS3.

Couleurs

Pour visualiser comment personnaliser vos titres et textes, lisez notre article : CSS3 : personnaliser vos titres et textes.

PROPRIETÉ DESCRIPTION CSS
color spécifie la couleur du texte 1
opacity permet de jouer sur le niveau de transparence et d’opacité 3

Arrière-plans

Pour visualiser comment personnaliser vos arrières-plans, lisez notre article : Intégrer des arrière-plans en CSS.

PROPRIETÉ DESCRIPTION CSS
background super propriété qui en regroupe 8 autres en une seule 1
background-attachment définit si la position d’une image d’arrière-plan par rapport à la page 1
background-blend-mode définit la fusion entre chaque calque d’arrière-plan 3
background-clip permet de définir les limites de l’arrière-plan à l’intérieur de la boîte 3
background-color spécifie la couleur de l’arrière-plan 1
background-image permet de définir une ou plusieurs images comme arrière-plan 1
background-origin détermine la manière dont les images d’arrière-plan sont positionnées 3
background-position spécifie la position d’une image d’arrière-plan 1
background-position-x définit la position horizontale initiale de l’arrière-plan 3
background-position-y définit la position verticale initiale de l’arrière-plan 3
background-repeat montre la façon dont une image d’arrière-plan sera répétée 1
background-size définit la taille d’une image d’arrière-plan 3

Bordures

Pour visualiser les bordures avec une ombre, lisez notre article : Faire des ombres portées avec Box-shadow.

PROPRIETÉ DESCRIPTION CSS
border super propriété qui regroupe les propriétés border en une seule 1
border-bottom super propriété qui regroupe les propriétés border-bottom en une seule 1
border-bottom-color définit la couleur de la bordure inférieure 1
border-bottom-left-radius définit la forme du coin en bas à gauche 3
border-bottom-right-radius définit la forme du coin en bas à droite 3
border-bottom-style définit le style de la bordure inférieure 1
border-bottom-width définit la largeur de la bordure inférieure 1
border-color définit la couleur des 4 bordures 1
border-image super propriété qui regroupe les propriétés border-image en une seule 3
border-image-outset décrit l’espace dont l’image dépasse de la boîte de bordure 3
border-image-repeat décrit la répétition de l’image de bordure 3
border-image-slice permet de découper l’image fournie en 9 régions 3
border-image-source spécicifie le chemin d’accès à l’image de bordure 3
border-image-width définit la largeur de l’image de bordure 3
border-left super propriété qui regroupe les propriétés border-left en une seule 1
border-left-color définit la couleur de la bordure gauche 1
border-left-style définit le style de la bordure gauche 1
border-left-width définit la largeur de la bordure gauche 1
border-radius super propriété qui regroupe les 4 propriétés border-radius en une seule 3
border-right super propriété qui regroupe les propriétés border-right en une seule 1
border-right-color définit la couleur de la bordure droite 1
border-right-style définit le style de la bordure droite 1
border-right-width définit la largeur de la bordure droite 1
border-style définit le style des 4 bordures 1
border-top super propriété qui regroupe les propriétés border-top en une seule 1
border-top-color définit la couleur de la bordure supérieure 1
border-top-left-radius définit la forme du coin en haut à gauche 3
border-top-right-radius définit la forme du coin en haut à droite 3
border-top-style définit le style de la bordure supérieure 1
border-top-width définit la largeur de la bordure supérieure 1
border-width définit la largeur des 4 bordures 1
box-decoration-break définit le comportement des bordures et arrière-plans lorsque la boîte est fragmentée 3
box-shadow permet de faire des ombres sur les bordures 3

Modèles de boîtes simples

Pour visualiser l’utilisation des boîtes simples en CSS, lisez nos articles : CSS : utiliser les modèles de boîtes simples 1/2 et CSS : utiliser les modèles de boîtes simples 2/2.

PROPRIETÉ DESCRIPTION CSS
bottom définit la place d’un élément positionné par rapport au bas 2
clear indique si un élément peut être situé à côté d’éléments flottants ou en dessous 1
clip-path empêche une portion d’un élément d’être affichée en définissant une région de rognage 3
display définit la façon dont un élément HTML doit être affiché 1
float définit si une boîte doit flotter ou non 1
height donne une hauteur à un élément 1
left définit la place d’un élément positionné par rapport à la gauche 2
margin définit les 4 marges dans une seule propriété 1
margin-bottom définit la marge inférieure d’un élément 1
margin-left définit la marge à gauche d’un élément 1
margin-right définit la marge à droite d’un élément 1
margin-top définit la marge supérieure d’un élément 1
max-height définit la hauteur maximum d’un élément 2
max-width définit la largeur maximum d’un élément 2
min-height définit la hauteur minimum d’un élément 2
min-width définit la largeur minimum d’un élément 2
overflow permet de rogner un contenu et d’afficher des barres de défilement 2
overflow-x définir un mécanisme de rognage si le contenu dépasse horizontalement 3
overflow-y définir un mécanisme de rognage si le contenu dépasse verticalement 3
padding définit les 4 marges intérieures dans une seule propriété 1
padding-bottom définit la marge intérieure inférieure d’un élément 1
padding-left définit la marge intérieure à gauche d’un élément 1
padding-right définit la marge intérieure à droite d’un élément 1
padding-top définit la marge intérieure supérieure d’un élément 1
position précise la méthode de positionnement d’un élément 2
right définit la place d’un élément positionné par rapport à la droite 2
top définit la place d’un élément positionné par rapport au haut 2
visibility définit si un élément est visible ou non 2
width spécifie la largeur d’un élément 1
vertical-align permet d’aligner un élément dans la hauteur 1
z-index définit l’ordre d’affichage d’éléments superposés 2

Modèles de boîtes flexibles

Pour visualiser l’utilisation des boîtes flexibes en CSS3, lisez notre article : Utiliser Flexbox pour faire de la mise en page.

PROPRIETÉ DESCRIPTION CSS
align-content permet de positonner plusieurs lignes dans votre conteneur flexible 3
align-items permet de définir l’alignement de vos éléments le long de l’axe secondaire 3
align-self sert à faire une exception d’alignement pour un élément 3
flex super propriété qui regroupe flex-grow, flex-shrink et flex-basis 3
flex-basis définit la taille par défaut d’un élément 3
flex-direction définit l’axe principal, le sens d’affichage horizontal ou vertical des éléments 3
flex-flow raccourci pour regrouper flex-direction et flex-wrap 3
flex-grow permet de jouer sur la taille d’un élément flex si nécessaire 3
flex-shrink permet de rétrécir un élément flex si nécessaire 3
flex-wrap demande aux éléments d’aller à la ligne lorsque la place manque 3
justify-content définit l’alignement le long de l’axe principal 3
order permet de changer l’ordre des éléments 3

Textes

Pour visualiser comment personnaliser vos titres et textes, lisez notre article : CSS3 : personnaliser vos titres et textes.

PROPRIETÉ DESCRIPTION CSS
hanging-punctuation spécifie si une marque de ponctuation peut être placée en dehors du bloc de contenu 3
hyphens indique au navigateur comment gérer les traits d’union lors des sauts de ligne 3
letter-spacing joue sur l’espacement entre les caractères d’un texte 1
line-break définit la façon dont les sauts de ligne sont gérés 3
line-height définit la hauteur des lignes 1
overflow-wrap définit si le navigateur peut ou non faire la césure à l’intérieur d’un mot 3
tab-size adapte la largeur utilisée pour représenter le caractère de tabulation 3
text-align précise la position d’un texte dans l’axe horizontal 1
text-align-last décrit la façon dont la dernière ligne d’un bloc, ou une ligne avant un retour à la ligne forcé, doit être alignée 3
text-combine-upright définit comment combiner des caractères afin qu’ils ne prennent la place que d’un seul caractère 3
text-indent définit l’espace horizontal qui doit être laissé avant le début d’un texte 1
text-justify spécifie la méthode de justication quand un texte est justifié 3
text-transform définit la façon d’utiliser les lettres capitales dans un texte 1
white-space décrit la façon dont les blancs sont gérés au sein d’un élément 1
word-break décrit la façon dont la césure s’applique pour les passages à la ligne 3
word-spacing définit la règle d’espacement utilisée entre les balises et les mots 1
word-wrap permet de casser de long mots incassables sur 2 lignes 3
text-decoration spécifie la décoration apportée à un texte 1
text-decoration-color spécifie la couleur de la décoration apportée à un texte 3
text-decoration-line spécifie le type de ligne d’un text-decoration 3
text-decoration-style spécifie le style de ligne d’un text-decoration 3
text-shadow permet de mettre une ombre à un texte 3
text-underline-position joue sur la position d’un soulignement quand le texte est souligné avec text-decoration 3

Polices

PROPRIETÉ DESCRIPTION CSS
font super propriété qui regroupe les propriétés font en une seule 1
font-family spécifie la police d’un texte 1
font-feature-settings permet de contrôler les fonctionnalités typographiques des polices OpenType 3
font-kerning contrôle le crénage de la police ; c’est-à-dire l’espace créé entre les lettres 3
font-language-override permet de contrôler l’utilisation des glyphes spécifiques à une langue pour une police 3
font-size précise la taille d’un texte 1
font-size-adjust permet de préciser la taille des lettres en majuscules par rapport aux minuscules 3
font-stretch permet de contrôler l’étirement entre les caractères d’un texte 3
font-style précise le style d’un texte 1
font-synthesis indique au navigateur s’il peut synthétiser la graisse ou la mise en italique des polices 3
font-variant super propriété qui regroupe les propriétés font-variant en une seule 1
font-variant-alternates décrit la façon dont les blancs sont gérés au sein d’un élément 3
font-variant-caps contrôle l’utilisation de glyphes alternatifs 3
font-variant-east-asian contrôle l’utilisation des glyphes alternatifs pour les scripts japonais, chinois et d’Asie orientale 3
font-variant-ligatures contrôle quelles ligatures et formes contextuelles sont utilisées dans les texes 3
font-variant-numeric permet de contrôler l’utilisation de glyphes alternatifs pour les nombres, fractions et les marqueurs ordinaux 3
font-variant-position permet d’utiliser des glyphes de plus petite taille positionnés en exposant ou en indice 3
font-weight spécifie la graisse d’un texte 1

Modes d’écriture

PROPRIETÉ DESCRIPTION CSS
direction précise le sens de l’écriture 2
text-orientation spécifie l’orientation du texte sur une ligne 3
text-combine-upright définit comment intégrer une combinaison de plusieurs caractères dans l’espace alloué à un seul caractère 3
unicode-bidi associée à la propriété direction, permet de gérer du texte bidirectionnel 3
writing-mode définit l’orientation du texte et la direction selon laquelle le bloc grandit 3

Tables

PROPRIETÉ DESCRIPTION CSS
border-collapse détermine si les bordures d’un tableau sont séparées ou fusionnées 2
border-spacing définit la distance entre les bordures de cellules adjacentes 2
caption-side permet de choisir l’emplacement de la légende d’un tableau 2
empty-cells définit la façon l’affichage des bordures et de l’arrière-plan des cellules sans contenu visible 2
table-layout définit la disposition des cellules, lignes et colonnes d’un tableau 2

Listes et Compteurs

Pour visualiser comment personnaliser vos listes à puces (ordonnées ou non), lisez notre article : Personnaliser les puces d’une liste en CSS.

PROPRIETÉ DESCRIPTION CSS
counter-increment permet d’augmenter la valeur d’un compteur CSS d’une valeur donnée 2
counter-reset permet de réinitialiser un compteur CSS avec une valeur donnée 2
list-style super propriété qui regroupe les propriétés list en une seule 1
list-style-image définit l’image utilisée comme puce devant les éléments de listes 1
list-style-position permet de définir la position du marqueur de liste par rapport à la boîte 1
list-style-type permet de définir l’apparence d’un élément de liste 1

Animations

Pour savoir comment réaliser des animations en CSS3, lisez notre article : Créer des animations en css3.

PROPRIETÉ DESCRIPTION CSS
animation super propriété qui regroupe les propriétés d’animation en une seule 3
animation-delay définit la durée d’attente avant de démarrer une animation 3
animation-direction indique le sens dans lequel les cycles de l’animation doivent être joués 3
animation-duration définit la durée d’une animation pour parcourir un cycle 3
animation-fill-mode indique le style d’un élément avant et après l’animation 3
animation-iteration-count indique le nombre de répétition de l’animation 3
animation-name définit une liste d’animations qui doivent être appliquées à l’élément ciblé 3
animation-play-state détermine si une animation est en cours d’exécution ou si elle est en pause 3
animation-timing-function spécifie la courbe d’accélération de l’animation 3

Transformations

Pour savoir comment réaliser des transformations en 2D en CSS3, lisez notre article : Appliquer des transformations à des images en css3. Et pour les transformations en 3D, c’est par ici : Créer des transformations 3D en css3.

PROPRIETÉ DESCRIPTION CSS
backface-visibility permet d’indiquer si la face arrière d’un élément doit être visible lorsqu’elle est orientée vers l’utilisateur 3
perspective spécifie la façon dont un élément 3D doit être vu 3
perspective-origin spécifie la position initiale d’un élément 3D 3
transform permet d’appliquer une transformation à un élément 2D ou 3D 3
transform-origin permet de modifier l’origine du repère pour les transformations d’un élément 3
transform-style détermine si les éléments-fils d’un élément sont positionnés en 2D ou 3D 3

Transitions

Pour savoir comment réaliser des transitions en CSS3, lisez notre article : Faire des transitions avec les CSS3.

PROPRIETÉ DESCRIPTION CSS
transition super propriété qui regroupe les propriétés de transition en une seule 3
transition-property désigner les noms des propriétés CSS sur lesquelles une transition doit être appliquée 3
transition-duration définit le nombre de secondes ou de millisecondes que doit durer une transition 3
transition-timing-function décrit la courbe d’accélération d’une transition 3
transition-delay définit la durée d’attente avant de démarrer une transition 3

Interface utilisateur

PROPRIETÉ DESCRIPTION CSS
box-sizing permet de modifier le modèle de boîte par défaut qui est utilisé pour calculer la largeur et la hauteur des éléments 3
content utilisé avec les pseudo-éléments ::before et ::after afin de générer le contenu d’un élément 2
cursor définit la forme du curseur lorsque le pointeur est au-dessus de l’élément 2
nav-down indique où aller lorsqu’on utilise la flèche basse du pavé de navigation 3
nav-index définit l’ordre de tabulation d’un élément 3
nav-left indique où aller lorsqu’on utilise la flèche gauche du pavé de navigation 3
nav-right indique où aller lorsqu’on utilise la flèche droite du pavé de navigation 3
nav-up indique où aller lorsqu’on utilise la flèche haute du pavé de navigation 3
outline super propriété qui regroupe les propriétés outline en une seule 2
outline-color permet de définir la couleur avec laquelle on trace le conteur de l’élément 2
outline-offset définit l’espace entre la bordure dessinée par outline et le bord de la boîte de bordure 3
outline-style permet de définir la mise en forme utilisée pour dessiner une bordure 2
outline-width définit la largeur d’une bordure (outline) 2
resize permet de contrôler le caractère redimensionnable d’un élément 3
text-overflow détermine la façon dont le textel qui dépasse d’une boîte est signalé pour les utilisateurs 3

Multi-colonnes

PROPRIETÉ DESCRIPTION CSS
break-after décrit la façon dont la page, la colonne ou la région se fragmente après la boîte générée 3
break-before décrit la façon dont la page, la colonne ou la région se fragmente avant la boîte générée 3
break-inside décrit la façon dont la page, la colonne ou la région se fragmente dans la boîte générée 3
column-count décrit le nombre de colonnes d’un élément 3
column-fill permet de contrôler la façon dont le contenu est réparti entre les colonnes 3
column-gap permet de définir l’espace entre les colonnes 3
column-rule permet de définir l’affichage d’une ligne droite entre chaque colonne 3
column-rule-color permet de définir la couleur de la ligne tracée entre les colonnes 3
column-rule-style permet de définir le style de la ligne tracé entre plusieurs colonnes 3
column-rule-width permet de définir la largeur du trait tracé entre les colonnes 3
column-span ermet de définir sur combien de colonnes un élément doit s’étendre 3
column-width permet de suggérer une largeur de colonne optimale 3
columns super propriété qui regroupe column-width et column-count 3
widows lorsqu’un paragraphe s’étend sur 2 pages, il définit le nombre minimum de lignes qui peuvent être laissées en haut de la deuxième page 3

Media paginé

PROPRIETÉ DESCRIPTION CSS
orphans nombre minimum de lignes qui doivent rester en bas de pages dans un conteneur de bloc 2
page-break-after permet d’ajuster les sauts de page placés après l’élément courant 2
page-break-before permet d’ajuster les sauts de page placés avant l’élément courant 2
page-break-inside ajuste la façon dont sont appliqués les sauts de page au sein de l’élément courant 2

Contenu généré

PROPRIETÉ DESCRIPTION CSS
marks utilisé pour afficher des marques de coupure ou des croix d’alignement 3
quotes indique la façon dont les agents utilisateurs doivent afficher les marques indiquant les citations 2

Effets de filtres

Pour visualiser l’utilisation des filtres à des images en CSS3, lisez notre article : Appliquer des filtres à des images en CSS3.

PROPRIETÉ DESCRIPTION CSS
filter permet d’appliquer des filtres et d’obtenir des effets graphiques de flou, de saturation… 3

Images, éléments remplacés

PROPRIETÉ DESCRIPTION CSS
image-orientation permet de faire une rotation sur une image 3
image-rendering fournit une indication au navigateur la façon de redimensionner les images 3
image-resolution précise la résolution intrinsèque des images 3
object-fit définit la façon dont le contenu d’un élément remplacé doit s’adapter à son parent 3
object-position détermine l’alignement d’un élément replacé au sein de sa boîte 3

Masques

Pour savoir comment réaliser des masques, lisez notre article : CSS : jouer avec les mask

PROPRIETÉ DESCRIPTION CSS
mask permet de modifier la visibilité d’un élément en le masquant partiellement ou complètement 3
mask-type définit si un masque sera utilisé comme un masque de luminance ou comme un masque de transparence 3

Conclusion

Voilà, vous avez de quoi vous amuser maintenant, vous allez pouvoir personnaliser votre site à loisir !
Si vous avez des questions, posez-les en commentaires ci-dessous.
Et n’hésitez pas à partager vos propres retours d’expérience !