Feuilles de style
CSS
Cascading Style Sheets

Vous avez dit : "Feuilles de style" ?


La traduction littérale de CCS serait "feuilles de style cascadables", ce qui, au premier abord, ne signifie pas grand chose . Nous laisserons le soin au lecteur d'évaluer le degré de signifiance de cette qualification lorsqu'il saura de quoi il retourne.

D'après l'organisme mondialement chargé de la standardisation pour tout ce qui touche la toile (web), le célèbre WWWC ou W3C : Worl Wide Web Consortium : http://www.w3.org , les feuilles de style cascadantes sont ( je cite et traduis ) un mécanisme simple pour enrichir les documents web avec des styles (c.a.d. polices de caractères, couleurs, espacements, positionnements).

Mais les balises HTML classiques, notamment celles concernant les styles : <FONT FACE= etc..> n'ont pas d'autre fonction. Alors ?
En réalité, les CSS sont une méthode d'enrichissement du code HTML en le remplaçant progressivement par un autre système de balises plus souple.

Non seulement les styles accessibles seront plus nombreux, mais ils sont moins lourds à programmer.
En effet, en HTML, comme d'ailleurs sous CSS, les déclarations de style sont généralement de longues chaînes de caractères consommatrices de temps de programmation et propices à l'erreur. La différence est que, en HTML, il faut réécrire ces déclarations chaque fois à l'endroit où on veut qu'elles s'appliquent. Dans la technique des CSS elles ne sont déclarées qu'une fois,; soit dans le conteneur <HEAD>..</HEAD>, soit dans un fichier séparé commune à toutes les pages du site.
L'avantage est qu'en CSS, les appels à des changements de style se réduisent à des simples balises ou de courts identificateurs rappelant automatiquement ceux décrits une seule fois dans l'en tête ou dans la feuille de styles commune.

Le fait de déclarer les styles dans une feuille séparée à laquelle toutes les pages du site feront référence, permet de modifier très rapidement et en bloc les styles de l'ensemble du site. Cela justifie le nom de "feuilles de style".
Quant à "cascadables", ce mot ferait allusion à ce que les styles définis dans ladite page, sont reportés de place en place dans le texte aux endroits où ces styles sont appelés par un bref symbole.

Pourquoi doit-on passer le plus rapidement possible aux CCS ?

  1. Par ce que certaines balises telles que "FONT" sont obsolètes : elles ont désormais une durée de vie limitée. Elles sont en effet en attente sur une liste de suppression de la part de l'organisme international de standardisation pour le Web W3C :
  2. Par ce que ces nouvelles techniques offent des fonctionnalités plus variées et plus souples.
  3. Par ce que l'écriture du code en est considérablement simplifiée.
  4. Par ce que l'écriture des styles en vigueur dans toutes les pages du site est centralisée sur un ou quelques fichiers, rendant particulièrement aisée et immédiate toute modification de l'ensemble du site
Le standard CSS est défini en http://www.w3.org/Style/CSS

 

FEUILLES DE STYLE INTERNES ou EXTERNES


Une "feuille de styles" est un bloc de déclarations de styles :

  • si ce bloc se trouve dans une page HTML utilisant ces styles, on l'appelle "feuille de styles interne.
  • une feuille de styles externe" est un fichier indépendant contenant un ensemble de déclarations de styles utilisables par plusieurs pages HTML.

Dans de nombreux exemples, nous utiliserons des "feuilles de styles internes" car on fait mieux le rapprochement à l'écran entre les déclarations de styles et les appels de ces styles.

Professionnellement on a toujours recours à des feuilles de styles externes qui rendent plus aisée la mise à jour en bloc de tout le site.

 

LE MECANISME CCS


Une feuille de style est composée de règles (rules) appelées aussi directives.

Chaque règle est constituée :

  • d'un sélecteur (correspondant d'une balise de conteneur en HTML)
  • et d'une suite de déclarations entre accolades séparées par des points-virgule, (correspondant des paramètres d'une balise HTML).
  • chaque déclaration est composée d'un couple d'éléments propriété:valeur séparés par deux points.

Exemple de règle :

H1{font-family : arial ; font-size : 14pt ; font-weight : bold ; color : red }

  • H1 est ici le sélecteur
  • font-family : arial est l'une des déclarations
  • font-family est une propriété comme font-size, font-weight, color, etc.
  • arial est une valeur au même titre que 14pt, bold, red, etc.

Dans les feuilles de style internes, les règles doivent être groupées dans le conteneur suivant :
<STYLE type="text/css"> ... </STYLE> dans la section <HEAD> ... </HEAD>

<HEAD>
. . . . . . . . . . .
<STYLE type="text/css">
H1{font-family:arial ; font-size:14pt ; font-weight:bold ; color:red }
H2{font-family:arial ; font-size:12pt ; font-weight:bold ; color:forestgreen }
H3{font-family:"Times New Roman"; font-size:10pt ; font-weight:bolt ; color:black ;
font-style:italic }
</STYLE>
. . . . . . . . . . .
</HEAD>

Dans les feuilles de style externes, les règles sont écrites exactement de la même manière, mais elles ne comportent aucune balise <HEAD> ou <STYLE>

La première règle ci-dessus implique qu'à l'intérieur de tout conteneur <H1> ... </H1> situé dans le texte de la page, le texte sera écrit en police "arial" de taille 14 points, en écriture grasse (bold) et de couleur rouge (red). Notre exemple est très loin de donner la mesure de l'ensemble des propriétés de style disponibles avec CSS.
La suite s'y appliquera.

Cliquez ici pour une page d'exemple (voyez également le code source)

 

FEUILLES DE STYLE EXTERNES


Nous rappelons l'intérêt de grouper les directives de style dans une feuille de styles externe à laquelle l'ensemble des pages du site feront référence. Notamment pour la maintenance du site.Les directives y sont entrées de la même manière que pour les feuilles de styles internes à l'exception des balises <STYLE>

H1{font-family:arial ; font-size:14pt ; font-weight:bold ; color:red }
H2{font-family:arial ; font-size:12pt ; font-weight:bold ; color:forestgreen }
H3{font-family:"Times New Roman"; font-size:10pt ; font-weight:bolt ; color:black ;
font-style:italic }

Les noms de fichier de ces feuilles doivent avoir l'extension "CSS".
Exemple : style_ancien.css

Dans l'en tête de chacun des fichiers HTML susceptibles de faire appel aux styles contenus dans ces feuilles doit se trouver la référence à la ou les feuilles de style concernées et ce, sous la forme :

<LINK HREF="style_ancien.css" REL="stylesheet" TYPE="text/css">

Si le fichier css ne se trouve pas dans le même répertoire que le fichier html on indiquera son chemin complet absolu ou relatif de préférence.

Cliquez ici pour une page d'exemple (voyez également le code source)

La feuille de style référencée par le fichier précédent contient exclusivement le texte suivant :

H1 {font-family:arial; font-size:14pt; color:red}
H2 {font-family:Times New Roman; font-size:12pt; color:green}
H3 {font family:Verdana; font-size:10pt;color:blue}
P {font family:arial; font-size:8pt; color:teal}

Etape suivante
Sommaire du cours CSS
Sommaire du coursHTML
Retour en Page d'accueil