Cascading Style Sheet/Lier une feuille de style

Début de la boite de navigation du chapitre

fin de la boite de navigation du chapitre

Introduction

Utiliser les feuilles de style externes est la solution la plus recommandée et la plus souvent utilisée, elle permet de :

1. modifier des éléments de la présentation en quelques secondes ;
2. afficher plus rapidement les pages pour le visiteur, en effet il n'a pas besoin de télécharger à chaque fois le fichier css puisque celui-ci est mis en cache ;
3. proposer plusieurs design à l'utilisateur et changer de présentation en fonction du type de média (grand écran, écran mobile, impression...).

Les 3 méthodes

Avec la balise link

<link rel="stylesheet" type="text/css" media="screen" href="file.css"/>

Avec la règle @import

La règle @import est une nouveauté CSS2 qui permet d'importer une feuille CSS à l'intérieur d'une autre feuille ou d'un élément <style>.

<style type="text/css" media="screen">@import "file.css";</style>

On peut aussi indiquer le type de média associé à la feuille directement dans la règle, cependant cette syntaxe n’est pas comprise par IE7 et inférieur :

<style type="text/css">@import "file.css" screen;</style>

Avec l'instruction de traitement xml-stylesheet

Cette méthode fonctionne uniquement dans le cas où votre fichier est un document XML bien-formé et est destiné à être analysé par un parser XML. Les pages X.H.T.M.L. peuvent contenir cette instruction seulement si elles sont associées à un mime type application/xhtml+xml et non pas text/html.

<?xml-stylesheet type="text/css" media="screen" href="file.css" ?>

CSS Médiawiki

Sur les sites Médiawiki comme celui-ci, la page Mediawiki:Common.css permet une personnalisation CSS collective, et monobook.css une individuelle par profil.