HTML et CSS

HTML/CSS>
Feuilles de style (CSS) >
Styles en cascade

Styles en cascade

Jusqu'à présent nous avons défini les styles à l'intérieur de la balise ouvrante de l'élément concerné, grâce à l'attribut style. C'est une méthode qui fonctionne mais qui peut vite devenir fastidieuse, et rendre le code source touffu. De plus cela contrevient au principe de séparation du fond (le HTML) et du style, qui est à la base même de la notion de style. Nous allons donc découvrir d'autres méthodes qui justifient, dans l'appellation CSS, les feuilles et la cascade!
Alors, où mettre les définitions de style ?

On peut les placer dans le fichier source HTML, à l'intérieur d'un élément <style> .... </style>. Le ou les éléments style doivent en principe être placés dans l'en-tête du fichier HTML, entre <head> et </head>. S'il y a conflit entre plusieurs éléments styles, celui placé en dernier dans le fichier source l'emporte.

On peut également définir les styles dans un fichier CSS séparé, qui est une feuille de style à proprement parler. C'est un fichier texte d'extension css. Le ou les feuilles de style externes utilisées par une page HTML sont indiquées par leur URL. On utilise des éléments <link> sous la forme: <link rel=stylesheet type="text/css" href="mon_style.css"> (si le fichier style externe s'appelle mon_style et se trouve dans le même dossier que le fichier HTML)

Lorsque plusieurs définitions de style sont en contradiction pour un même élément c'est toujours le dernier qui a parlé qui a raison : le style défini par l'attribut style de l'élément l'emporte sur les autres, ensuite viennent les styles définis dans un élément style ou dans un fichier css (les derniers placés dans le fichier HTML l'emportant), ensuite les propriétés du style par défaut de l'élément. Et si vous modifiez le style d'une page affichée avec l'inspecteur de style, ou avec un script, le style modifié prend la priorité ! C'est le principe des styles en cascade.

Dans la pratique il est conseillé

  • d'appeler d'abord les feuilles de style externes, par ordre de priorité croissante le cas échéant, dans l'en-tête du fichier HTML
  • puis de faire les éventuelles déclarations locales avec un élément <style>, toujours dans l'en-tête
  • et enfin en cas de besoin d'utiliser l'attribut style des éléments.
La philosophie de la chose est que
  • les feuilles de style externes peuvent s'appliquer à toutes les pages d'un site et lui donner une identité
  • les blocs <style> internes permettent ensuite éventuellement d'adapter le style au contexte d'une page en particulier
  • et finalement l'attribut style permet d'affiner le style d'un élément particulier en cas de besoin.

 
Licence Creative Commons
licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé
Auteur : Nathalie Bonnin
Professeur de Physique, Chimie, Informatique au lycée La Martinière Monplaisir (Lyon 8ème)
Contact :
nathalie.bonnin (chez) scientillula.net
Licence Creative Commons
La totalité du contenu du site Scientillula.net appartient à Nathalie Bonnin et est mise à disposition selon les termes de la licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé