text souligné

lien vers

  
titre
  
titre
  
titre
  
titre
  
titre
  
titre

    

      
autres contenus
    

  Plus d'informations :
  MDN Firefox (DIV)

  ( élément de division du contenu )
  

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

D'autres éléments se comportent comme du text, 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 diférentient 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 ne passe pas à la ligne...

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'orgine il s'agissait de "mimer" certaines mises en formes 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

demo 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 toute fois 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 dev. s'affichent
Dans Firefox je trouve les parametres 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 feulles 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éménts "strong"... C'est la propriété font-weight avec la valeur "bold" (gras) qui crée l'empatement... ... par défaut, un élément "strong" est mis en gras "bold" Pour changer l'empatement je vais modifier le style de l'élémént 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 text

On a vu qu'en HTML on pouvait entourer / encercler / contenir... des bouts de text par des balises Une fois entourés par ces balises, ces bouts de text séparés sont appelés de é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 "Selectors" utilisés dans les feuilles de style CSS pour cibler des éléments présents dans la page HTML )

L'intéret 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 fichiers 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écurents 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...

---

Où mettre la feuille de style ?

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

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

On peut la nomer 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 inforamtions 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)

Créer un fichier + ! template Html

Dans VSCODE (ou Codium), le logiciel de code qu'on va utiliser...
je peux créer un fichier index.html
l'ouvrir... et tapper "!", un popup s'ouvre (Intellisens), en faisant ENTRER, le template (gabari, préformatage) d'une page HTML est chargé...

Lien vers 0_index_empty.html

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

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

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 formes courament utilisées
Aussi il est interessant de trouver des noms de classes é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émens ciblés en même temps (via leur classe, id, etc) -- virgule

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

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

HTML : On utilise un --espace pour attribuer plusieurs classes à un même élément ( ex 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 plusieures 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 effecté 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 troisiem 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
  

    
soutient
    

      
autonomie
 
    
  


  

  
jambes

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 saut 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 blocks de textes en fonction de leur imbrication successive...

Margin padding

S'il 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 selectionnant 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 blocks) */
      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.

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
    

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
  

Positions... left/right/top/bottom

On peut également déplacer un élément de la page grace à 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 {
  text-align: center;
  font-size: 1.2em;
  line-height: 2em;
  font-family: sans-serif, Arial;
  text-decoration: underline;
  font-style: italic;
}
#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.