Où écrire le code CSS ?

Avant d’étudier les mécanismes du CSS en soi, il convient de comprendre où placer le code CSS afin qu’il s’applique bien à un fichier HTML.

En effet, lorsqu’on code, pensez bien que rien n’est jamais « magique » et qu’au contraire tout le code qu’on va pouvoir écrire repose sur des règles et des mécanismes. Comprendre ces règles et ces mécanismes et notamment comment différents langages de programmation vont pouvoir fonctionner ensemble est certainement l’une des choses les plus complexes lorsqu’on est débutant.

Pour cela, je pense qu’il ne faut pas essayer de tout comprendre tout de suite : c’est tout à fait normal s’il y a des mécanismes dont vous ne comprenez pas tous les rouages immédiatement. Avec un peu de temps, de la pratique et de nouvelles connaissances sur la programmation les choses pas claires au début devraient devenir de plus en plus évidentes.

Dans le cas présent, nous avons notre code HTML d’un côté et nous aimerions lui appliquer des styles en CSS. Cependant, il va falloir d’une manière ou d’une autre « lier » notre code CSS à notre code HTML afin que les éléments de nos pages HTML tiennent bien compte des styles qu’on a voulu leur appliquer en CSS.

Pour faire cela, nous allons pouvoir écrire le code CSS à trois endroits différents. Chaque méthode va présenter des avantages et des inconvénients selon une situation donnée et c’est le sujet que nous allons aborder dans cette leçon.

 

Méthode n°1 : écrire le CSS au sein du fichier HTML, dans un élément style

La première façon d’écrire du code CSS va être à l’intérieur même de notre page HTML, au sein d’un élément style.

En plaçant le CSS de cette façon, le code CSS ne s’appliquera qu’aux éléments de la page HTML dans laquelle il a été écrit.

Cette première méthode d’écriture du CSS n’est pas recommandée, pour des raisons de maintenance et d’organisation du code en général. Cependant, elle peut s’avérer utile pour modifier rapidement les styles d’une page HTML ou si vous n’avez pas facilement accès aux fichiers de style de votre site.
Nous voyons donc cette première méthode à titre d’exemple, afin que vous sachiez l’identifier si un jour vous voyez du code CSS écrit de cette façon dans un fichier et que vous puissiez l’utiliser si vous n’avez pas d’autre choix.

Nous allons devoir ici placer notre élément style au sein de l’élément head de notre fichier HTML. Voici comment on va écrire cela en pratique :

Ici, nous créons un fichier HTML tout à fait classique contenant un titre h1 et deux paragraphes.

Nous voulons ensuite rajouter des styles à notre page. Pour cela, nous plaçons un élément style dans l’élément head de notre page. Nous allons déclarer nos styles CSS au sein de cet élément.

Dans mon code CSS, je commence par cibler l’élément body avec le sélecteur élément du même nom et je définis une couleur de fond (background-color) orange pour cet élément. Comme l’élément body représente toute la partie visible de ma page, le fond de la page entière sera orange.

Ensuite, je définis également une couleur bleue pour le texte de mes paragraphes ainsi qu’une taille de police d’écriture de 16px.

Voici le résultat obtenu :

See the Pen Cours HTML CSS 3.2.1 by Pierre (@pierregiraud) on CodePen.

 

Méthode n°2 : déclarer le CSS au sein du fichier HTML, dans des attributs style

Nous pouvons également écrire notre code CSS au sein d’attributs style qu’on va ajouter à l’intérieur de la balise ouvrante des éléments HTML pour lesquels on souhaite modifier les styles.

Nous allons passer en valeurs des attributs style des déclarations CSS pour modifier certains styles précis de l’élément HTML en question. En effet, en utilisant cette méthode, les styles déclarés dans un attribut style ne vont s’appliquer qu’à l’élément dans lequel ils sont écrits, et c’est la raison pour laquelle nous n’allons pas avoir besoin de préciser de sélecteur ici.

Attention à ne pas confondre les attributs style qu’on va devoir placer au sein de la balise ouvrante de chaque élément dont on souhaite modifier les styles avec l’élément style qu’on va placer dans l’élément head de nos fichiers HTML.

