Généralités

Cet aide-mémoire n'est volontairement pas exhaustif. Il est principalement destiné aux étudiants de la HELHa qui apprennent les bases du développement web. Il se limite donc aux éléments les plus fréquemment utilisés en CSS.

Priorités

Le navigateur va interpréter les CSS dans un ordre bien précis : la dernière déclaration du flux est celle prise en compte MAIS un système de priorités risque de venir perturber cette règle de base.

Ordre des priorités selon le mode de déclaration

  1. !important
  2. Style en ligne
  3. Style dans le <head>
  4. Feuille de style externe

Ordre des priorités selon le sélecteur

  1. ID
  2. CLASS, attributs, pseudo-classes (:hover)
  3. Éléments (p, div...)
  4. * / > / +

Unités de mesure

45px
45 pixels
2em
2 fois la taille de police du parent
3.5rem
3 fois et demi la taille de police par défaut du site ou du navigateur
33%
33% de la taille de l'élément parent
50vw
50% de la largeur du viewport
25vh
25% de la hauteur du viewport
50vmax
50% de la plus grande valeur entre la hauteur ou la largeur du viewport
calc(100vh - 50px)
Calcul : 100% de la hauteur du viewport - 50 pixels
1fr
Spécifique à Grid, représente une fraction de l'espace disponible dans le conteneur de la grille. Par exemple
grid-template-columns:2fr 1fr 1fr;
divise un espace en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d'une fraction.
45deg
45 degrés, utile pour les rotations et déformations

Pour les décimales, ne jamais utiliser de virgule, toujours des points : 1.2em ou 25.50%

Le principe de l'horloge

Beaucoup de déclarations CSS peuvent être raccourcies. Elles sont interprétées par le navigateur selon les principes suivants :
padding:10px 15px 20px 20px;
top : 10px, right : 15px, bottom : 20px, left : 20px
border-radius:10px 0 10px 0;
top-left : 10px, top-right : 0, bottom-right : 10px, bottom-left : 0
margin:20px 10px;
Top et bottom : 20px, left et right : 10px
padding:10px 15px 20px;
Top : 10px, left et right : 15px, bottom : 20px

Codes couleurs

color:#F69302;
color:#F90; au lieu de color:#FF9900;
background-color:#FF990066;
Hexadécimal : un code hexadécimal définit une couleur RGB grâce à 3 codes de 2 chiffres sur une échelle de 0 à F (#rrggbb).
Pour des couleurs plus simple, on peut utiliser une seule lettre par canal (#rgb).
Certains navigateurs acceptent une quatrième valeur de transparence (#rrggbbaa)
color:rgb(0,0,255);
RGB : ce code définit une couleur RGB grâce à 3 chiffres sur une échelle de 0 à 255
background-color:rgba(255,255,255,0.6);
RGBa : ce code définit une couleur RGB ainsi que sa transparence sur une échelle de 0 à 1. Dans notre exemple, il s'agit d'un blanc à 60% d'opacité
background-color:hsl(207,122,36);
HSL : ce code définit une couleur grâce à 3 chiffres sur une échelle de 0 à 255, la teinte (h comme hue), la saturation (s) et la luminosité (l)
background-color:hsla(12,255,124,0.25);
HSLa : ce code définit une couleur HSL ainsi que sa transparence sur une échelle de 0 à 1
color:red;
Mots-clés : certaines couleurs (environs 150) ont un mot-clé qui peut être utilisé en CSS. La page liée ci-dessous contient un tableau complet de ces couleurs

Plus d'infos sur les couleurs