– Les feuilles de style en HTML –

 

Vous en avez marre de faire des pages toute dégueus en web? Alors il vous faut absolument faire du CSS. Le CSS c’est la vie… et c’est bien un peu la merde aussi. Pourquoi? Parce que c’est (encore) un langage à part qu’il faut maîtriser.

Bon rassurez-vous, c’est tout bête, et en plus on verra à la fin qu’il existe des frameworks qui font tout pour vous (ou presque).

Déjà que veut dire CSS? Ca veut dire Cascade Style Sheet (ou feuille de style en cascade en bon français). Leur objectif est d’appliquer une couche de style à vos pages, à l’intérieur d’un site web. Leur gros avantage est qu’elles permettent de modifier toutes les pages de votre site potentiellement en une seule action.

3 façons de procéder pour ajouter du style à vos pages

La première méthode est d’ajouter le CSS directement à l’intérieur de votre code HTML, en ajoutant un paramètre style à l’intérieur de vos balises.

<p style= »font-size:16px »>…</p>

 

La deuxième méthode est de l’intégrer à la balise <head> de votre page.

<head>
        <style>
                p { font-size:16px;}
        </style>
</head>

 

Enfin la dernière méthode est de créer un fichier spécifique dédié exclusivement au style, portant l’extension .css. Toutes les pages qui voudront utiliser ce code devront l’appeler dans la balise <head>

<head>

        <link href= »style.css » rel= »stylesheet » type= »text/css »>

</head>

 

Mais alors quelle méthode choisir?

Et bien, pour le coup ce n’est pas très difficile de choisir.

Si on regarde dans le détail les 3 méthodes, la première porte un énorme inconvénient. Si on a dans une page 5 éléments à mettre en forme, il faudra entrer 5 fois le paramètre. De la même manière, si on décide de changer par exemple une couleur générale, il faudra le faire pour chaque élément qu’on veut modifier… pas top.

La deuxième méthode est un peu mieux. Elle peut permettre de modifier le style de plusieurs éléments au sein d’une même page. Bon par contre, imaginons deux secondes. On développe un site web. Sur ce site, on a 50 pages. Sur chacune de ces pages on a une couleur de fond violette. Après de multiples fractures de la rétine, on se dit que finalement, une couleur gris clair c’est pas si mal. Et bien on devra modifier ce style sur nos 50 pages, ce qui risque de prendre un pe de temps aussi.

Bref, les 2 premières méthodes peuvent être utilisées dans le cas où on veut attribuer un style à un élément particulier, mais de manière ponctuelle.

La troisième méthode permet de répondre rapidement à notre envie de changement de couleur de fond en une seule étape. Il faut uniquement modifier un élément dans notre fichier CSS, et le tour sera joué pour toutes nos pages. Pratique non?

Dans la suite de ce chapitre, je vais travailler comme si j’utilisais uniquement la troisième méthode.