Dans l’exemple ci-dessous, on applique à nouveau une couleur de fond orange à notre élément body ainsi qu’une couleur bleue et une taille de 20px au texte de notre premier paragraphe uniquement :

See the Pen Cours HTML CSS 3.2.2 by Pierre (@pierregiraud) on CodePen.

Cette deuxième méthode d’écriture du CSS, bien qu’elle puisse sembler pratique à priori puisqu’elle permet de n’appliquer des styles qu’à un élément en particulier plutôt qu’à tous les éléments d’un même type n’est également pas recommandée et est à éviter tant que possible pour des raisons de maintenabilité et de performance du code.

En effet, déclarer nos styles comme cela n’est vraiment pas efficient puisque cela va demander énormément d’écriture et également énormément de temps de réécriture le jour où l’on souhaite modifier des styles.

Pas d’inquiétude : nous allons apprendre à cibler précisément un élément ou un groupe d’éléments en particulier pour leur appliquer des styles personnalisés plus tard dans ce cours.

 

Méthode n°3 : écrire le CSS dans un fichier séparé

Finalement, nous pouvons écrire notre code CSS dans un fichier séparé portant l’extension « .css ». C’est la méthode recommandée, qui sera utilisée autant que possible.

Cette méthode comporte de nombreux avantages, notamment une meilleure maintenabilité du code grâce à la séparation des différents langages, ainsi qu’une meilleure lisibilité.

Cependant, le plus gros avantage de cette méthode est qu’on va pouvoir appliquer des styles à plusieurs pages HTML en même temps, d’un seul coup.

En effet, en utilisant l’une des deux premières méthodes, nous aurions été obligés de réécrire tout notre code CSS pour chaque page HTML (ou même pour chaque élément !) composant notre site puisque les codes CSS étaient déclarés dans une page ou dans un élément spécifique et ne pouvaient donc s’appliquer qu’à la page ou qu’à l’élément dans lesquels ils étaient déclarés.

De plus, en cas de modification, il aurait également fallu modifier chacune de nos pages à la main, ce qui n’est pas viable pour un site de taille moyenne qui va être composé de quelques centaines de pages.

En déclarant notre code CSS dans un fichier séparé, au contraire, nous allons pouvoir utiliser le code de ce fichier CSS dans autant de fichiers HTML qu’on le souhaite, en indiquant aux différents fichiers HTML qu’ils doivent appliquer les styles contenus dans ce fichier CSS. Ainsi, lorsque nous voudrons modifier par exemple la couleur de tous les paragraphes de nos pages HTML nous n’aurons qu’à modifier la déclaration relative dans le fichier CSS.

Voyons immédiatement comment mettre cela en place en pratique. Pour cela, nous allons commencer par créer un nouveau fichier dans notre éditeur qu’on va appeler cours.css. Nous allons enregistrer ce fichier et le placer dans le même dossier que notre page HTML pour plus de simplicité.

Nous travaillons donc dorénavant avec deux fichiers : un fichier appelé cours.html et un fichier cours.css.

Il va donc maintenant falloir « lier » notre fichier HTML à notre fichier CSS pour indiquer au navigateur qu’il doit appliquer les styles contenus dans le fichier cours.css à notre fichier cours.html.

Pour cela, nous allons utiliser un nouvel élément HTML : l’élément link (« lien », en français). On va placer l’élément link au sein de l’élément headde notre fichier HTML. Cet élément se présente sous la forme d’une balise orpheline et va avoir besoin de deux attributs pour fonctionner correctement :

• Un attribut rel qui va nous servir à préciser le type de ressource que l’on souhaite lier à notre fichier HTML. Dans notre cas, nous indiquerons la valeur stylesheet pour « feuille de style » ;
• Un attribut href qui va indiquer l’adresse relative de la ressource que l’on souhaite lier par rapport à l’emplacement de notre fichier HTML. Ici, comme nous avons enregistré nos deux fichiers dans le même dossier, il suffira d’indiquer le nom de notre fichier CSS en valeur de href.

Nos deux fichiers sont maintenant liés et les styles déclarés dans notre fichier CSS vont bien être appliqués aux éléments de notre page HTML.

See the Pen Cours HTML CSS 3.2.3 by Pierre (@pierregiraud) on CodePen.