Code

Page exemple

Où écrire le CSS ?

Le schéma suivant présente où l'on peut écrire des règles css :

Méthode 1 - définir les styles dans le corps du code HTML

Historiquement, il s'agit de la méthode disponible lors de la création de HTML.

Avantages Inconvénients
  1. Facile à mettre en place
  2. Facile à trouver
  3. Etre certain que le style défini ne sera utilisé à aucun autre endroit ni sur aucune autre de vos pages
  4. Tout (mise en forme + contenu) est stocké dans le même fichier (=aucune dépendance)
  1. Vos styles étant définis à l'intérieur même de votre contenu, ils étaient fastidieux à définir ;
  2. Vous deviez répéter la même définition de style à chaque fois que vous souhaitiez l'utiliser dans votre page où dans les diverses pages de votre site ;
  3. A chaque fois que vous souhaitiez modifier ce style, vous deviez reparcourir le contenu de toutes vos pages pour mettre à jour, une par une, les diverses définitions qu'elles contenaient ;
  4. Ces répétitions augmentaient la taille de vos pages ;
  5. Vos styles étaient figés, les contenus se présentaient de la même façon pour tous les usages possibles : écran, imprimante, PDA, lecteurs vocaux, etc..

Méthode 2 - définir les styles l'en-tête de la page

Avantages Inconvénients
  1. vous n'avez besoin de définir votre style qu'une seule fois dans l'entête
  2. Facile à mettre en place
  3. Ajouter des règles css spécifiques pour certaines pages (=qui ne seront pas chargées inutilement dans des pages qui ne sont pas concernées)
  4. Tout (mise en forme + contenu) est stocké dans le même fichier (=aucune dépendance)
  1. Vous deviez répéter le block style dans les diverses pages de votre site ;
  2. A chaque fois que vous souhaitiez modifier un style, vous deviez modifier le contenu dans tous les en-tête de vos pages si vous souhaitez avec un style homogène ;
  3. Augmente la taille de vos pages s'il y a de nombreuses règles;
  4. Vos styles étaient figés, les contenus se présentaient de la même façon pour tous les usages possibles : écran, imprimante, PDA, lecteurs vocaux, etc..
  5. Peut être fastidieux de trouver quelle(s) règle(s) de style s'applique à quel élément html

Méthode 3 - définir une feuille de style totalement séparée du code HTML

Avantages Inconvénients
  1. Définir vos styles qu'une seule fois pour toutes les pages du site (optimal pour la maintenance / modification)
  2. La réduction de la taille des pages : Les définitions de style ne sont faites qu'une seule fois, même si elles sont utilisées plusieurs fois
  3. définir plusieurs feuilles de styles pour le même contenu et de basculer d'une feuille à l'autre en fonction du support sur lequel le contenu est affiché (écran PC,écran smartphone, écran tablette, imprimante, etc.)
  4. Cette feuille de style sera gardée en mémoire par le navigateur et n'aura pas besoin d'être rechargée lors de la lecture des pages suivantes
  5. simplifie le codage car il y a séparation du contenu de la mise en forme
  1. Il faut créer un voire plusieurs fichier(s) .css
  2. la page html devient dépendante du ou des fichier(s) css au niveau de sa mise en forme
  3. travailler sur plusieurs fichiers en même temps
  4. Impossible d'ajouter des règles css spécifiques pour certaines pages, (= toutes les règles seront chargées, même celles inutiles dans des pages qui ne sont pas concernées) aussi appelé code mort
  5. Peut être fastidieux de trouver quelle(s) règle(s) de style s'applique à quel élément html