CSS est utilisé pour styliser et composer des pages Web — par exemple, pour modifier la police, la couleur, la taille et l'espacement du contenu, le diviser en plusieurs colonnes ou ajouter des animations et d'autres éléments décoratifs. Ce module vous permet de commencer sur le chemin de la maîtrise du CSS avec les bases de son fonctionnement, y compris les sélecteurs et les propriétés, l'écriture des règles CSS, l'application du CSS au HTML, comment spécifier la longueur, la couleur et d'autres unités en CSS, la cascade et l'héritage, et le débogage du CSS.

Prérequis

Avant de vous lancer dans ce module, vous devez avoir :

  1. une connaissance de base de l'utilisation des ordinateurs et l'usage passif du Web (c'est à dire, faire des recherches et consommer du contenu).
  2. mis en place un environnement de travail de base tel que détaillé dans Installation des logiciels de base et compris comment créer et gérer des fichiers, comme indiqué dans Gérer les fichiers.
  3. un connaissance élémentaire du HTML, telle qu'exposée dans le module Introduction au HTML.

Note : Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n'est pas possible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme JSBin ou Thimble.

Guides

Ce module contient les articles ci-après  prévus pour vous faire passer en revue toute la théorie de base des CSS et vous donner amplement l'occasion de tester vos compétences.

Comment fonctionnent les CSS
Dans ce module, nous commençons par une base théorique, en regardant ce que sont les CSS, comment le navigateur transforme le HTML en DOM, comment les CSS sont appliquées à des parties du DOM, quelques exemples de syntaxe très basiques et quel code est utilisé pour incorporer en fait le CSS dans la page web.
Syntaxe des CSS
Ensuite, nous entrons dans la syntaxe des CSS de manière plus détaillée en examinant comment les propriétés et leurs valeurs se transforment en déclarations, comment les déclarations multiples se transforment en blocs de déclarations et comment les blocs de déclarations et les sélecteurs se transforment en règles CSS complètes. Nous complétons l'article en examinant d'autres caractéristiques syntaxiques des CSS telles que les commentaires et les blancs.
Selecteurs
Les sélecteurs sont mentionnés dans l'article précédent, mais dans cet article nous allons beaucoup plus en détail, montrant quels types de sélecteurs sont disponibles et comment ils fonctionnent.
Valeurs et unités des CSS
Il y a de nombreux types de valeurs de propriétés CSS à prendre en compte, des valeurs numériques aux couleurs en passant par les fonctions qui exécutent une certaine action (comme l'intégration d'une image de fond ou la rotation d'un élément). Certaines d'entre elles reposent sur des unités particulières pour spécifier les valeurs exactes qu'elles représentent — voulez-vous que la boîte ait 30 pixels de large ou 30 centimètres ou 30 ems ? Dans ce guide, nous examinons des valeurs plus communes comme la longueur, la couleur et les fonctions simples, ainsi que des unités moins communes comme les degrés et même des valeurs numériques sans unité.
Cascade et héritage
CSS a deux systèmes différents mais liés pour résoudre les situations de conflit de sélecteurs (différents sélecteurs sélectionnent les mêmes éléments ; lequel gagne et finit par être appliqué ?) et des éléments imbriqués à l'intérieur d'autres éléments (il peut être logique de faire hériter une partie du style appliqué aux éléments parents par les éléments enfants dans certains cas ; dans d'autres non). Cet article couvre les deux systèmes avec suffisamment de détails pour être utile mais sans être insurmontable.
Les modèles de boîtes
Le modèle de boîte des CSS est la base de la mise en page Web — chaque élément est représenté sous forme d'une boîte rectangulaire avec son contenu, le remplissage périmétrique, la bordure et la marge construits les uns autour des autres comme les pelures d'un oignon. Lorsqu'un navigateur représente une page Web, il détermine les styles appliqués au contenu de chaque boîte, la taille des couches superposées qui l'entourent et l'emplacement des boîtes les unes par rapport aux autres. Avant de comprendre comment créer des mises en page CSS, vous devez avoir compris le modèle de boîte.
Deboguer les CSS
Dans le dernier article de ce module, nous examinons les bases du débogage des CSS, y compris l'exploration du CSS appliqué à une page et d'autres outils peuvant vous aider à trouver des erreurs dans le code des CSS.

Évaluations

Les exercices suivants vous permettront de tester vos connaissances des bases des CSS telles qu'elle ont été exposées dans les guides ci–dessus.

Comprehension des fondamentaux des CSS
Cette évaluation teste votre compréhension des guides ci-dessus à l'aide d'exercices soigneusement conçus.

Voir aussi

Connaissance intermédiaire du Web 1: Introduction aux CSS
Un excellent cours de la fondation Mozilla explorant et testant un grand nombre des compétences dont il est question dans le module Introduction au CSS. En savoir plus sur le style des éléments HTML sur une page Web, les sélecteurs CSS, les attributs et les valeurs.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab, loella16, Mozinet, SphinxKnight, Yvain, KhalilSnaake, vanz
Dernière mise à jour par : Dralyab,