C. S. S. (1996)

Cascading Style Sheets : feuilles de style en cascade.

Besoin

Définir les styles de balises HTML.

Analyse

Un style est un ensemble de paramètres déterminant le rendu visuel d'une balise, comme :

• la fonte
• les couleurs (avant-plan, arrière-plan, etc.)
• l'espacement
• la justification
• la casse

La spécification des styles applicables à un document est contenue dans une feuille de style.

On prévoit de spécifier pour un document une série de feuilles de styles, dont certaines peuvent redéfinir les styles des précédentes. On parle alors de cascade de feuilles de styles, pour atteindres les buts de :

• modularité : capacité à construire un style global à partir de feuilles de styles élémentaires
• adaptabilité : appliquer les style adéquats en fonction des volontés des rédacteurs, des lecteurs, des cas d'utilisation, etc.

Conception

Une feuille de style est constituée de règles (rules), elles-mêmes constituées de :

• un sélecteur : l'identifiant de la balise du document dont on souhaite définir le style
• une déclaration : définition du style sous la forme d'une suite de :
  • propriété
  • valeur
• un poids, considéré en cas de conflits de redéfinitions entre règles. Par défaut les règles issues de l'auteur d'un document sont plus fortes que celles d'un lecteur par exemple.

Une feuille de style peut être :

• interne : intégrée au contenu du document HTML
• externe : référéncée par le document HTML. Ce dernier choix permet de réutiliser la même feuille de style pour plusieurs documents, et donc de modifier l'apparence d'un ensemble de document à partir d'une seule feuille.

Implémentation

Exemples

Un exemple de feuille de style CSS est :

<style type="text/css">

.mainTitle { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: larger}
h1 { font-family: "Bookman Old Style"; font-size: x-large; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-align: left; word-spacing: normal; letter-spacing: 0mm}
p { font-size: small; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; text-align: justify; color: #000000; font-family: "Bookman Old Style"; clip: rect( ); text-indent: 20pt}
ul { font-family: "Bookman Old Style"; font-size: small; list-style-position: outside; list-style-type: disc; text-align: justify}
address { font-family: "Courier New", Courier, mono; font-size: small; margin-left: 1cm}
ol { font-family: "Bookman Old Style"; font-size: small; list-style-position: outside; list-style-type: decimal; text-align: justify}
h2 { font-family: "Bookman Old Style"; font-size: large; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; height: auto; margin-top: 25px; margin-right: 0px; margin-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; border: 0px black groove; clip: rect( )}
</style>
h3 { font-family: Tahoma, sans-serif; font-size: medium; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; height: auto; width: 100%; margin-top: 10px; margin-right: 0px; border-color: black ; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border: black groove; border-width: 0px 0px thin }
h3 { font-family: "Bookman Old Style"; font-size: medium; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border: 0px black groove; clip: rect( )}
cite { font-family: "Courier New", Courier, mono; font-size: small; background-color: #EEEEEE ; font-style: normal}
th { font-family: "Bookman Old Style"; font-size: small; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; text-align: justify ; background-color: #C9C9C9; color: #666666}
td { font-family: "Bookman Old Style"; font-size: small; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; text-align: justify }
blockquote { font-family: Tahoma, sans-serif; font-size: small; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; text-align: left}
strong { font-family: "Courier New", Courier, mono; font-size: small; background-color: #333333; font-style: normal; color: #333333}
.source { font-family: "Bookman Old Style"; font-size: x-small; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #666666}
.exergue { font-family: "Times New Roman", Times, serif; font-style: italic; text-align: right; font-size: medium}
body { background-color: #FFFFFF; margin-right: 20px; margin-left: 20px}
a { color: #006699}

Un exemple de page Web (HTML) utilisant une feuille de style est :

<HTML>
  <HEAD>
    <TITLE>Test de feuille de style</TITLE>
    <LINK REL="stylesheet" TYPE="text/css" href="http://javarome.net/monStyle.css" title="Cool">
    <style type="text/css">
    <!-- 
      @import url(http://javarome.net/basic);
      H1 { color: blue }
    -->
    </style>
  </HEAD>
  <BODY>
    <H1>Ce titre 1 est bleu</H1>
    <P style="color: green">Alors que ce paragraphe est vert.
  </BODY>
</HTML>

Notes

• CSS ne doit pas être confondu avec le standard XSL (eXtensible Style Sheet) lié à XML.