Ce cours décompose les principes de base du CSS en éléments clairs et faciles à comprendre. Au cours des prochains modules, vous apprendrez comment fonctionnent les aspects fondamentaux du CSS et comment les utiliser efficacement dans vos projets. Utilisez le volet de menu à côté du logo "Learn CSS" (Apprendre le CSS) pour parcourir les modules.
Vous allez apprendre les principes de base du CSS, comme le modèle de boîte, la cascade et la spécificité, Flexbox, la grille et z-index. Vous découvrirez également les fonctions, les types de couleurs, les dégradés, les propriétés logiques et l'héritage pour devenir un développeur frontend complet, prêt à affronter n'importe quelle interface utilisateur.
Chaque module est rempli de démonstrations interactives et d'auto-évaluations pour vous permettre de tester vos connaissances. En plus d'apprendre en lisant et en regardant des démonstrations, vous pouvez écouter un épisode de podcast pour chaque thème afin d'approfondir vos connaissances.
Ce cours s'adresse aux développeurs CSS débutants et avancés. Vous pouvez parcourir la série du début à la fin pour obtenir une compréhension générale du CSS de haut en bas, ou l'utiliser comme référence pour des sujets de style spécifiques. Si vous débutez dans le développement Web, consultez Apprendre le HTML pour découvrir comment écrire du balisage et associer vos feuilles de style.
Voici ce que vous allez apprendre :
Modèle de boîte
Étant donné que tout ce que CSS affiche est une boîte, comprendre le fonctionnement du modèle de boîte CSS est une base essentielle de CSS.
Sélecteurs
Pour appliquer un CSS à un élément, vous devez le sélectionner. Les CSS vous offrent différentes façons de procéder. Vous pouvez les découvrir dans ce module.
Imbrication
L'imbrication des règles de style CSS peut rendre vos feuilles de style plus organisées, plus faciles à lire et plus faciles à gérer.
La cascade
Il arrive que plusieurs règles CSS concurrentes s'appliquent à un élément. Découvrez comment le navigateur choisit celui à utiliser et comment contrôler cette sélection.
Spécificité
Ce module examine plus en détail la spécificité, un élément clé de la cascade.
Héritage
Certaines propriétés CSS sont héritées si vous ne spécifiez pas de valeur pour elles. Découvrez comment cela fonctionne et comment l'utiliser à votre avantage dans ce module.
Couleur
Il existe plusieurs façons de spécifier une couleur en CSS. Ce module examine les valeurs de couleur les plus couramment utilisées.
Unités de taille
Découvrez comment dimensionner des éléments à l'aide de CSS, en travaillant avec le support flexible du Web.
Disposition
Présentation des différentes méthodes de mise en page que vous pouvez choisir lorsque vous créez la mise en page d'un composant ou d'une page.
Flexbox
Flexbox est un mécanisme de mise en page conçu pour organiser des groupes d'éléments dans une seule dimension. Découvrez comment l'utiliser dans ce module.
Grille
La mise en page en grille CSS fournit un système de mise en page bidimensionnel qui contrôle la mise en page en lignes et en colonnes. Découvrez tout ce que la grille a à vous offrir.
Propriétés logiques
Les propriétés et valeurs logiques relatives au flux sont liées au flux de texte, et non à la forme physique de l'écran. Découvrez comment tirer parti de cette nouvelle approche du CSS.
Propriétés personnalisées
Les propriétés personnalisées, ou variables CSS, vous permettent d'organiser et de réutiliser des valeurs dans votre CSS, afin que vos styles soient plus flexibles et plus faciles à comprendre.
Espacement
Découvrez comment sélectionner la meilleure méthode d'espacement des éléments en fonction de la méthode de mise en page que vous utilisez et du composant que vous créez.
Pseudo-éléments
Un pseudo-élément permet d'ajouter ou de cibler un élément supplémentaire sans avoir à ajouter de code HTML. Ils ont différents rôles, que vous découvrirez dans ce module.
Pseudo-classes
Les pseudo-classes vous permettent d'appliquer des règles CSS en fonction des changements d'état. Cela signifie que votre conception peut réagir aux saisies de l'utilisateur, comme une adresse e-mail non valide.
Bordures
Une bordure encadre vos boîtes. Découvrez comment modifier la taille, le style et la couleur des bordures à l'aide de CSS.
Ombres
Il existe plusieurs façons d'ajouter des ombres au texte et aux éléments en CSS. Découvrez comment utiliser chaque option et les tâches pour lesquelles elles ont été conçues.
Mise au point
Comprendre l'importance de la mise au point dans vos applications Web Vous apprendrez à gérer la mise au point et à vous assurer que le chemin d'accès à votre page fonctionne pour les personnes qui utilisent une souris et celles qui utilisent le clavier pour naviguer.
Curseurs et pointeurs
Le curseur est un moyen essentiel pour vos utilisateurs de savoir avec quoi ils interagissent. Dans ce module, découvrez comment styliser les curseurs dans des circonstances spécifiques.
Z-index et contextes d'empilement
Découvrez comment contrôler l'ordre dans lequel les éléments se superposent les uns aux autres à l'aide de l'index Z et du contexte d'empilement.
Positionnement de l'ancre
Le positionnement d'ancrage CSS permet de positionner de manière déclarative un élément par rapport à un autre.
Popovers et boîtes de dialogue
Un popover est un élément doté d'un attribut popover. Il est utile pour un large éventail de modèles interactifs, y compris les info-bulles, les alertes, les toasts et plus encore.
Fonctions
CSS dispose d'un éventail de fonctions intégrées. Découvrez certaines des principales fonctions et comment les utiliser.
Trajets, formes, écrêtage et masquage
Les chemins, les formes, le clipping et le masquage permettent aux développeurs d'afficher des formes complexes en CSS grâce à diverses fonctions qui peuvent créer des expériences mémorables pour vos utilisateurs.
Gradients
Dans ce module, vous découvrirez comment utiliser les différents types de dégradés disponibles en CSS. Les dégradés peuvent créer de nombreux effets utiles, sans avoir besoin d'applications graphiques pour créer des images.
Animations
L'animation est un excellent moyen de mettre en évidence les éléments interactifs et d'ajouter de l'intérêt et du plaisir à vos conceptions. Découvrez comment ajouter et contrôler des effets d'animation avec CSS.
Filtres
Les filtres CSS vous permettent d'appliquer des effets que vous pensiez peut-être possibles uniquement dans une application graphique. Dans ce module, vous pouvez découvrir ce qui est disponible.
Modes de fusion
Créez des effets de composition en mélangeant deux calques ou plus, et apprenez à isoler une image avec un arrière-plan blanc dans ce module sur les modes de fusion.
Listes
Structurellement, une liste est composée d'un élément de conteneur de liste rempli d'éléments de liste. Dans ce module, vous allez apprendre à styliser toutes les parties d'une liste.
Compteurs
CSS fournit plusieurs façons de contrôler les compteurs d'une liste pour différents cas d'utilisation. Dans ce module, vous allez apprendre à contrôler les compteurs d'une liste.
Transitions
Découvrez comment définir des transitions entre les états d'un élément. Utilisez des transitions pour améliorer l'expérience utilisateur en fournissant un retour visuel pour l'interaction de l'utilisateur.
Afficher les transitions pour les SPA
Les transitions de vue vous permettent de montrer la continuité ou le contexte entre les pages de votre SPA.
Dépassement
Le débordement est la façon dont vous gérez le contenu qui ne tient pas dans une taille parentale définie. Dans ce module, vous allez sortir des sentiers battus et apprendre à styliser le contenu qui dépasse.
Arrière-plans
Découvrez comment définir le style de l'arrière-plan des boîtes à l'aide de CSS.
Texte et typographie
Découvrez comment mettre en forme du texte sur le Web.
Requêtes de conteneur
Contrairement aux requêtes média, les requêtes de conteneur vous permettent d'ajuster plus précisément les éléments en fonction de la taille et de l'état de leurs ancêtres, ou conteneurs.
Conclusion et prochaines étapes
Ressources supplémentaires pour vous aider à passer à l'étape suivante.
Alors, êtes-vous prêt à apprendre le CSS ? C'est parti !