2 - Création d'un fichier indépendant de mise en page CSS

CoursLa mise en forme - Le CSS

 

Difficulté : Moyen
Temps requis : 30 minutes à 3 jours
Application(s) et fichier(s) requis : Notepad de Windows (ou "Sublim Text" shareware)

Avant de commencer, nous allons voir si vous vous rappelez des bases du sytème informatique de votre poste de travail (ordinateur).

 

2.1 - La mise en forme et le CSS, qu'est-ce donc ?:

Avant de rentrer dans le vif du sujet, nous allons voir et revoir quelleques balises de mise en forme en html.

Vous vous souvenez de <p>, <br />, <strong> et ... <h1>. Il s'agit de balises communes dans le html pour créer une mise en page basique.

Pour la balise <h ...>, c'est un peu particulier. Il s'agit en avec de mettre en évidence un titre, sous-titre, sous-sous-titre. En voici une rpeprésentation simple :

<h1>Mon titre principal</h1>
<h2>Mon sous-titre</h2>
<p>Mon texte dans un paragraphe qui, ensuite part<br />
à la ligne.</p>

Suivant le chiffre qui suit le h, vous avez une hiérarchie d'importance qui va de 1 (Très important) à 6 (important mais moins que les autres).
Pour ceux qui utilisent une application de bureautique, vous retrouvez cette hiérachie dans la mise en forme d'un texte.

Maintenant, nous allons voir le CSS et tout d'abord sa définition.

Le CSS (Cascading Style Sheet) ou feuille de style en cascade se présente soit sous forme de fichier appeler et lu par une ligne dans votre code html ou ... directement intégré dans votre page html.
Le style, c'est le  ... style, le formatage.
La cascade, ce n'est pas Niagara mais concerne le média (l'appareil qui visualise la page web), le document ou une autre feuille de style.
Le sheet, c'est la feuille ...

Nous allons utiliser la première solution, le fichier indépendant car la règle veut que le style soit indépendant du code html. Cette règle permet de pouvoir faire "travailler" plusieurs intervenants sur une page sans en modifier sa forme.
Le CSS indépendant permet d'appliquer le style, la mise en forme à plusieurs documents sans besoin de retaper ou faire du copier/coller à chaque nouvelle page web.

Reprenons notre fichier html du départ, soit "index.html".
Dans un premier temps, nous allons créer notre fichier CSS et puis dire à index d'aller le lire et de suivre ses directives.

 

2.2 - Le fichier CSS et formatage de la page

Le fichier css est un fichier texte donc il s'écrit à l'aide d'un éditeur de texte simple comme "Notepad".

Bon, accrochez-vous car il va y avoir beaucoup de choses a assimiler dans cette partie.

Voici un petit exemple de fichier CSS.

Nous venons d'indiquer que la balise "h4" de notre ou nos pages html doit avoir la couleur rouge en héxadécimal !
Haaa ! des maths. Oui le code d'un site web, c'est des maths et de la physique (quantique sémantique) !

Pour tout vous dire, vous n'allez pas devenir, ici des "Dieux" du CSS mais juste apprendre les bases pour réaliser une belle page web. Ceci étant dit, au travail.

Ce code barbare "hexa" commence par un "#" (Alt Gr + 3 de votre clavier). Ensuite, il est formé de lettres et/ou de chiffres qui indiquent la proportion du mélange des couleurs.
#ffffff est la couleur blanche - #000000 est la couleur noire.
Les 2 premiers correspondent à la luminosité du rouge, les 2 suivants à la luminosité du vert et les 2 derniers à la luminosité bleu (ex : avec une intensité maximale sur le rouge on a #FF0000)...

Un truc pour vous simplifier la recherche des codes couleurs : 
- Soit installer le plugin "Colorzilla" pour votre navigateur
- Soit trouver un générateur de code héxa sur le web
- Soit utiliser le nom de la couleur en anglais

Je conseille "colorzilla", c'est vraiment très pratique.

Ce qui vient d'être écrit doit être mis dans un fichier qui porte le joli nom de "style.css" et se loger dans le dossier préalablement créé "css".

Mainteant que votre fichier existe dans le dossier, nous allons indiquer à votre page html d'aller le chercher. Voici la ligne à ajouter entre <head> et </head> :

Nous indiquons qu'il existe un lien vers une feuille de style qui s'appelle style.css dans le dossier partant de la racine du site appelé css et qu'il s'agit d'un format texte css .... ouf, c'est fini !
Cette ligne s'écrit toujours ainsi. Il y a juste le chemin d'accès au fichier "style.css" qui change. Le fait de mettre "../" indique que l'on revient à la racine du site web. A titre d'exemple si j'avais une page "contact.html" située dans le dossier "pages" de mon arborescence, il faudrait écrire ... pareil puisque le dossier css est situé à la racine de mon site.

C'est tout, pour ce soir. Essayez de faire un fichier css et de le raccrocher à "index.html".