Il y a 3 manières de joindre une feuille de style CSS à un document (X)HTML:

1. Appeler la feuille de style avec la balise
2. Appeler la feuille de style avec la règle @IMPORT
3. Insérer la feuille de style à même le document

Avec les méthodes 1) et 2), la feuille de style est dans un autre fichier et demeure en dehors du document (X)HTML. Ce qui répond mieux au principe de séparation entre structure, présentation et comportement. Avec la méthode 3) la feuille de style est insérée à même le document (X)HTML.

Ces méthodes fonctionnent avec tous les DOCTYPE HTML 4.01, XHTML 1.0 et XHTML 1.1.

Note 1: en XHTML 1.1 l’attribut style est déprécié (http://www.w3.org/TR/xhtml11/doctype.html#s_doctype).

Note 2: le mot-clé IMPORT n’est pas sensible à la case.

Balise LINK

On peut insérer une feuille CSS à l’aide de la balise link en HTML et XHTML.

HTML:  
XHTML: 

La balise link doit être à l’intérieur de la balise

Instruction @IMPORT

Dans un bloc, on peut insérer pour dans les premières lignes le code @import.

 @import 'fichier.css'; 

On peut aussi l’utiliser directement au début de nos fichiers .css.

Note: L’instruction « @import » n’est pas supporté par Netscape 4.

Balise STYLE

Les règles CSS sont insérées à même le document (X)HTML. Plus précisément: entre les balises , elles-mêmes situées entre .

(X)HTML: 
      
         
           
         
      

Note: le bloc CDATA permet l’insertion de caractères comme et & à l’intérieur de section bien définie d’un document. Par contre, certains navigateurs ne reconnaissent pas le bloc CDATA et peuvent même afficher la balise. Il est conseillé de l’enlever ou mettre le script en commentaire en HTML. L’ajout de commentaires HTML dans les balises style et script remonte au temps où les anciens navigateurs comme Mosaic affichaient le code CSS ou Javascript dans la page.

Liens

 * Instruction @import en CSS2 (http://www.yoyodesign.org/doc/w3c/css2/cascade.html#at-import) * Base CSS par Yan Morin (http://yansanmo.no-ip.org:8080/a/basecss)

À rajouter

 * Insertion selon le média.
 * Insertion des feuilles de style alternatives

 * Doit-on parler des feuilles de style définit par l'utilisateur dans son navigateur?