Comment lier CSS externe à une page

Pour créer un lien d'une page HTML à une feuille externe de style en cascade (CSS), il suffit d'insérer une simple ligne de code dans la tête de votre page qui référence le nom et l'emplacement du fichier CSS externe par rapport au niveau de la racine du serveur sur lequel le Site réside.

La ligne de code pour le lien doit être placé quelque part entre l'ouverture et la fermeture Tags de chaque page HTML sur votre site que vous souhaitez être décorés avec elle.

Lorsque le nom du fichier CSS est entré correctement dans le fichier HTML en utilisant la syntaxe de lien correct, le code de liaison fournit des instructions pour le navigateur sur la façon dont les informations de style CSS devrait être interprété et appliqué à la page, qui à son tour détermine comment la page apparaît dans le navigateur.

Voici un exemple d'un lien vers un fichier CSS externe avec le nom du fichier main.css, où le fichier qui est en cours provient utilise le href attribut de la balise de lien, qui est une balise non fermée en HTML:

Lorsque le code de liaison est ajouté à une page XHTML, la balise doit être fermée en ajoutant un espace supplémentaire et une barre oblique avant la fin:

Les autres attributs dans la Outre le tag href sont nécessaires pour aider le navigateur à interpréter les données sur le fichier CSS liée:

  • La rel attribut définit la relation entre le document original et le fichier lié, et il identifie le fichier lié comme une feuille de style.

  • La type attribut spécifie le type de langage de style être utilisés dans le fichier lié, qui dans ce cas identifie que le fichier lié est écrit dans “ text / css ” le format.

Par souci de cohérence, essayez de placer le lien CSS dans vos pages web dans le même emplacement dans le code d'une page à. Par exemple, vous voudrez peut-être ajouter le tag de lien directement après la dernière balise meta, ou le placer juste au-dessus de la clôture tag. Être cohérent peut vous aider à trouver rapidement la balise doit jamais vous avez besoin de le modifier.

Outre la mise en place du lien dans les pages HTML qui utilisent le fichier CSS externe, vous devez également payer une certaine attention à l'endroit où le fichier (s) de CSS est situé par rapport aux autres fichiers contenus dans le site.

Le plus souvent, chaque site possède un seul fichier CSS, et que ce fichier se trouve au niveau de la racine, qui est juste une façon élégante de dire que le fichier CSS est dans le même emplacement que le index.html fichier, qui est la page d'accueil de votre site.

Le niveau de la racine se réfère au rez de chaussée de votre site, que ce soit une copie locale de votre site assis sur votre ordinateur en face de vous ou d'une copie du site situé sur le serveur hôte distant. Avec la plupart des sites, la page d'accueil se trouve au niveau de la racine avec un images dossier et tous les autres principales pages du site.

Pour les plus grands sites, certains concepteurs de créer des sous-dossiers au niveau de la racine pour loger d'autres choses comme des fichiers javascript externes et jQuery, fichiers CSS externes, scripts CGI, ou des groupes de pages qui tombent dans une catégorie similaire (par exemple, toutes les pages relatives à les produits ou services d'une entreprise).

Si votre site besoin de deux ou plusieurs feuilles de style en cascade (peut-être un pour toutes les pages et un deuxième pour une poignée de pages qui sera imprimé), il peut être avantageux pour vous de créer un dossier séparé appelé css au niveau de la racine du site et puis sauver ces fichiers CSS ensemble à l'intérieur.

Vous pouvez alors accéder à chaque CSS partir de cet emplacement, à condition que le href CSS de votre lien indique le nouvel emplacement du dossier avec le nom de fichier:

href ="css / main.css" rel = type "stylesheet" = "text / css">