Les éléments HTML sont nombreux, ils servent à entourer un contenu dans la page

Par exemple, si on écrit ce code : text souligné le text va être sousligné (un style va lui être appliqué)

text souligné

Chaque navigateur (Chrome.ium, Firefox.Brave, Safari), va lire ces "diférentes balises" ("tag" en anglais) et afficher leur contenu en fonction de celles-ci. Si chacune d'entre elle se comporte diférement dans la page, c'est que, par défaut, le Navigateur (qui lit et interpréte le code), va leur ajouter des styles d'habillage

Mettre du texte entre deux balises....

lien vers

  
titre
  
titre
  
titre
  
titre
  
titre
  
titre

Mettre du texte entre deux balises text permettera de créer un lien

Une balise <div>contenu</div> permet de contenir d'autes éléments

    

      
autres contenus
    

  Plus d'informations :
  MDN Firefox (DIV)

  ( élément de division du contenu )
  

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

On va y revenir avec un exemple

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

Si on veut éviter les sauts de ligne quand on entoure un élément de text (ou autre contenu), on utilisera des balises "inline"

Des balises "inline" permettent au contraire d'entourer des bouts de textes (ou autres contenus) sans faire de saut de ligne !

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

<strong>contenu</strong> comme <a>contenu</a> sont inline

Dans l'écriture dans l'éditeur de texte où l'on code, on peut faire autant de sauts à la ligne qu'on veut !

À l'orgine il s'agissait de "mimer" certaines mises en formes usuelles dans le journalisme, l'édition

Padding crée une marge entre le text est le bord de la feuille (page, support)

La balise...
"u" underline
"b" ou "strong" gras
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)

On peut modifier les propriétés de ces éléments proposés "de base" en HTML

On peut opérer de plusieurs façons, d'abord on peut ajouter du style directement dans un élement

Dolore exercitation et ex tempor

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

labore laboris pariatur, devrait être en gras (propriété inérante à <strong>) mais on a ajouté un style directement sur l'élémént ("inline")

font-weight: normal; demande en effet que le style d'empatement (gras) du texte entre les balises soit "normal"
(et non pas "bold", valeur par défaut attribuée à <strong>)

petit text
plus petit text

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

On peut également créer une "feuille de style" pour "Cascading Style Sheet" == CSS

Elle va contenir des instructions de mise en forme/page qui vont habiller les éléments de la page

L'intéret c'est que ces règles sont accessibles dans un fichier distinct de la page HTML (ce qui rend son accès et lecture plus simple)

On peut surtout ainsi modifier plusieurs éléments récurents dans nos pages... (cela donnera de la cohérence esthétique à un site)

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

Dans la page actuelle j'en ai chargé plusieures...

Certaines vont servir plusieurs fois, être chargées dans plusieurs pages HTML

Ainsi, avec une même feuille de style mon site aura une certaine homogénéité, une cohérence visuelle

Je peux voir le code source de la page en faisant CTRL+U ou CTRL+MAJ+I

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 on pourra utiliser

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

  
tempor ut consequat sint...
 
  
deserunt commodo sunt aute...
  
Laboris nisi amet nisi laborum nostrud. Mollit nisi dolore.....
  
Eiusmod id veniam minim duis deserunt exercitation cupidatat....

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

HTML On peut attribuer plusieurs classes à un même élément

/* 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;
}
/* PSEUDO CLASSE :last-child */
p:last-child .para {
  background-color: orangered;
}

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

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

#contenant .element_dedans .sous_element

#enfant p {
  text-transform: uppercase;
}

  
tête
  

    
soutient
    

      
autonomie
 
    
  
  
jambes

S'il on veut créer un saut à la ligne on peut utiliser ajouter des propriétés d'espacement...

Sur les éléments qui se comportent comme des "blocs" (telles les div)

On peut ainsi espacer les contenus...

/* Objet au centre, avec MARGE extérieure et PADDING intérieur */
#test_margin_padding { 
    padding: 30px; /* PADDING */
    margin: 30px; /* MARGIN */
    border: 1px solid;
    background-color: #e3dcff;
    border: 3px solid red;
}
/* DEMO, sert à expliquer.montrer la MARGE EXTERIEURE (margin) autour de #test_margin_padding  */
#test_wrapper { 
    border: 1px solid gainsboro;
    background: #fdffdf; /* jaune */
    padding: 10px;
}
/* DEMO, sert à expliquer.montrer la MARGE INTERIEURE (padding) entre le bord de #test_margin_padding et son CONTENU */
#inner_content { 
    background-color: #cff0fb;
    padding: 0px;
}

  
 
    
Contenu
  

Margin crée de l'espace, permet aussi de déplacer les éléments...

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

  

    
Youhouuuuu
  

#margin_first,
#margin_seconde,
#margin_last {
    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;
  display: block;
  clear: both;
  float: left;
  width: 100%;
  margin-bottom: 4rem;
}
.margin_exemples {
  display: inline;
  border: 1px solid #000;
  background: chartreuse;
  padding: 5px 5px 0 5px; /* EXEMPLE Padding */
  height: 100px; width: 100px;
  float: left;
}
.margin_exemples.margin_autour {
  margin: 100px 0px 0px 0px; /* EXEMPLE Margin */
  height: auto; width: auto;
  min-height: 100px;
  background: lavender
}

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