Style

Notre site web est structuré (il a un titre, des sous-titres, etc.), mais le style ne vous convient sans doute pas. Dans ce TP, nous allons voir comment modifier l'apparence du site web.

Introduction

Dans votre dossier personnel, créez un dossier alice, dans lequel vous téléchargez ce fichier (clic droit, puis « Enregistrez la cible du lien sous »). Tout le travail de ce TP (sauf la dernière partie) se fera sur ce fichier.

Le but du TP est de faire en sorte que tous les titres de niveau <h2> soient bleus (dans un premier temps).

Style d'une balise

Choisissez une balise <h2>, et ajoutez un argument style à la balise ouvrante, comme dans l'exemple ci-dessous.
```
<h2 style="color:blue;">Biographie</h2>
```
Quel est l'effet produit ? S'applique-t-il à tous les éléments <h2> ?

Style d'une page

Avec la méthode précédente, s'il est possible de modifier le style des titres (et de toutes les autres balises), il faut répéter le même code sur tous les titres de toutes les pages de notre site web. Il y a plus efficace…

Effacez le style="color:blue;" que vous venez d'ajouter.
Au début de votre document (à l'intérieur de la balise <head>), ajoutez le code suivant.
```
<style>
 h2 {
   color: blue;
 }
</style>
```
Quelle est la différence avec la modification de la partie précédente ?
Recherchez sur internet comment mettre tous les titres <h2> en italique, et augmenter la taille de la police.

Style d'un site web

Si la méthode précédente permet de modifier d'un coup toutes les balises de la page, elle n'a d'effet que sur une seule page. Or, puisque nous voulons que l'ensemble de notre site web soit cohérent, le même style doit être appliqué à toutes les pages. La meilleure méthode pour définir le style d'un site web est la suivante.

Toutes les indications de mise en forme (couleur, taille, position, etc.) est placée dans une feuille de style, c'est-à-dire dans un fichier séparé, portant l'extension .css ;
chaque page fait appel à cette feuille de style.

Le style est ainsi partagé entre toutes les pages du site web.

Téléchargez cette feuille de style, et placez-la dans le même dossier que le fichier alice.html.
Dans l'en-tête de votre fichier .html (à l'intérieur de la balise <head>), ajoutez la ligne suivante.
```
<link rel="stylesheet" href="alice.css" type="text/css"  media="screen">
```
Cette ligne signifie « La feuille de style à utiliser est contenue dans le fichier alice.css ».
Modifier la feuille de style (le fichier .css) pour que les titres <h2> soient affichés en bleu.

Sélecteurs

Théorie

Il existe trois manières de définir à quels éléments d'une page s'applique un style (pour le moment ; nous en verrons d'autres plus tard). Il peut s'appliquer :

à tous les éléments d'un type de balise donné ;
à tous les éléments d'une classe ;
à un éléméent en particulier.

Détaillons ces trois manières de faire.

Type de balise: Le fichier alice.css contient les lignes :
```
  h2 {
    color: blue;
  }
```
Ce style s'applique à toutes les balises <h2>.
Identifiant : La table des matières du fichier html est une liste dont la balise ouvrante est <ul id="toc">. Cela signifie que l'on attribue l'identifiant toc à cette liste, et uniquement à celle-là. Le code css suivant s'applique uniquement à cette balise.
```
  #toc {
    color: green;
  }
```
Classe : Enfin, plusieurs paragraphes (balises <p>) sont introduits avec <p class="citation">, ce qui affecte la classe citation à ce paragraphe. Le code css suivant s'applique à tous les éléments de la classe citation.
```
.citation {
  color: red;
}
```

Modification des styles existants

Sans modifier un seul caractère du fichier alice.html, modifiez la feuille de style css afin que :

la table des matières (#toc) ait une couleur d'arrière plan discrète ;
les titres <h1> soient en italique ;
les citations sont écrites en gris, avec une couleur d'arrière plan de votre choix.

Nouveaux style

En modifiant les fichiers html et css, modifier le style de la manière suivante.

Faites en sorte que le titre Alice au pays des merveilles de la phrase d'introduction apparaisse en gras (mais pas le nom de l'auteur), sans utiliser de balise <strong>.
Faites en sorte que les titres dans les balises <h2> soient écrits en gris clair (tout en restant lisibles).

Application à votre site web

Nous allons maintenant ajouter une feuille de style à votre site web.

Créez un fichier style.css (vide pour le moment), dans le même répertoire que les pages de votre site web.
Ajoutez la ligne nécessaire à chacune de vos pages .html pour inclure cette feuille de style.
Modifiez le style des balises <h1>, <h2>, etc. à votre guise (couleur, italique, gras, souligné, etc.).

Validation

Vérifiez que les trois pages de votre site web ne produisent aucune erreur sur http://validator.w3.org, et que le fichier style.css ne produit aucune erreur sur https://jigsaw.w3.org/css-validator/.

Évaluation

Complétez la fiche d'évaluation, copiez votre travail (fichiers alice.html, alice.css, les trois pages de votre site web, et la feuille de style) dans le dossier partagé, rendez-moi la fiche d'évaluation, et passez au TP suivant.

⚠️ Attention ! ⚠️