partie 2

Styliser sa page avec CSS

Le style par défaut d'une page HTML est assez… brut.

Afin de le personaliser, on utilise un autre langage appelé CSS (Cascading Style Sheets). HTML et CSS vont quasi systématiquement de paire, le premier afin de structurer le contenu, le second pour apporter des modifications visuelles.

Utiliser CSS dans sa page HTML

Pour utiliser CSS dans notre page HTML, on va créer un lien entre les deux fichiers.

Dans le même dossier que le fichier index.html, on créé un fichier style.css
À l'intérieur du head de notre fichier index.html, on ajoute la ligne suivante :

<head>
    …
  <link rel="stylesheet" href="style.css">
</head>

Ensuite, grâce au CSS on va assigner des propriétés de style (couleur, typo, mise en page, …) à nos éléments HTML. Dans le fichier style.css :

h1 {
  color: red;
}

On a les éléments de base du CSS :

un sélecteur → h1
une propriété → color
une valeur → red

Les selecteurs

Les balise

Ils permettent de cibler des éléments HTML.

Lorsque j'écris :

div {
  font-size: 24px;
}

Je dis au navigateur de cibler toutes les div de ma page, et de leur appliquer une taille de font de 24 pixels.

De la même façon, si j'écris :

a {
  font-style: italic;
}

Mon navigateur va passer en italique tous mes liens.

Les classes

Souvent, on ne veut pas cibler toutes les div, tous les titres de niveau 1 ou tous les liens, mais plutôt certaines div, certains liens, etc.

Pour cela, on utilise des classes.

<div class="special-text">Ce texte sera souligné et en italique</div>

.special-text {
  font-style: italic;
  text-decoration: underline;
}

Tous les éléments avec la classe .special-text auront ce style appliqué, les autres div ne seront pas affectées.

Padding, margin et border

+---------------------+
|  Margin             |
| +-----------------+ |
| |  Border         | |
| | +-------------+ | |
| | |  Padding    | | |
| | | +---------+ | | |
| | | | Content | | | |
| | | +---------+ | | |
| | +-------------+ | |
| +-----------------+ |
+---------------------+

padding ajoute un espacement à l'intérieur du bloc
- padding: [all]; → padding: 20px
- padding: [top-bottom] [left-right]; → padding: 10px 20px
- padding: [top] [right] [bottom] [left]; → padding: 10px 20px 30px 40px;
- padding-top: 10px;
- padding-right: 10px;
- padding-bottom: 10px;
- padding-left: 10px;
border permet d'ajouter une bordure au bloc
- border: [width] [style] [color];
- border: 1px solid black;
- border-bottom: 3px;
margin ajoute un espacement à l'extérieur du bloc
- syntaxe identique à padding

Ajouter des fontes

Utiliser ses propres fichiers

Il faut utiliser différents formats :

ttf : universel mais lourd
otf : largement supporté, plus complet
woff : conçu pour le web (meilleure compression), support moins large
woff2 : évolution de woff, légèrement moins supporté

Dans le dossier où se trouve notre fichier index.html :

créer un dossier fonts
placer les fichiers de fonts dans le dossier

Pour définir la police, on ajoute un bloc @font-face spécifique en haut de notre fichier CSS :

@font-face {
  font-family: 'myfont';
  font-weight: normal;
  font-style: normal;
  src: 
    url('fonts/myfont.woff2') format('woff2'), 
    url('fonts/myfont.woff') format('woff'),
    url('fonts/myfont.otf') format('opentype');
}

@font-face {
  font-family: 'myfont';
  font-weight: 800;
  font-style: normal;
  src: 
    url('fonts/myfont-black.woff2') format('woff2'), 
    url('fonts/myfont-black.woff') format('woff'),
    url('fonts/myfont-black.otf') format('opentype');
}

body {
  font-family: 'myfont';
}

.font-black {
  font-weight: 800;
}

Utiliser Google Font

<head>
  ...
  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Martian+Mono:wght@300;400;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">
</head>

body {
  font-family: 'Martian Mono', monospace;
}

Pour aller plus loin : Principales propriétés CSS

← créer une page web HTML sémantique & flex →