CSS Exemples
Syntaxe CSS
Sélecteurs CSS
Le sélecteur d'élément Le sélecteur d'identifiant Le sélecteur de classe (pour tous les éléments) Le sélecteur de classe (pour seulement les éléments <p>) Un élément HTML qui fait référence à deux classes Le sélecteur universel Sélecteurs de regroupement
CSS Comment faire / Où faire
Commentaires CSS
Couleurs CSS
Définir la couleur de fond d'un élément Définir la couleur du texte Définir la couleur de la bordure Définir différentes valeurs de couleur Définir des valeurs RGB Définir des valeurs HEX Définir des valeurs HSL
Arrière-plans CSS
Définir la couleur de fond d'une page Définir la couleur de fond de différents éléments Définir une image comme fond d'une page Comment répéter une image de fond uniquement horizontalement Comment positionner une image de fond Une image de fond fixe (cette image ne défilera pas avec le reste de la page) Toutes les propriétés de fond en une déclaration Exemple avancé de fond
Propriétés de fond CSS expliquées
Bordures CSS
Définir la largeur des quatre bordures Définir la largeur de la bordure supérieure Définir la largeur de la bordure inférieure Définir la largeur de la bordure gauche Définir la largeur de la bordure droite Définir le style des quatre bordures Définir le style de la bordure supérieure Définir le style de la bordure inférieure Définir le style de la bordure gauche Définir le style de la bordure droite Définir la couleur des quatre bordures Définir la couleur de la bordure supérieure Définir la couleur de la bordure inférieure Définir la couleur de la bordure gauche Définir la couleur de la bordure droite Toutes les propriétés de bordure en une déclaration Ajouter des bordures arrondies à un élément Définir des bordures différentes de chaque côté Toutes les propriétés de la bordure supérieure en une déclaration Toutes les propriétés de la bordure inférieure en une déclaration Toutes les propriétés de la bordure gauche en une déclaration Toutes les propriétés de la bordure droite en une déclaration
Propriétés de bordure CSS expliquées
Marges CSS
Spécifier différentes marges pour chaque côté d'un élément Utiliser la propriété de marge abrégée avec quatre valeurs Utiliser la propriété de marge abrégée avec trois valeurs Utiliser la propriété de marge abrégée avec deux valeurs Utiliser la propriété de marge abrégée avec une valeur Définir la marge sur auto pour centrer l'élément dans son conteneur Laisser la marge gauche être héritée de l'élément parent Effondrement des marges
Propriétés de marge expliquées
Rembourrage CSS
Spécifier différents rembourrages pour chaque côté d'un élément Utiliser la propriété de rembourrage abrégée avec quatre valeurs Utiliser la propriété de rembourrage abrégée avec trois valeurs Utiliser la propriété de rembourrage abrégée avec deux valeurs Utiliser la propriété de rembourrage abrégée avec une valeur Rembourrage et largeur de l'élément (sans box-sizing) Rembourrage et largeur de l'élément (avec box-sizing) Définir le rembourrage gauche d'un élément Définir le rembourrage droit d'un élément Définir le rembourrage supérieur d'un élément Définir le rembourrage inférieur d'un élément
Propriétés de rembourrage CSS expliquées
Hauteur/Largeur CSS
Définir la hauteur et la largeur d'un élément Définir la largeur maximale d'un élément Définir la hauteur et la largeur de différents éléments Définir la hauteur et la largeur d'une image en utilisant des pourcentages Définir la largeur minimale et maximale d'un élément Définir la hauteur minimale et maximale d'un élément
Propriétés de hauteur/largeur CSS expliquées
Modèle de boîte CSS
Contour CSS
Dessiner une ligne autour d'un élément (contour) Définir le style d'un contour Définir la couleur d'un contour Définir la largeur d'un contour Utiliser la propriété abrégée de contour Contour avec coins arrondis Utiliser l'offset de contour Utiliser l'offset de contour avec une valeur négative
Propriétés de contour CSS expliquées
Texte CSS
Définir la couleur du texte de différents éléments Définir la couleur du texte et la couleur de fond de différents éléments Aligner le texte Utiliser text-align: justify Utiliser text-align-last Alignement vertical d'une image dans le texte Définir la direction du texte d'un élément Utiliser text-decoration-line Utiliser text-decoration-color Utiliser text-decoration-style Utiliser text-decoration-thickness Utiliser la propriété abrégée de text-decoration Utiliser text-decoration: none Utiliser text-transform Utiliser text-indent Utiliser letter-spacing Utiliser line-height Utiliser word-spacing Utiliser white-space Ajouter une ombre au texte pour un élément Ajouter une ombre colorée au texte pour un élément Ajouter une ombre colorée avec effet de flou Ombre de texte sur texte blanc Ombre de texte avec lueur néon rouge Ombre de texte avec lueur néon rouge et bleue Un autre effet d'ombre de texte
Propriétés de texte CSS expliquées
Polices CSS
Définir différentes polices pour un texte Utiliser une police de secours Utiliser la propriété font-style Utiliser la propriété font-weight Définir la propriété font-variant Définir la taille de la police en px Définir la taille de la police en em Définir la taille de la police en rem Définir la taille de la police en vw Utiliser la propriété abrégée de police
Propriétés de police expliquées
Icônes CSS
Liens CSS
Styliser un lien Styliser un lien en fonction de l'état Styliser un lien avec text-decoration Styliser un lien avec background-color Créer un bouton lien Créer un bouton lien avec des bordures Ajouter d'autres styles aux liens Différents types de curseurs
Propriétés de lien CSS expliquées
Listes CSS
Tous les différents marqueurs d'éléments de liste Définir une image comme marqueur d'élément de liste Positionner le marqueur d'élément de liste Supprimer les paramètres de liste par défaut Toutes les propriétés de liste en une déclaration Styliser les listes avec des couleurs Liste bordée pleine largeur
Propriétés de liste CSS expliquées
Tables CSS
Spécifier une bordure noire pour les éléments table, th et td Spécifier une bordure verte pour les éléments table, th et td Utiliser border-collapse Utiliser le rembourrage dans le tableau Utiliser border-spacing Bordure unique autour du tableau Tableau pleine largeur Tableau de moitié de largeur Tableau de largeur fixe Tableau de largeur automatique Définir la hauteur des en-têtes de tableau Centrer le contenu des éléments td Alignement à gauche du contenu dans th Alignement vertical du contenu Diviseurs horizontaux pour un tableau Mettre en surbrillance les lignes du tableau au survol de la souris Tableau à rayures zébrées En-tête de tableau coloré Un tableau réactif Utiliser caption-side Créer un tableau élégant
Propriétés de tableau CSS expliquées
Affichage CSS
Utiliser visibility:hidden Utiliser display:none Différence entre display:none et visibility: hidden Toutes les différentes valeurs d'affichage Comment afficher un élément de bloc comme un élément en ligne Comment afficher un élément en ligne comme un élément de bloc Comment utiliser CSS et JavaScript pour afficher un élément caché Comment utiliser CSS et JavaScript pour basculer entre afficher et cacher
Propriétés d'affichage CSS expliquées
Positionnement CSS
Utiliser position: static Utiliser position: relative Utiliser position: fixed Utiliser position: absolute Utiliser position: sticky Positionner le texte de l'image (coin supérieur gauche) Positionner le texte de l'image (coin supérieur droit) Positionner le texte de l'image (coin inférieur gauche) Positionner le texte de l'image (coin inférieur droit) Positionner le texte de l'image (centré) Utiliser le positionnement et z-index Utiliser z-index pour définir l'ordre de pile Ne pas utiliser de z-index
Propriétés de positionnement CSS expliquées
Débordement CSS
Utiliser la propriété overflow Utiliser overflow: visible Utiliser overflow: hidden Utiliser overflow: scroll Utiliser overflow: auto Utiliser overflow-x et overflow-y.
Propriétés de débordement CSS expliquées
Flottement CSS
Une utilisation simple de la propriété float Une image avec bordure et marges qui flotte à droite dans un paragraphe Une image avec une légende qui flotte à droite Laisser la première lettre d'un paragraphe flotter à gauche Désactiver le flottement (en utilisant la propriété clear) Désactiver le flottement (en utilisant le hack "clearfix") Créer des boîtes flottantes Créer des images côte à côte Créer des boîtes de hauteur égale (avec flexbox) Créer un menu horizontal
Propriétés de flottement CSS expliquées
CSS Inline-block
Montrer les différences entre inline, inline-block et block Utiliser inline-block pour créer des liens de navigation
Alignement des éléments CSS
Alignement centré avec marge Alignement centré du texte Centrer une image Alignement centré avec flexbox Alignement centré avec grid Alignement gauche/droite avec position Alignement gauche/droite avec flottement Centrer verticalement et horizontalement avec position
Propriétés d'alignement CSS expliquées
Combinators CSS
Pseudo-classes CSS
Afficher les liens dans différentes couleurs selon l'état Ajouter d'autres styles aux hyperliens Utiliser :hover sur div Utiliser :focus Combiner pseudo-classes et classes HTML Utiliser :hover pour afficher une info-bulle :first-child - styliser tous les premiers éléments p :first-child - styliser le premier élément em dans tous les éléments p :first-child - styliser tous les éléments em dans tous les premiers éléments p Utiliser :lang
Pseudo-éléments CSS
Rendre la première lettre spéciale dans un texte Rendre la première ligne spéciale dans un texte Rendre la première lettre et la première ligne spéciales Utiliser :before pour insérer du contenu avant un élément Utiliser :after pour insérer du contenu après un élément Utiliser :marker pour styliser les marqueurs d'éléments de liste Utiliser :selection pour styliser le texte sélectionné par l'utilisateur Utiliser :backdrop pour styliser la vue derrière une boîte de dialogue
Opacité CSS
Créer des images transparentes Créer des images transparentes - effet au survol Effet de survol inversé pour les images transparentes Boîtes transparentes avec opacité Opacité vs RGBA de fond Texte dans une boîte transparente
Barres de navigation CSS
Navbar verticale - entièrement stylisée Navbar horizontale - entièrement stylisée Navbar horizontale utilisant le flottement Navbar horizontale utilisant flex Navbar verticale - pleine hauteur et fixe Navbar horizontale - fixe en haut Barre de navigation collante Navigation supérieure réactive Navigation latérale réactive
Barres de navigation CSS expliquées
Dropdowns CSS
Texte déroulant Menu déroulant Menu déroulant aligné à droite Image déroulante Barre de navigation déroulante
Galerie d'images CSS
Galerie d'images CSS expliquée
Sprites d'images CSS
Un sprite d'image Un sprite d'image - une liste de navigation Un sprite d'image avec effet de survol
Sprites d'images CSS expliqués
Sélecteurs d'attributs CSS
Sélectionne tous les éléments <a> avec un attribut target Sélectionne tous les éléments <a> avec un attribut target="_blank" Sélectionne tous les éléments avec un attribut title qui contient une liste de mots séparés par des espaces, dont l'un est "flower" Sélectionne tous les éléments avec une valeur d'attribut de classe qui commence par "top" (doit être un mot entier) Sélectionne tous les éléments avec une valeur d'attribut de classe qui commence par "test" Sélectionne tous les éléments avec une valeur d'attribut de classe qui se termine par "test" Sélectionne tous les éléments avec une valeur d'attribut de classe qui contient "te"
Sélecteurs d'attributs CSS expliqués
Formulaires CSS
Champ de saisie pleine largeur Champ de saisie rembourré Champ de saisie borduré Champ de saisie avec bordure inférieure Champs de saisie colorés Champs de saisie en focus Champs de saisie en focus 2 Champ de saisie avec icône/image Champ de recherche animé Styliser les zones de texte Styliser les menus de sélection Styliser les boutons de saisie Formulaire réactif
Compteurs CSS
Créer un compteur Diminuer un compteur de 1 Augmenter un compteur de 2 Utiliser deux compteurs Utiliser la fonction counters()