# 0 intro

Table des matières

# Bonjour le Monde !!!

## HTML, balises, éléments

Une page HTML est lue par le navigateur qui va interpréter son contenu, charger les ressources demandées

HyperText Markup Language est une façon de composer l'espace d'une page web, avec des balisages (markups) dont les hyperliens sont centraux.

Les balises HTML (tags en anglais) sont nombreuses....
Elles viennent encercler/encapsuler/contenir... entourer/délimiter... les contenus de la page qui, ainsi, sont différenciés en objets distincts, en éléments

Il existe plein de balises permettant de créer, de base, des éléments HTML et plein de propriétés d'affichage - Cascading Style Sheets (CSS) - qu'on peut leur ajouter (pour les modifier)... voir MDN Je vais ici principalement me référer à MozillaDevNetwork (MDN)... il existe énormément de ressources pour apprendre à coder... Je vous conseille également... Un index.sommaire (qui pointe vers MDN) fait le tour Selectors (et propriétés) CSS... Selectors complexes (ciblage CSS), en anglais, on les verra petit à petit La Cascade (FR), ressources sur le CSS...

### Vscode + template

Index des projets... Home/Index : https://code.bonnebulle.xyz
Avec un sous-dossier par personne...

Que vous pouvez ouvrir dans VSCODE, le logiciel de code qu'on va utiliser...
C'est une version de l'application VSCode accessible en ligne...
Ce qui permet de démarrer tout de suite.... dans un environnement de travail préconfiguré
Et moi de suivre vos différents projets au même endroit...
Vous travaillerez depuis votre propre dossier de projet !

Depuis VSC, on peut créer un fichier index.html
l'ouvrir... et taper "!", un popup s'ouvre (IntelliSense), en faisant ENTRER, le template (gabarit, préformatage) d'une page HTML est chargé...

Page d'aide, raccourcis :
0_intro_vscode

### Afficher le code source

On va déjà regarder comment est composée une page HTML basique...

Lien vers 0_index_empty.html

