Bienvenue à ce nouveau cour 
.Nous avons vu ensemble dans le tuto précédant comment ajouter du CSS interne dans l’entête HTML. Dans ce tuto , nous allons voir comment ajouter des feuilles de style externes.
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.
Exemple
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.
démo
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 style.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é index.html et un fichier style.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 style.css à notre fichier index.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
relqui va nous servir à préciser le type de ressource que l’on souhaite lier à notre fichier HTML. Dans notre cas, nous indiquerons la valeurstylesheetpour « feuille de style » ; - Un attribut
hrefqui 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 dehref.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>integrer css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>CSS : feuille de style en cascade</h2>
<p>
Permettent de générer la présentation d’une page HTML : séparer la structure (HTML) de sa présentation (CSS)
</p>
</body>
</html>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.
body{
background-color: green;}
p{
color: white ;
font-size: 20px; }
Avantages :
–Séparation totale de la structure et de la présentation : possibilité d’avoir des présentations alternatives
–Possibilité d’appliquer la même feuille de style sur plusieurs pages (donc le site en entier) sans devoir la dupliquer
–Cohérence de la présentation sur tout le site et les pages futures.
Dans cette partie , nous avons appris comment ajouter des feuilles de style externes.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons ajouter des feuilles de style externes.