CSS -- Notions de base


'Cascading Style Sheets, level 1' est une puissante addition au langage HTML qui améliore le rendu des documents Web. Ce concept est supporté par Microsoft Internet Explorer 3.x (avec quelques lacunes) et Netscape Navigator 4.x. Il y a trois manières d'écrire le code, soit local, soit global, soit lié. Les feuilles de styles locales sont les plus facile à utiliser (et à essayer), alors que les feuilles de styles globales ou liées sont les plus puissantes.

Il existe 4 façons de les utiliser :

  1. Dans un documents à part avec l'extension .css dans lequel vous faites suivre la balise par ces propriétés. H1 { color: blue }
    Vous faites appel à cette feuille de style dans votre documents HTML grâce à la balise <LINK rel="stylesheet" type="text/css" href="%URL" title=classique>
  2. Vous pouvez utilisez les balises <STYLE> </STYLE> dans l'en-tête du document HTML à l'intérieur desquelles vous définissez votre feuilles de style.
  3. Vous pouvez importez une feuille de style en utilisant la commande @import url(%URL);
  4. Et enfin en utilisant l'attribut style à l'intérieur d'un tag.
Exemple :

<HTML>
<HEAD>
  <TITLE>Exemple d'utilisation des feuilles de style</TITLE>
  <LINK rel="stylesheet" type="text/css" href="../feuille.css" title=classique>
  <STYLE type="text/css">
    @import url(../feuille.css);
    H1 { color: blue }
  </STYLE>
</HEAD>
<BODY>
  <H1>Le titre est bleu</H1>
  <P style="color: green">Mais ce paragraphe est vert.
</BODY>
</HTML>

Local style sheets

STYLE="attrib1: value1;attrib2: value2;..." Adding this parameter into a tag will change the appearance of the text between the start and end tags. Local style sheets can be called from almost every tag which has an ending tag, for example <DIV>, <P>, <SPAN> and <FONT>. The attribute and the value are separated with colons and different attributes are spearated with semi-colons. See below for available attributes.

Global style sheets

<STYLE TYPE="text/css">
This tag should be inserted before the BODY-tag. A global style sheet can be called anywhere in the document by defining the name of the definition, see below. TYPE is the MIME-type of the style, and must be "text/css".

<!-- HTML {attrib1: value1;attrib2: value2;...} TAG.name {attrib1: value1;attrib2: value2;...} -->
This code should be inserted between the tags. To make the code invisible for old browsers, it's written as a comment. TAG is the tag name from which the definition will be called, for example FONT. name is the name of the definition and can be any word you wish. The code between { and } defines the attributes of the text which will use the definition. See below for available attributes. Using HTML instead of TAG.name defines the default attributes for the document, similar to the BASEFONT tag.

CLASS=name
Adding this parameter into a tag will change the appearance of the text between the start and end tags. The parameter can be called from almost every tag which has an ending tag, for example <DIV>, <P>, <SPAN> and <FONT>, just like a local style sheet. name is the name defined in the code above.

Linked style sheets

<LINK REL=STYLESHEET HREF=url TYPE="text/css">
This tag should be insearted between the HEAD-tags. A linked style sheet is similar to a global style sheet, but use an external document instead. Using linked style sheets in a lot of pages, the appearence of the text can be changed by just edit the linked style sheet-file. HREF is the url to this file. The linked file can be any document which has global style sheet codes. TYPE is the MIME-type and must be "text/css".

CLASS=name
This parameter can be added to different tags in the same way as with a global style sheet, see above.

Groupements

Pour réduire la taille de vos feuilles de styles vous pouvez regroupez les sélecteurs :
H1, H2, H3 { font-family: helvetica }

De la même manière les déclarations peuvent être groupées :

H1 {
    font-weight: bold;
    font -size: 12pt;
    line-height: 14pt;
    font-family: helvetica;
    font-variant: normal;
    font-style: normal;
    }
De plus certaines propriétés ont leur propre syntaxe de groupement :
H1 { font: bold 12pt/14pt helvetica }

Christophe Merlet
redfox@redfoxcenter.org
©Tous droits réservés
13 août 1997