Les couleurs

Les couleurs peuvent s’appliquer en css à plusieurs éléments avec les propriétés suivantes :

Pour le choix de la couleur on peut utiliser comme valeur différents format de choix de couleur :

h1 {
  color: #005B86;
  background-color: rgba(0,0,0,0.5);
  /* bordure */
  border-width: 0.08em;
  border-style: dotted;
  border-color:#f38
}
div.frame {
   background: lightyellow; /* = background-color raccourcie */
   color: #111;
   /* bordure raccourcie */
   border: 1px solid rgb(230, 50, 30);
}
/* pour les svg */
svg path{
 stroke:#f00;
 fill:rgba(0,255,12,.8);
}

Unités et dimensions

Il y a 2 catégories d’unité qu’on utilise sur le web. Les unités figées et les unités relatives.

Pour les unités figées : px (pixel) ou cm (centimètres) ou mm (millimètres) mais aussi deg (degrés pour les rotations). Nous n’utilisons plus trop les unités en pixel depuis que les sites doivent s’adapter aux écrans. Ces unités sont figées, c’est-à-dire qu’elles ne dépendent pas d’autres éléments externes. 16px seront toujours 16px, sur un mobile comme sur un écran 5k.

Les unités (ou dimensions) relatives : dépendent des dimensions d’un autre élément de référence. De ce fait, elles vont s’adapter en fonction de cet élément de référence.

% (pourcentage) = 0-100% de la taille du parent

em & rem (emphemeral unit / root empheral unit) : Dimensions relatives à la taille de la police de l’élément
a) parent = em (pour les marges intérieures (padding) ou extérieures (margin)
b) racine = rem (tout le reste) => la + utilisée, celle a préconiser
consultez cet excellent article qui explique les em & rem

vw & vh (viewport width / viewport height) : Dimension relative à la taille de la partie visible dans la fenêtre du navigateur

En résumé :
px = dimension figée => à éviter
em & rem = dimension relative à la taille de police (em pour parent) rem pour taille de police définie dans html (16px par défaut) => préconiser rem
% = pourcentage => pratique pour le flex = mettre des élément côte à côte (qu’on étudiera plus tard)
vw & vh = dimension relative à la taille de l’écran (on utilise peu vh mais pas mal vw)

Largeur et hauteur

width = ^{(avec un d sinon ça veut dire avec)} précise et force la largeur d’un élément
height = précise et force la hauteur d’un élément. ⚠️ en général, on ne force pas la largeur d’un élément, il prends la place dont il a besoin. Forcer la hauteur peut provoquer des chevauchements intempestifs.

Les max-width et min-width | max-height et min-height

Permet de déterminer une largueur ou hauteur minimum / maximum pour les blocs. Hyper pratique pour que les blocs de taille fluide ne soit pas trop petits ou trop grand. Ou pour occuper min-height:100vh afin de forcer une section à 100% du viewport

Le ratio largeur / hauteur

.gallery figure{
 aspect-ratio:16 / 9;
}

Espacements ou marges

Il existe 2 types de marges : internes et externes. Elles ont les 2 des sous-propriétés si on ne veut agir que sur une seule ou forcer une au l’autre.

.blog article{
margin 2em auto; /* centre le block */
}

Les propriétés margin et padding sont un raccourci des 4 autres et il existe plusieurs manières de l’écrire :

header{
  margin: 2rem; /* marge ext. de 2*16px partout */
}
main{
  margin: 2rem 3vw; /* marge ext. de 2*16px en haut et bas et 3% du viewport width à gauche et droite */
}
main article{
   margin:    1rem     1.8rem.    1.5rem     3rem; 
/* marge ext. ⬆️top     ➡️ droite  ⬇️ bas      ⬅️ gauche 
              (sens des aiguilles d'une montre 🕑) */
}

Idem pour padding (marges internes)

header{
  padding: 1.2rem; /* marges internes de 1.2*16px partout */
}
main{
  padding: 1.23rem 2.5vw; /* marges internes de 1.23*16px en haut et bas et 2.5% du viewport width à gauche et droite */
}
main article{
   padding:         1rem        1.8rem            1.5rem       3rem; 
/* marges internes  ⬆️top        ➡️ droite          ⬇️ bas        ⬅️ gauche 
                    (sens des aiguilles d'une montre 🕑) */
}

footer{
  margin: 1rem; /* marge idem partout */
  margin-top: 2rem; /* force la marge du haut à 2rem */
  padding : .5rem /* marge interne idem partout */
  padding-left: 1rem; /* force la marge interne à gauche */
  padding-bottom: .8rem /* force la marge interne en bas */
  /* pour le padding on aurait du écrire pour le même résultat */
  padding : .5rem .5rem .8rem 1rem; /* sens des aiguilles */
}
  

Propriétés liées au texte

h2{
 font-family : "Nom_De_La_Typo", Helvetica, Arial, Verdana, sans-serif;
}

h1{
 font-size : 2rem
}

h1{
 line-height : 1.12
}

h3{
 font-weight:bold;
}

h3{
 font-style:italic;
}

p#copyright{
 color:#ddd;
}

p#copyright{
 text-align: right;
}

h1{
 text-transform: uppercase;
}

nav a{
 text-decoration: none;
}

h1{
 text-shadow: 0 0 .2em #000;
}

Les bordures

Les propriétés border en CSS permettent de définir les bordures des éléments HTML. Elles sont composées de trois propriétés principales :

.blog article{
 border-width:0.08rem;
 border-style:solid;
 border-color:#777;
}

.blog article{
 border:0.08rem solid #777;
}

.blog article{
 border-radius:1.2rem;
}

C’est tout pour l’instant : affaire à suivre …