CTRL+MAJ+I Les outils de développement s'affichent,
CTRL+U, le code source (le fichier avant qu'il soit lu/interprété par le navigateur)

#### ... structure de la page, head, body, footer

Par convention (et méthode)
... on met les contenus contextuels (meta) et ressources dans la tête de la page <head>titre, feuilles de style .css, etc.</head> (contenus invisibles)
... on y met les contenus courants, les textes, images, dans le corps de la page <body>articles, textes, images, contenus, etc.</body> (contenus visibles)
Les commentaires CTRL+MAJ+/ sont invisibles...

Footer, on le verra avec JavaScript, est un espace en bas de page où l'on charge d'autres ressources (.js)...
à la fin de la page... ce qui est en bas étant lu... en dernier

### HTML balises simples, souligner, titres... div

On va se concentrer sur le contenu dans <body> en commençant par quelques exemples de balises simples :

Exemple :

    text souligné

    lien vers

#

##

###

####

#####

######

    titre
    titre
    titre
    titre
    titre
    titre

On construit la page ainsi, en contenant des éléments les uns dans les autres

      autres contenus

    Plus d'informations :
    MDN Firefox (DIV)

    ( élément de division du contenu )

Dans une <codescaped>div, tout ce qui se retrouve avant, à droite, à gauche... saute à la ligne, passe après la <codescaped>div
C'est parce qu'une <codescaped>div se comporte comme un "block"

On va y revenir avec un exemple

#### Sauts de ligne : br, hr
...

Dans l'éditeur de texte où l'on code (IDE, pour Integrated Development Environment), on peut faire autant de sauts à la ligne qu'on veut !
On peut espacer des parties de code... le navigateur ne va créer des sauts de lignes que si on lui demande d'en afficher.

    On peut forcer un saut à la ligne avec
     ou un autre séparateur comme

Certains éléments (comme les "div") vont créer du vide autour d'eux, des sauts de ligne..., agir comme des "block"

D'autres éléments se comportent comme du texte, sans créer de saut de ligne autour d'eux
: ils se succèdent sur la ligne, ils sont affichés de façon "inline"

Ce qui les différencie, c'est la propriété d'affichage (display)

    Plus d'informations :
    MDN Firefox (Display)

Vous noterez que, même si je fais un saut de ligne dans le code..., le lien <codescaped> ne passe pas à la ligne...

<codescaped>contenu ainsi que <a>contenu</a> sont "inline"

### Basics, des balises de base prêtes à l'emploi

D'autres éléments de base permettent de styliser facilement le texte...

À l'origine, il s'agissait de "mimer" certaines mises en forme usuelles dans le journalisme, l'édition.

La balise...
"u" underline
"b" ou "strong" gras
em ou i pour italic
La balise "span" est neutre mais permet d'entourer une partie du texte
... On va voir ensuite comment il est possible d'ajouter des "classes" et "id" permettant de les identifier.

    Démo de balise inline qui crée du gras (et c'est tout)

    #italgras {
      i, u, strong {
        color: orange
      }
    }

      Exemple :

      Voluptate labore laboris pariatur. Dolore exercitation et ex tempor tempor ut consequat sint deserunt commodo sunt aute. Ex ad est culpa sint eiusmod dolor enim fugiat ipsum eiusmod dolor deserunt. Reprehenderit ullamco pariatur aliqua officia veniam deserunt duis esse nulla laborum ad adipisicing reprehenderit cupidatat cupidatat. Sunt exercitation ad ullamco cillum id. Tempor velit exercitation aute velit pariatur.

      Laboris nisi amet nisi laborum nostrud. Mollit nisi dolore consectetur cupidatat magna occaecat reprehenderit labore esse id. Irure esse excepteur ea aliquip eiusmod velit ipsum exercitation fugiat officia ullamco ut et reprehenderit laboris. Culpa ipsum tempor excepteur. Officia in ea magna do commodo exercitation. Laborum voluptate incididunt incididunt do Lorem in est laboris consectetur enim occaecat. Culpa laboris incididunt eu id qui sit eu voluptate quis laboris eiusmod. Eu aliquip aliqua labore ad eu sint adipisicing laboris esse nisi ut mollit ex eu.

### Voir les styles CSS par défaut

On peut toutefois modifier les propriétés données à ces éléments de base (ou en utiliser un plus adapté)

Je peux voir le code source de la page en faisant CTRL+MAJ+I les outils de développement s'affichent
Dans Firefox je trouve les paramètres via icon "..." (à droite) puis Parametres ("icon rouage") /OU/ F1

Je peux ensuite demander d'afficher ces styles par défaut.

Firefox montre bien que "strong" a des valeurs par défaut... On peut voir d'autres propriétés et feuilles de style

#### Ajouter du style = propriétés + valeurs

On peut opérer de plusieurs façons, d'abord on peut ajouter du style directement dans un élement
On parle de méthode "inline", dans le texte/code/page même (pas un fichier distinct, on va y revenir)

Ici, je veux annuler la propriété et valeur attribuées aux éléments "strong"... C'est la propriété font-weight avec la valeur "bold" (gras) qui crée l'empâtement... ... par défaut, un élément "strong" est mis en gras "bold" Pour changer l'empâtement je vais modifier le style de l'élément strong... font-weight est une propriété normal une valeur attribuée à cette propriété

    Dolore exercitation et ex tempor

    labore laboris pariatur....
    labore laboris pariatur....

Ici, je suis venu ajouter du style directement à l'élément font-size est une propriété (de style, d'habillage) 10px une valeur attribuée à cette propriété

    petit text -
    même taille  -
    plus petit texte

On a vu qu'en HTML, on pouvait entourer / encercler / contenir... des bouts de texte par des balises Une fois entourés par ces balises, ces bouts de texte séparés sont appelés des éléments" Il existe des éléments de base, prêts à l'emploi, ils ont des propriétés d'affichage intégrées (par défaut) On peut modifier les éléments en y ajoutant du "style" directement à l'intérieur de l'élément (avec style="") Ces nouvelles propriétés et valeurs outrepassent celles précédemment demandées (par le navigateur)

### Feuilles de style : fichier.css

Comme on vient de le voir...
On peut ajouter du style directement dans un élément (dans la page HTML)... mais ce n'est pas le plus simple

Il est préférable de créer une "feuille de style" pour "Cascading Style Sheet" == CSS

