Si vous lisez cette page sans tout comprendre, pas grave vu qu'il s'agit d'une présentation des styles centralisés du CSS qui sera exploitée ultérieurement. Dès la page suivante vous retrouvez suivant ma méthode le traditionnel "pas à pas".
C - Méthode externe = (Linking)
C'est-à-dire un fichier séparé qui portera l'extension class="titreB" .css et contiendra toutes les règles du CSS que vous avez choisi de définir et utilisées dans votre site (du moins sur les pages portant le code approprié de liaison), sachant aussi que les tags HTML suivants ne pouvent être utilisés :
html - head - title - meta - script - base - basefont
Ensuite dans chaque page où vous souhaitez en profiter, entre les tags <HEAD> et </HEAD> placer une simple ligne de code qui servira d'appel (trait d'union) et dont voici le modèle :
Utiliser la valeur d'une sélecteur contenu dans le fichier vert.css a pour effet de répercuter les effets de sa définition sur les pages qui contiennent cet élément, avec toujours priorité au CSS sur le HTML qui pourrait se trouver en place.
- rel="stylesheet" lui indique qu'il trouve une feuille de style externe.
- L'attribut type="text/css" précise qu'il s'agir de texte et du genre CSS (Cascading Style Sheets).
- L'attribut de lien href=" ..... " donne le chemin d'accès et le nom du fichier qui contient les règlesà appliquer.
Il est facile de comprendre que le "style à la volée" ("mise en forme rapide") ne peut être retenu pour tout un site, pas plus d'ailleurs qu'un "style interne" reproduit chaque page. Bien sûr c'est possible mais on s'éloigne alors du véritable CSS tel qu'il a été conçu et c'est un peu comme rouler sans arrêt en seconde avec une voiture.
Code source dans HEAD
<LINK REL="stylesheet" TYPE="text/css" HREF="essai04.css">
Ci-après vous trouvez le détail du fichier "essai04.css" placée pour cet exemple dans le dossier "css" du répertoire. Vous devez impérativement le créer sur une feuille blanche (à l'exclusion de tout logiciel éditeur HTML) comme par exemple le "bloc-notes" ou Wordpad.
Fichier externe "essai04.css"
/* code appliqué sur ce fichier css04.htm*/
h3
{
font-family: arial, verdana, sans-serif ;
font-size: 14pt ; color: red ;
background-color: #FFFFFF ;
}
h6
{
font-family: arial, verdana, sans-serif ;
font-size: 10pt ; color: green ;
background-color: #FFFFFF ;
}
Remarquez surtout que les règles sont présentées sans aucun code d'introduction, avec possibilité de placer un commentaire souvent fort utile (sera vu plus loin) et l'utilisation de la propriété "font-family" où les valeurs sont séparées par une simple virgule, arial étant proposé en premier et si le visiteur ne possède pas cette police, alors arial est sollicité... le nombre des polices est à la discrétion du webmaster mais en placer trois semble suffisant.
Codes source dans BODY
<h3 align="center">Ici H3 est le sélecteur HTML de ce paragraphe de texte </h3>
<h6>Ici H6 est le sélecteur de ce paragraphe en vert : Enfin un gain de poids non négligeable est souvent obtenu par ce langage, bien que le détail du contenu soit aussi un élément qui va plus ou moins modifier ce gain. </h6>
Résultats de ces exemples
Ici H3 est le sélecteur HTML de ce paragraphe de texte
Ici H6 est le sélecteur de ce paragraphe en vert : Enfin un gain de poids non négligeable est souvent obtenu par ce langage, bien que le détail du contenu soit aussi un élément qui va plus ou moins modifier ce gain.
Remarque
Il s'agit d'une démonstration de base simpliste pour découvrir comment les feuilles de style cohabitent avec les tags HTML et vous devriez réaliser un essai sur votre ordinateur avec les codes donnés dans cette page et ensuite les modifier pour visualiser les différences et résultats obtenus. Pour cet exemple le fichier "essai04.css" se trouve dans le même dossier du répertoire du site que les fichiers qui font appel à lui. Sinon vous devez utiliser une adresse HREF absolue du genre "http://www.aidenet.com/css/essai04.js".
- Opérer par exemple une modification dans le fichier "essai.css" se répercutera aussitôt sur toutes les pages concernées du site lui faisant référence.
- L'affichage reste identique pour chaque visiteur, quelle que soit la configuration en taille et en couleurs de son navigateur (s'il a coché ses paramètres correctement (!!) en acceptant les valeurs proposées dans le contenu des fichiers, sinon il devra se contenter des valeurs par défaut de son navigateur, et je dirai "dommage".)
- Vous obtiendrez souvent un gain de poids non négligeable, bien que le détail du contenu soit aussi un élément majeur qui va plus ou moins modifier ce gain (votre page contient beaucoup d'images et peu de texte, ou vice-versa.)
- Enfin le risque d'erreurs lors des modifications est réduit presque à zéro.
Soyons d'accord, il ne sera souvent utilisé que la "Méthode interne" ou du "style à la volée" consistant à placer du CSS dans l'en-tête du code source ou encore auprès du mot ou ensemble à traiter, pour les besoins des démonstrations c'est évident. OK !
