Un "id" (identifiant) sert à identifier un élément unique dans la page

Les "classes" sont attribuées à des éléments qu'on veut habiller de la même façon (leur donner le même comportement)
Une classe est utilisée plus souvent ; elle va contenir des mises en forme couramment utilisées.
Il est intéressant de trouver des noms de classe équivoques (ce n'est pas toujours facile).

CSS /VS/ HTML, cibler des éléments /VS/ ajouter des classes

CSS : on peut attribuer les mêmes consignes (propriétés + valeurs) à plusieurs éléments ciblés en même temps (via leur classe, id, etc.) -- virgule

.para, #sad {
  ....
}
.para, 
#sad {
  ....
}

CSS : on utilise une --espace pour indiquer qu'on va chercher un élément... à l'intérieur d'un autre
=== #texte_principal p { ... }
=== "parent > enfant"

HTML : on utilise une --espace pour attribuer plusieurs classes à un même élément ( exemple suivant: "para fond_bleu" )....
=== a la classe "para" et "fond_bleu"

/* ID */
#text_principal {
  font-family: sans-serif;
  line-height: 0.4em;
}
/* CLASSE */
.para {
  background-color: yellowgreen;
}
/* CLASSE, autres instructions */
.fond_bleu {
  background-color: blue;
  color: #FFF;
}
/* CLASSE/ID plusieurs cibles en même temps */
/* Séparées par une "," */
.para, #sad {
  font-weight: bold;
}

/* Exemple pour cibler/affecter tout "p" présent dans "#text_principal" */
/* et pas TOUS les "p" de la page */
#text_principal p {
  font-family: serif;
}
/* ... On aurait aussi pu affecter une classe à l'élément (en HTML) */
span.serif_big { /* TOUT span AVEC la classe serif_big */
  /* 3. "paragraphe" (dans l'élément "u") ne sera pas affecté par le changement de typo+taille */
  font-family: serif;
  font-size: 1.2em;
}

/* PSEUDO CLASSE :last-child */
p:last-child .para {
  background-color: orangered;
}

 
  
1. Je suis le premier paragraphe !
 
  
2. Et moi le deuxième paragraphe !
 
  
3. Et moi le troisième paragraphe !
 
  
4. Et moi le dernier paragraphe 
                                                    =(
 
 

Ciblage parents

Un autre exemple de ciblage d'un élément dans un élément

#contenant .element_dedans .sous_element

  .border {
      border:1px solid #000;
  }
  .cascade {
      margin-left: 10px;
      background: #FFF;
      text-align: center;
  }
  .cascade:hover { /* Hover est une autre pseudo-classe bien pratique... */
      background: fuchsia;
  }
  #enfant p { 
      /* tout p présent dans #enfant */
      text-transform: uppercase;
  }

  
tête
  

    
aide
    

      
autonomie
 
    
  


  

  
jambes

Nesting

  .border {
      border:1px solid #000;
  }
  .cascade_nesting {
      margin-left: 10px;
      background: #FFF;
      text-align: center;
  }
  .cascade_nesting:hover { /* Hover est une autre pseudo-classe bien pratique... */
      background: yellow;
  }

  #parent_nesting {
    p { 
      color: red;
    }
    u { 
      padding: 10px;
      display: inline-block;
    }
    u, p {
      text-transform: uppercase;
      background: yellow;
      display: inline-block;
    }
  }
  #grand_parent_nesting:hover :is(#parent_nesting, #enfant_nesting) {
    & * {      background: orange     }
    background: orange
  }

tête
aide
autonomie

Mise en page, garder son code lisible et ordonné

Vous notez que dans l'écriture du code HTML, j'essaie de garder les choses lisibles...
On pourrait ajouter de l'espace (saut de ligne) pour espacer les div avec #id

On peut faire autant de sauts de ligne que l'on veut... le navigateur ne les interprète pas comme des sauts de ligne (on l'a vu, on peut utiliser
)