On y renseigne / indique / ajoute des instructions d'habillage qui vont modifier le comportement visuel des éléments dans la page...
( qu'on va identifier grâce à des sélecteurs utilisés dans les feuilles de style CSS pour cibler des éléments présents dans la page HTML )

L'intérêt d'une feuille de style, c'est qu'on peut y ajouter autant de règles qu'on veut et les sauvegarder dans un fichier (qu'on va pouvoir copier, déplacer)
... Ainsi, ces règles inscrites dans un fichier seront accessibles directement (plutôt qu'intégrées dans la page HTML).
... Ainsi, plusieurs pages pouront charger les mêmes instructions de style.
... Si je mets à jour cette feuille de style (fichier), toutes les pages qui la charge auront leur mise en page mise à jour !<
On peut ainsi modifier plusieurs éléments récurrents d'une page à l'autre... (cela donnera de la cohérence esthétique à un site)

C'est une méthode de centralisation de l'information...

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_selectors ( Sélecteurs en français )

#### Où mettre la feuille de style ?

Voyons d'abord comment fonctionne une feuille de style (CSS)

Pareillement à une page web (par exemple index.html), une feuille CSS a une extension particulière : ".css"

On peut la nommer de plein de façons ! style.css par exemple

"On ne met pas d'espace dans le nom des fichiers !, on les remplace par "_" ou "-", plutôt "_""

Une fois la feuille de style créée, on devra la charger dans la page HTML

Si je mets cette balise dans ma page (de préférence dans <head> .... et </head>, dans la tête de la page)... les instructions qu'elle contient vont modifier la façon dont le navigateur affiche les éléments de la page

Lien vers style_basics.css

La feuille de style (fichier) est pratique si on l'utilise plusieurs fois de page en page Et, formellement, cela permet d'avoir toutes les informations séparées au même endroit... Mais on peut aussi charger cette cascade d'instructions directement dans la page...

Au lieu d'utiliser <link>, on pourra utiliser <style>...</style>
== On peut mettre des instructions de style en cascade directement "inline", dans la page HTML....
plutôt que dans un fichier séparé (block)

### Identifier et "cibler" les éléments de la page (id, classes)
+ leur attribuer des propriétés+valeurs

Plutôt que d'intervenir sur un élément à la fois, on pourra attribuer les mêmes propriétés à un ensemble de mêmes éléments, Ici, la classe "important" est ajoutée sur deux éléments span... Ils sont rouge car une instruction dans la feuille de style CSS rend le texte... rouge Dans la feuille de style, on indique qu'on cherche (cible) TOUS les éléments avec la classe "important" en indiquant.... #important_wrapper (# == ID) .important (. == classe) Ce qu'on fait là, c'est cibler ("sibling") un élément d'après sa class ou son id On verra qu'il existe d'autres moyens (plus sophistiqués) Un index complet (qui pointe vers MDN) fait le tour Selectors (et propriétés) CSS...

      #important_wrapper { /* id */
        margin-left: 10px;
        border-left: 3px solid red;
        padding-left: 20px;
      }
      .important { /* classe */
        font-weight: bolder;
        color: red;
      }
      .pas_important {
        font-weight: normal;
      }

      Ceci est une span avec une class .important (mais pas strong)...
      Ceci est strong sans classe, normal, basic.....
      ... Ceci est strong mais .pas_important !
      De nouveau, une span qui se fait passer pour strong !

<pCibler un élément : on indiquera simplement "div"</p>

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
=== <codecss>#texte_principal p { ... }</codecss>
=== "parent > enfant"

HTML : on utilise une --espace pour attribuer plusieurs classes à un même élément ( exemple suivant: "<codescaped>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
                                                        =(

1. et 2. sont verts (car .para) 3. est bleu... car, dans une la suite d'instructions CSS, la dernière règle indiquée l'emporte sur les règles précédentes !!! C'est pour cela qu'on dit qu'elles sont en cascade ! == Le fichier est lu de haut en bas par le navigateur qui ensuite affiche la page selon cette liste de demandes/règles. Ici, dans le CSS, les instructions de fond (background) indiquées dans "<codecss>.fond_bleu</codecss>" prennent le dessus sur celle de "<codecss>.para</codecss>" 4. utilisation d'une `pseudo-classe` (on va les passer en revue), ( MDN Pseudo-classes + MDN last-child ) ... celle-ci, dans notre exemple... cible TOUT dernier paragraphe (<codecss>p:last-child</codecss>) puis cherche TOUT <codecss>.para</codecss> à l'intérieur... ( ... dit à l'envers : cette instruction cible TOUT élément avec la classe <codecss>"para"</codecss> présent dans le dernier paragraphe (<codecss>p:last-child</codecss>) ) 4. Dans le CSS... ... Comme cette instruction d'atteindre/cibler le dernier <codecss>.para</codecss> est indiquée après celle de "<codecss>.fond_bleu</codecss>", elle prend le dessus : ... la propriété:value <codecss>background-color: orangered;</codecss> est appliquée !!!

##### 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

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting CSS Avancé ! Autre façon de cibler les éléments d'une page HTML
Permet une meilleure lisibilité, on attribue des instructions CSS par élément (et ses sous-élements)

      .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 <codescaped>
)

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"

