Tutoriels CSS

Apprendre CSS peut sembler une tâche impressionnante. Cependant, pour vous aider, nous avons écrit de nombreux tutoriels à propos de CSS. Certains d'entre eux sont à l'attention des non-initiés, tandis que d'autres présentent des fonctionnalités complexes qui peuvent être utiles aux utilisateurs expérimentés.

Cette page liste l'ensemble des tutoriels, avec une courte description. Ils sont regroupés par complexité, de sorte que vous puissiez choisir le plus adapté à votre niveau.

Tutoriels pour les débutants

Débuter en CSS: Ce guide est destiné aux non-initiés : vous n'avez jamais écrit une seule ligne de CSS ? Cet article est pour vous ! Il explique les concepts fondamentaux du langage et vous guide via la rédaction de feuilles de style basiques.
Utiliser plusieurs arrière-plans: Les arrière-plans sont fondamentaux afin d'obtenir une mise en forme appréciable. CSS vous permet d'en définir plusieurs pour chaque boîte. Ce tutoriel explique comment les arrière-plans interagissent et comment utiliser ces interactions pour réaliser des effets.
Mise à l'échelle des images d'arrière-plan: CSS vous permet de redimensionner des images utilisées comme élément d'arrière-plan. Ce tutoriel décrit comment faire.
Media queries (requêtes de média): La taille des écrans ou la nature des appareils varie grandement (cela va des écrans tactiles aux documents imprimés). Les Media queries sont des briques fondamentales pour construire des sites web avec un rendu de grande qualité sur n'importe quel appareil.
Comprendre le z-index: Cet indice vous permet de contrôler la superposition des boites qui sont affichées sur une page web. Vous verrez ici comment il est calculé et utilisé.

Tutoriels de niveau intermédiaire

Certaines fonctionnalités, parfois plus récemment apparues, sont plus avancées. Une fois les bases acquises, vous pourrez les utiliser distinctement si besoin.

Compteurs CSS: Compter les éléments et pages est une tâche aisée en CSS. Apprenez à utiliser counter-reset, counter-increment, counters(), et counter().
Animations CSS: Les animations CSS vous permettent de définir des configurations de style via des keyframes, et de réaliser une transition entre elles pour définir une animation.
Transitions CSS: Les transitions CSS vous permettent de définir une animation entre plusieurs styles et contrôlent la manière dont elles s'appliquent.
Transformations CSS: Les transformations CSS vous permettent de changer la position d'éléments en modifiant leurs coordonnées spatiales. On peut ainsi réaliser des translations, rotations et déformations en espaces 3D et 2D.
Dégradés CSS: Les dégradés CSS forment des images via un dégradé entre plusieurs couleurs. Il existe différents types de dégradés CSS : linéaire ou radial, répétable ou non. Ce tutoriel décrit comment les utiliser.

Tutoriels avancés

CSS possède différentes méthodes pour organiser la disposition du contenu dans un document.

Mise en page avec les colonnes: Il est possible d'organiser une mise en page selon plusieurs colonnes. Si ce n'est pas une méthode visuelle fréquente pour les écrans, on la retrouve souvent sur les documents imprimés.
Mise en page avec les boîtes flexibles (Flexbox): Cette mise en page permet de donner de la flexibilité aux boîtes, celles-ci pouvant alors être redimensionnées de façon fluide.