Les languages du WEB

Les navigateurs ne comprennent que 3 langages :

HTML (Hypertext Markup Language) : Pour la structure de la page.
CSS (Cascading Style Sheets) : Pour le style et la mise en page.
JS (JavaScript) : Pour l'interactivité.

Différence entre HTML, CSS et javascript (HTML fait la structure, CSS ajoute le style et JS l'interactivité avec un bouton click)

Tester CSS

Le plus simple pour tester CSS est de créer un fichier index.html avec n'importe quel éditeur de code

Les principaux sélecteurs

Pour modifier le style d'une balise HTML avec CSS, on utilise un sélecteur.

Cela peut être soit le nom de la balise, soit un id soit une class.

<h1>Titre</h1>

<style>
  h1 {
    // ...
  }
</style>

Sélecteur balise

<h1 id="exemple">Titre</h1>

<style>
  #exemple {
    // ...
  }
</style>

Sélecteur id

<h1 class="exemple">Titre</h1>

<style>
  
  .exemple {
    // ...
  }
</style>

Sélecteur class

ℹ️

Une class à la différence d'un id peut être réutilisée à plusieurs endroits.

Changement au survol

On peut faire un changement de style spécifique lorsque la souris survole un élément.

Survol Simple

<h1>Titre</h1>

<style>
  h1:hover {
    color: orange;
  }
</style>

Couleur orange au survol de la souris

Avec Transition Fluide

<h1>Titre</h1>

<style>
  h1 {
    transition: all 0.2s ease-in-out;
  }
  
  h1:hover {
    color: orange;
  }
</style>

Couleur orange au survol de la souris

Propriétés CSS essentielles

Voici quelques propriétés CSS avec exemple que j'utilise tous les jours :

color: blue : Met la couleur du texte en bleu
background-color : black : Change la couleur de fond (noir en l'occurence)
text-align : center : Aligner le texte pour qu'il soit centré
font-family: "Montserrat", sans-serif : Changer la police d'écriture
font-weight: bold : Définir l'épaisseur de la police (pour la mettre en gras ici)
font-size: 20px : Changer la taille du texte (à 20 pixels ici)
width: 10px : Largeur de 10 pixels
height: 20px : Hauteur de 20 pixels (H comme Hauteur)
max-width: 50vw : Limite la largeur à la moitié de l'écran (vw = view width : largeur de l'écran)
max-height: 10vh : Limite la hauteur à 10% de la la hauteur de l'écran (vh = view height : hauteur de l'écran)

Modèle de boîtes (box model)

Modèle de boîtes en CSS avec marges (margin), bord (border), espace interne (padding) et contenu.

Pour espacer les éléments en CSS on utilise le "Box model", qui comprend la marge extérieure ajoutés, la bordure qui peut être stylisée, un marge interne et finalement le contenu qui peut être un texte par exemple.

Marges externes (margin)

On peut définir des marges externes à une balise HTML de plusieurs manières :

<div></div>
<style>
  div {
    margin: 10px;
  }
</style>

Marge de 10 pixels tout autour de l'élément

<div></div>
<style>
  div {
    margin: 10px 20px;
  }
</style>

Marge de 10 pixels sur l'axe vertical (en haut et en bas) et de 20 sur l'axe horizontal (à gauche et à droite)

<div></div>
<style>
  div {
    margin: 10px 20px 5px 15px;
  }
</style>

Marge définie dans le sens des aiguilles d'une montre en partant du haut (10 pixels en haut, 20 à droite, 5 en bas et 15 à gauche)

<div></div>
<style>
  div {
    margin: 10px 20px 5px 15px;
  }
</style>

Marge définie dans le sens des aiguilles d'une montre en partant du haut (10 pixels en haut, 20 à droite, 5 en bas et 15 à gauche)

<div></div>
<style>
  div {
    margin: 10px;
    margin-top: 0;
  }
</style>

Marge de 10 pixels partout sauf en haut de zéro

ℹ️

On peut aussi utiliser margin-bottom (en bas), margin-left (à gauche) et margin-right (à droite).

Bordure (border)

Pour créer une bordure autour de notre boîte, on peut faire comme ceci :

<div id="specialbox">Boîte</div>
<style>
  #specialbox {
    margin: 5px auto;
    width: 100px;
    height: 100px;
    display:flex;
    justify-content: center;
    align-items: center;


    border: solid black 4px;
    border-radius: 20px;

    border-radius: 200px; // deuxième boîte
    width: 200px; // troisième boite
  }
</style>

Crée une bordure noire de 2 pixels d'épaisseur autour de notre boîte, le border radius sert à arrondir les contours, plus la valeur est grande plus l'arrondi est important jusqu'à obtenir un cercle ou une pilule pour un rectangle : voir résultat ci-dessous.

Boîte 1

Boîte 2

Boîte 3

Marge internet (padding)

De la même manière que la marge externe, on peut en ajouter une interne à notre boîte.

<div></div>
<style>
  div {
    padding: 10px;
  }
</style>

Marge de 10 pixels à l'intérieur de l'élément

Disposition : display

On peut avec la propriété CSS display changer la disposition des éléments à l'écran, voici un schéma qui représente bien cette idée.

Dispositions CSS (display : block, inline, none, inline-block)

Avec display: flex, on peut choisir plusieurs dispositions avec par exemple justify-content: space-evenly :

Différentes possibilités pour `justify-content` (`start`, `end`, `center`, `space-between`, `space-evenly` et `space-around`)

Ces dispositions sont aussi valables à la verticale en changeant la direction : flex-direction: column.

Responsive

 @media (max-width: 480px) { 
        h1 {
          color: red;
        }
     }

Mettre les grands titres en rouge seulement sur mobile

 @media (min-width: 480px) { 
        h1 {
          color: blue;
        }
     }

Mettre les grands titres en bleu quand c'est plus grand que mobile (donc tablettes, PCs...)

Des documentations pour aller plus loin

Merci pour votre lecture !

Rejoins ma Newsletter

Et reçois un max de valeur Gratuitement !

Apprendre CSS : Style et mise en page responsive