Wiki Style d'indentation : https://fr.wikipedia.org/wiki/Style_d'indentation

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

MDN (margin) : https://developer.mozilla.org/fr/docs/Web/CSS/margin MDN (padding) : https://developer.mozilla.org/fr/docs/Web/CSS/padding MDN (border) : https://developer.mozilla.org/fr/docs/Web/CSS/border MDN (raccourcis) (T R B L) https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Getting_started#raccourcis MDN (display) : https://developer.mozilla.org/fr/docs/Web/CSS/display

    /* 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 <codescaped>style="..." de l'élément (qui est chargé/lu/interprété en dernier, après la feuille de style)....
c'est ce style (<codescaped>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)

Margin crée de l'espace, permet aussi de déplacer les éléments... MDN (transition) : https://developer.mozilla.org/fr/docs/Web/CSS/transition

    #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))

Box-sizing... La Cascade, explications détaillées en Français : https://la-cascade.io/articles/box-sizing-pour-les-nuls MDN (détails) : https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Box_model MDN (:root) https://developer.mozilla.org/fr/docs/Web/CSS/:root MDN (var) : https://developer.mozilla.org/fr/docs/Web/CSS/var MDN (calc) : https://developer.mozilla.org/fr/docs/Web/CSS/calc

### Largeur / hauteur (adaptative)

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

      #width_full_page

### Mediaqueries

Exemple complet : 0_min_max_width.html Penser à ajouter <meta name="viewport" content="width=device-width, initial-scale=1.0"> dans head

    :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

MDN css CSS_media_queries MDN css Unités de mesure (px, em, vw, vh) MDN css :has MDN html textarea

### 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

MDN (Position) : https://developer.mozilla.org/fr/docs/Web/CSS/position

    .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;

#pos_sticky

#### Dialog

Faisons une petite pause !

#### 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

MDN font-familly : https://developer.mozilla.org/fr/docs/Web/CSS/font-family MDN font-size unités (em, px) : https://developer.mozilla.org/fr/docs/Web/CSS/length#em

    #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.

## Alignement de texte, colonnes...

### Alignement manuel (2 colonnes left/right)

MDN font-size unités (em, px) : https://developer.mozilla.org/fr/docs/Web/CSS/column-count

    #contenant {
      display: block;
      margin-bottom: 5rem;

      p:first-child {
        margin-top: 0;
      }
      p:last-child {
        margin-bottom: 0;
      }

      .left, .right {
        float:left;
        width: 50%;
        box-sizing: border-box;
      }

      .left {
        width: calc(50% - 0px);
        padding-left: 0px;
      }
      .right {
        border-left: 1px solid #000;
        padding-left: 30px;
      }
    }

            Un projet super simple construit grâce à un template sur GitLab

            Un projet super simple construit grâce à un template sur GitLab

### Alignement css (column-count)

    #contenant_cols {
      column-count: 2;
      float: left;

      .text {
        text-align: justify;
        hyphens: auto;
        display: block;
      }
    }

          Nulla et aliquip labore duis irure veniam ipsum labore excepteur incididunt qui. Non nostrud aliquip cupidatat cupidatat enim commodo pariatur consequat quis. Fugiat nulla amet adipisicing eiusmod ullamco ullamco esse voluptate exercitation mollit velit ea aliquip aute eu. Cillum ex tempor dolore ad ex pariatur ex velit. Labore ad ad non ea cillum eiusmod sunt dolor dolore ipsum reprehenderit enim occaecat. Consequat culpa nisi in esse laborum velit non deserunt nostrud sit in veniam. Dolore veniam ad do incididunt est excepteur eiusmod esse Lorem sint.

          Exercitation ullamco nisi Lorem anim occaecat dolore incididunt eiusmod esse aute sunt deserunt laboris. Elit eiusmod consectetur laborum est. Lorem consequat aliqua nisi excepteur est laborum amet voluptate aliquip consequat ea labore sit reprehenderit enim. Eu consequat consequat excepteur reprehenderit ipsum in minim sint. Non ullamco mollit tempor excepteur occaecat dolore aliqua proident sint do. Exercitation duis enim laboris fugiat esse in.

          Excepteur nisi eiusmod ea ut excepteur nisi veniam duis reprehenderit consequat reprehenderit. Nostrud fugiat reprehenderit aliquip. Dolor adipisicing eiusmod do exercitation cupidatat eu. Et commodo veniam esse adipisicing. Exercitation nisi dolore Lorem anim sit non in. Et anim voluptate do proident aliquip occaecat.

Flexbox
#