Première étape : Création du fichier de style

Le fichier de définition de style de la page Web est un fichier indépendant du fichier HTML. Il va falloir créer un nouveau fichier dont l'extension sera .CSS (Cascading Style Sheet). Créer un fichier style.css au même endroit que vos autres fichiers comme ceci :

Un nouveau fichier s'ajoute à votre répertoire de travail et se met en surbrillance.

On donnera le nom style.css à celui ci

Lorsque vous faites cela, vous avez un message comme suit :

Cliquez sur Oui



Deuxième étape : Styliser le texte

Après avoir ouvert le fichier dans notepad++


Dans le fichier CSS, on va :

  • changer la taille du texte, avec le titre <h1> en 30 px (ligne 2) et le reste du texte <p> en 16px (ligne 7)
  • définir la police par défaut (ligne 8)
  • définir la couleur du texte, ici un gris foncé (ligne 9)
  • centrer le titre <h1> (ligne 3)



Copier ce contenu puis le copier dans le contenu du fichier style.css


h1{

font-size: 30px;

text-align: center;

color: #FF9696

}

body{

font-size: 16px;

font-family: Helvetica, sans-serif;

color: #242424;

}



Troisième étape : ajouter la référence vers le style.css à partir du fichier ma_page.html


Pour l'instant, il n'y a pas de lien entre la page HTML et le fichier CSS. On va donc ajouter à l'aide de cet ajout dans le fichier ma_page.html :

Dans la balise <head>, on va ajouter le lien vers le fichier feuille de style "style.css"

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



Vous retrouvez ceci dans notepad++ :

Explications de la balise link :

rel en rouge est un attribut qui indique la relation qui existe entre le document et la ressource lié.

href cet attribut définit l'URL de la ressource liée. On verra ce qu'est une URL dans la section 4 - Décrypter la navigation URL.

Pour informations, il existe d'autres attributs mais nous n'en avons pas l'utilité pour cette activité.


Vous devriez avoir ce rendu :

Sans la feuille de style :


Avec la feuille de style activé :



Quatrième étape : Changer la couleur de l'arrière plan


Avec les feuilles de style, on peut changer beaucoup de chose. Ajoutez cette ligne dans la feuille de style css :


     background-color: #FF9696;


Attention, il faut l'ajouter entre 

body {

       instructions1

       instructions2

background-color: #FF9696;

etc..

}

Créé avec HelpNDoc Personal Edition: Obtenez des résultats de documentation professionnels avec un outil de création d'aide