Autre chose, on utilise des retraits de ligne (à gauche) des "indent", des espaces pour, visuellement, voir dans le code, quel tag (ici des <p> <div>)
C'est une convention formelle... qui aide grandement à résoudre des "bugs" / "errors"

Dans VSCODE on peut utiliser
Prettier Code Formatter qui fait le boulot à notre place
(aligne correctement les blocs de texte en fonction de leur imbrication successive...)
ou encore indent-rainbow

Margin padding

Si l'on veut créer un saut à la ligne, on peut utiliser ajouter des propriétés de marge externes ou internes à l'élément
Pour cela, il faut que l'élément se comporte comme un bloc, ait une propriété display: inline-block | block

/* Objet au centre, avec MARGE extérieure et PADDING intérieur */

/* DEMO, sert à expliquer.montrer la MARGE EXTERIEURE (margin) autour de #test_margin_padding  */
#test_wrapper { 
    border: 1px solid gainsboro;
    background: #fdffdf;        /* jaune */
    padding: 10px;
}

/* Element avec marges... */
#test_margin_padding { 
    padding: 30px; /* PADDING */
    margin: 30px; /* MARGIN */
    border: 1px solid;
    background-color: #e3dcff;   /* mauve */
    border: 3px solid red; /* bord visuel de notre élément de test */
}

/* DEMO sert à expliquer, montrer la MARGE INTERIEURE (padding) */
/* ... entre le bord de #test_margin_padding et son CONTENU */
#inner_content { 
    background-color: #cff0fb; /* bleu clair*/
    padding: 0px;
}

  
 
    
Contenu
  

Firefox : CTRL+MAJ+I + -> Inspecteur -> Mise en page

En sélectionnant un élément dans le code à gauche, on voit quelles marges externes (et internes, avec padding) lui sont appliquées

#margin_first,
#margin_seconde,
#margin_last {
    /* il faut que propriété "Display" ait la valeur "inline-block"  */
    /* (pour éviter que les éléments sautent à la ligne, des blocs) */
    display: inline-block; 
    border: 1px solid;
}    
.margin_left {
    margin-left: 100px
}
.margin_right {
    margin-right: 100px
}
.large {
    width:500px;
}
.petite {
    width:200px;
}

  

    #margin_first
  

  

    #margin_seconde
  

  

    #margin_last
  

Margin et Padding (mais aussi border ou encore text-shadow) fonctionnent comme ceci :

#top_margin_block {
  width: 100%
}
#margin_exemples_wrapper {
  background: greenyellow;
  border: 1px solid #000; /* width(épaisseur) style color */
    border-width: 1px 1px 1px 1px;
  display: block;
  clear: both;
  float: left;
  width: 100%;
  margin-bottom: 4rem;
}
.margin_exemples {
  display: inline;
  float: left;
  border: 1px solid #000;
  border-color: red;
  background: chartreuse;
   /* top right bottom left */
  padding: 5px 5px 0 5px; /* EXEMPLE Padding */
    padding-top: 5px;      /* déclinaison.. marche aussi avec border, margin, etc. */
    padding-right: 5px;
    padding-bottom: 0;
    padding-left: 5px; 
  height: 100px; 
  width: 100px;
}
.margin_exemples.margin_autour {
  margin: 100px 0px 0px 0px; /* EXEMPLE Margin */
  height: auto; width: auto;
  min-height: 100px;
  background: lavender;
    /* top+bottom    left+right */
  border-width: 1px 4px; /* EXEMPLE border... 2 val., 1er==top+bottom 2e==left+right */
}

  
#top_margin_block
  
.margin_autour :
margin: 100px 0px 0px 0px;
  
style : 
margin-top: -10px

