Aide mémoire CSS

Sélecteurs CSS

Les sélecteurs CSS sont utilisés pour cibler des éléments HTML et leur appliquer des styles.

1. Sélecteur d'Élément

   p {
       /* Styles à appliquer aux paragraphes */
   }

2. Sélecteur de Classe

   .ma-classe {
       /* Styles à appliquer aux éléments avec la classe "ma-classe" */
   }

3. Sélecteur d'ID

   #mon-id {
       /* Styles à appliquer à l'élément avec l'ID "mon-id" */
   }

4. Sélecteur Universel

   * {
       /* Styles à appliquer à tous les éléments */
   }

5. Sélecteur de Descendant

   div p {
       /* Styles à appliquer aux paragraphes qui sont descendants de div */
   }

6. Sélecteur Enfant Direct

   ul > li {
       /* Styles à appliquer aux éléments li qui sont enfants directs d'ul */
   }

7. Sélecteur de Pseudo-Classe

   a:hover {
       /* Styles à appliquer aux liens lorsque la souris est dessus */
   }

8. Sélecteur de Groupe

   h1, h2, h3 {
       /* Styles à appliquer aux titres h1, h2 et h3 */
   }

Propriétés CSS

Les propriétés CSS sont utilisées pour définir les styles des éléments ciblés par les sélecteurs.

1. color

   color: #FF0000; /* Définit la couleur du texte en rouge */

2. font-size

   font-size: 16px; /* Définit la taille de la police à 16 pixels */

3. font-family

   font-family: Arial, sans-serif; /* Définit la police de caractères */

4. background-color

   background-color: #EFEFEF; /* Définit la couleur de fond en gris clair */

5. margin

   margin: 10px; /* Définit les marges extérieures de l'élément */

6. padding

   padding: 5px; /* Définit les espacements intérieurs de l'élément */

7. border

   border: 1px solid #000; /* Définit une bordure d'un pixel en noir solide */

8. text-align

   text-align: center; /* Centre le texte dans l'élément */

9. width

   width: 200px; /* Définit la largeur de l'élément à 200 pixels */

10. height

    height: 1800px; /* Définit la hauteur de l'élément à 180 pixels */

Utilise cette cheatsheet comme référence rapide pour les sélecteurs CSS et les propriétés CSS les plus couramment utilisés. Ces outils te permettront de personnaliser l'apparence de tes pages web de manière efficace et précise.