Langage CSS - feuilles de styles externes ( centraisés ) /21

Feuille de styles centralisés sur fichier externe

Les styles centralisés du CSS sont placés dans un fichier séparé qui porte l'extension .css et contient toutes les règles du CSS utilisées dans votre site ou du moins celles que vous souhaitez. Jusqu'à maintenant vous avez utilisé le langage css à l'aide des règles appliquées au coup par coup ou encore les styles prédéfinies dans l'en-tête entre les HEAD. C'est souvent lourd et source d'erreurs.

Il reste donc à aborder la troisième solution, brièvement expliquée en page 4 de ce dossier, qui consiste à appliquer le concept des styles centralisés ou encore appelé concept des feuilles de styles externes. Pour mémoire "Méthode linking".

Nota important : Entre les deux Head d'une page rattachée à un fichier externe, peuvent se trouver des règles de type "méthode interne", et en cas de conflit souvenez-vous que ces dernières sont prioritaires.

Code à placer entre les deux HEAD

<link rel="stylesheet" type="text/css" href="lesstyles.css">

- link = lien
- rel = relation (lien en relation)
- type = type de fichier (format texte et pour du code css)
- href = cible la page des liens externes (n'oubliez pas les guillemets).

Code dans fichier externe

Copiez intégralement sur une feuille par exemplele "bloc-notes Windows" (simple-text sur Mac) le texte suivant et enregistrez-le sous le nom de : tutorial.css

Ce fichier est ensuite placé soit à la racine du répertoire ou encore dans le dossier que vous avez ouvert avec tous les fichiers qui sont traités en CSS. (le nom donné à ce fichier est arbitraire, mais soyez courts et toujours l'extension " .css " .

/* code affecté a partir de cette page 21*/

body

{font-family: arial, verdana, trebuchet MS, sans-serif ;
color: black ;
font-size: 10pt ;
text-align: justify ;
background-color: #FFFFFF ; }

h3 { color: red ; font-size: 120% ; }

h4{ color: blue ; }

h5 {color: red ; font-size: 110% ; }

Un dernier mot avant de se lancer, pour préciser que le commentaire du HTML qui est :  , existe pour le CSS sous la forme suivante déjà expliquée page 5a :

/* commentaire spécial pour CSS, entre ces deux codes */

Mais rien ne vous empêche dans une page, d'appliquer un style non prévu dans la feuille de liens externes. Vous bénéficiez alors de la règle de priorité existante dans ce langage css à découvrir page suivante.

Sommaire CSS... @ ... Ordre de priorité des styles