Notez que, dans le dernier exemple, c'est le style="..." de l'élément (qui est chargé/lu/interprété en dernier, après la feuille de style)....
c'est ce style (margin-top: -10px) qui l'emporte.
On garde la logique, la dernière propriété:value donnée à un élément (ex. : div#exemple.dernier) qui est prise en compte.

Transition + margin (pause)

#mousehover_movemargin_element { 
  height: 130px;
  width: 130px;
  background: red;
  color: #FFF;
  padding: 20px;
  text-align: center;
  display: block; /* par défaut, une div a la propriété "display" == "block" (comme valeur) */
}
#mousehover_movemargin:hover #mousehover_movemargin_element {
  margin-left: calc(100% - 130px - 50px);
  background:yellow;
  transition: all 1s;
  cursor: pointer;
}

  

    
Youhouuuuu
  

Margin auto + float (+var +calc)

#margin_auto {
  display: block; /* + display block */
  margin: auto;   /* + marge gauche+droite ==> centré ! */
  /* + taille.largeure fixe (width), ici donnée par .w_large */
  /* ==> block centré ( marges auto à droite et à gauche ) */
  background: yellow;
  text-align: center;
}

#float_none  { float: none;  }
#float_left  { float: left;  }
#float_right { float: right; }

#margin_center_wrapper { /* DEMO rend visible le margin auto */
  background: #fdffdf;
  float: none;
  border: 1px dashed gray;
}

/* Variables : on attribue une valeure (400px) à une variable "--xxx" */
/* ... normalement, methode, on les met au début de la feuille CSS (en premier/haut) */
:root { 
  --w400: 400px; 
}
.w400    {  width: var(--w400);  } /* on charge la valeur contenue dans la variable "--xxx" */
.w_large {  width: 600px;  } 
.h_grand {  height: calc(100px + 100px); } /* calc permet de faire des oppérations mathématiques */
.h100    {  height: 100px; }
.w100p   {  width: calc(100% - var(--w400)); } /* exemple calc + var ... on aura d'autres exemples*/

.floater {
  background: yellowgreen;
  padding: 10px;
  box-sizing: border-box; /* "box-sizing" va auto calculer les dimensions (height/width)... */
  /* ... SANS les Padding ni Margin */
  /* ... sinon, par défaut la largeur ici calculée serait --w400 + Margin + Padding */
  /* ... ce qui serait trop large !!!! du coup mon calcul serait faussé */
  /* ... ( je devrais moi-même prendre en compte les margins... ) */
}

#float_none


  
#margin_auto :
Contenu centré


#float_right: 
width: var(--w400)

#float_left :
width: calc(100% - var(--w400))

Largeur / hauteur (adaptative)

#width_full_page {
  max-width: 800px;
  min-width: 500px:
  padding: 10px; border: 1px solid; background: yellow;
}

  #width_full_page

Mediaqueries

:root {
    --maxw: 600px;
    --maxw_extra: 900px;
}
#width_full_page,
#width_bloc_textarea {
    padding: 10px; border: 1px solid; 
    background: yellow;
}

.min_max_width {
    min-width: 500px;
    max-width: var(--maxw_extra);
}

/* vue adaptative aka. responsive design */
@media (max-width: 638px) { /* == S'applique tant que l'écran a une largeur maximum de... 638px (et -) */ 
                            /* == Si l'écran a une largeur max de 638px */
                            /* ..... ok .... ok .... 638px || non */
    #width_full_page {      
        background: rgb(34, 255, 0);
    }
}
@media (min-width: 700px) { /* == Si l'écran est large au minimum de... 700px (et +) */
                            /* non || 700px ..... ok .... ok .... */
    #width_full_page {
        background: rgb(255, 102, 0);
    }
}

/* EXTRA/bonus ":has".... */
/* Si xxx:has(yyy) == "SI xxx contient yyy" */
/* Ici, on garde la taille fixe si le bloc contient une textarea */
.min_max_width:has(textarea) {
    min-width: var(--maxw);
    max-width: var(--maxw);
}
textarea {
    width: var(--maxw); /* initial */
    max-width: calc(var(--maxw) - 10px);
    min-width: 400px;
    min-height: 100px;
    max-height: 300px;
    display: block;
}

  
     
  
  
    

        #width_full_page
    

    

        #width_bloc_textarea
        Ecire un truc
    
  

