📘 CSS Cheatsheet¶

Voici les propriétés essentielles à connaître pour mettre en forme une page web.

Les exmples donnés sont fournis tout simplement pour illustrer leur utilisation.

🧩 Sélecteurs utiles¶

* { }             /* Universel */
h1 { }            /* Balise */
#id { }           /* ID */
.class { }        /* Classe */
div p { }         /* Descendant / enfant */
div > p { }       /* Enfant direct */
div + p { }       /* Frère suivant */
a:hover { }       /* État survolé */

🎨 Couleurs et fonds¶

color: red;                 /* Couleur du texte */
background-color: yellow;   /* Couleur de fond */

✍️ Texte¶

font-family: Arial, sans-serif; /* Police de caractères */
font-size: 1.5rem;              /* Taille du texte */
font-weight: bold;              /* Gras : normal, bold */
font-style: italic;             /* Style : italic, normal, ...*/
text-align: center;             /* Alignement : left, right, center, justify */
text-decoration: underline;     /* Décoration : none, underline, line-through */
line-height: 1.5;               /* Hauteur de ligne */
letter-spacing: 0.2rem;            /* Espacement entre lettres */

📦 Boîte et dimensions¶

width: 50%;       /* Largeur */
height: 50%;      /* Hauteur */
margin: 2rem;       /* Marge extérieure tout autours */
margin-top: 2rem;   /* Marge extérieure haut */
margin-bottom: 2rem /* Marge extérieure bas */
margin-left: 1rem   /* Marge extérieure gauche */
margin-right: 1rem  /* Marge extérieure droite */
padding: 1rem;      /* Marge intérieure */
border: 0.1rem solid black; /* Bordure */
border-radius: 0.5rem;     /* Coins arrondis */
box-shadow: 0.2rem 0.2rem 0.5rem grey; /* Ombre */

📐 Positionnement¶

display: block;      /* block, inline, inline-block, flex, grid */
position: relative;  /* static, relative, absolute, fixed, sticky */
top: 0;           /* Décalage vertical */
left: 10%;          /* Décalage horizontal */
z-index: 1;          /* Ordre de superposition */
float: right;        /* Flottant à gauche/droite */

🖼️ Images et arrière-plans¶

background-image: url("../img/image.jpg");    /*Appliquer une image de fond*/
background-size: cover;    /* cover, contain, auto */
background-repeat: no-repeat;   /*Empêcher l'image de se répéter*/
background-position: center;    /*Centrer l'image dans la page*/

🚀 Transitions & animations¶

transition: all 0.3s ease;  /* Transition douce */
transform: rotate(15deg);   /* Rotation */
animation: bounce 2s infinite; /* Animation */

🧾 Exemple complet¶

a {
  background-color: blue;
  color: white;
  font-size: 1rem;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
}

a:hover {
  background-color: darkblue;
}

Avec cette cheatsheet, tu as les bases essentielles pour styliser rapidement tes pages web 🚀