Positions... left/right/top/bottom

On peut également déplacer un élément de la page grâce à la combinaison de :
position: relative | absolute | fixed | sticky
left / right / top / bottom: 100px

.moveme {
  z-index: 999;
}
.move_relative {
  position: relative;
}
.move_absolute {
  position: absolute;
}
.move_fixed {
  position: fixed;
  opacity: 0;
  bottom: 0px; right: 0
}
.moveme:hover {
  opacity: 0;
}

/* "Combinateur de voisins directs" (.item + .other) */
/* https://developer.mozilla.org/fr/docs/Web/CSS/Next-sibling_combinator */
.not_last_move:hover + .moveme,
.not_last_move:hover,
.move_fixed:hover {
  opacity: 1;
}


/* encore du CSS avancé... */
/* https://css-tricks.com/examples/nth-child-tester/ */
/* https://css-tricks.com/how-nth-child-works/ */
.moveme:nth-last-child(2) {
  border: 3px solid red;
}
.moveme:nth-last-child(1) { background: red; color: #FFF; z-index: 9999999; }

.petit_padd { padding:4px; background: #FFF }


#pos_sticky {
  position: sticky;
  top: 0;
  right: 0 !important;
  float: right;
  margin: 0;
  background: aqua;
}

relative + left:100px; 
relative + left:300px;
relative + top:-70px;
absolute + top:-70px;
fixed + bottom: 0px; right: 0;

Dialog

Selection

Petite pause, encore une pseudo-classe...
MDN : https://developer.mozilla.org/fr/docs/Web/CSS/::selection

/* #incognito { pointer-events: none;} */

.code-content ::selection {
  background: #000;
  color: #FFF;
}

#incognito :is(.censured, .silencied, .unreadable) {
  background:#000;
  color: #000;  
  pointer-events: none;
}
#incognito :is(.censured, .silencied, .unreadable)::selection{
    color: #000;
}

  

    Id quis id est cupidatat ea culpa. Excepteur excepteur adipisicing esse ullamco occaecat duis commodo reprehenderit commodo nostrud incididunt. Dolore nisi nostrud aute mollit eu pariatur. In incididunt reprehenderit ut nisi veniam Lorem. Laboris irure occaecat cupidatat et.
  
  

    Velit culpa deserunt commodo magna eiusmod deserunt tempor aute excepteur et labore velit incididunt qui. Labore velit do sunt enim aliquip veniam deserunt deserunt. Mollit proident reprehenderit ullamco. Dolor eu cillum ipsum consequat eu consectetur minim enim commodo dolor sint irure nostrud magna. Adipisicing enim laboris anim consectetur Lorem incididunt dolore minim mollit deserunt ad dolor id ad exercitation. Aliquip irure deserunt eiusmod minim ex nostrud duis irure ad laborum. Lorem cupidatat commodo exercitation laborum mollit sint sint consequat commodo.
  

Textes

#text_basics {
  font-size: 1.2em;
  line-height: 2em; /* ((( em ))) 1em == Hauteur de la police... 1.5em 1xhauteur de la police + 0.5... */
  font-family: sans-serif, Arial;
  text-decoration: underline;
  font-style: italic;
  text-align: justify;
  hyphens: auto;
}
#text_basics p:first-letter {
  text-transform: uppercase;
}

  
ipsum exercitation adipisicing incididunt fugiat nulla laboris sit consectetur esse sunt laborum nisi nisi nisi ullamco. Deserunt cupidatat occaecat in. Proident voluptate exercitation culpa veniam nulla elit fugiat. Cillum id consequat fugiat dolore culpa proident amet. Lorem est qui quis nulla nostrud labore irure id culpa cupidatat non aute nostrud pariatur. Sint veniam cillum ut veniam voluptate excepteur commodo occaecat elit pariatur laborum. Laborum ad duis cupidatat consequat cillum enim cupidatat enim enim sint labore. Aliqua ipsum aliqua quis occaecat est sunt nulla sit pariatur velit nostrud dolore ipsum est.