Trois possibilités pour définir vos styles CSS

Comme nous allons le voir durant ce chapitre, il existe trois niveaux distincts sur lesquels vous pouvez définir des caractéristiques liées aux CSS. On peut définir un style pour un tag HTML (malgré ce que l'on a pu dire précédemment, cela peut, dans certains cas, être utile), pour une page HTML entière, ou pour un groupe de pages (voir un site Web).

Nous allons étudier une à une ces différentes possibilités, en commençant par la définition la plus locale : celle qui s'applique directement au tag.

Pour définir des attributs de style pour un tag HTML, c'est très simple : il suffit, sur ce tag HTML, de rajouter un paramètre Style qui va contenir une chaîne de caractères. Cette chaîne va contenir un ensemble d'attributs séparés par des points-virgules. L'exemple qui suit illustre un tel cas en mettant un paragraphe dans un style bien particulier. Le résultat est affiché directement après.

Ceci est le paragraphe résultant du code proposé à titre d'exemple : notez bien les différences avec les autres paragraphes de ce cours qui eux ont utilisés un autre style (localisé dans un fichier extérieur).

La seconde possibilité, consiste à définir des aspects liés aux styles, non pas pour un tag, mais pour un ensemble de tags d'un document HTML. Pour ce faire, on utilise le couple de tags HTML <style> . . . </style>. On place dans ce bloc, un certain nombre de sélecteurs ainsi que les définitions de styles associées. Le terme de sélecteurs est utilisé soit pour identifier un tag en HTML (p, a, table, td, tr, img, ...), soit ce que le nommera une classe, ou encore un tag particulier de la page (grâce à un mécanisme d'identificateur unique). Nous reviendrons sur ces deux derniers cas ultérieurement dans ce cours.

Commençons par étudier un exemple très simple. Comme vous vous en doutez certainement , la page que vous êtes en train de lire utilise les CSS. En fait, elle utilise un fichier externe. Mais si j'avais voulu mettre toutes les définitions de styles directement dans ce document, voici un exemple de code CSS que j'aurais du adjoindre à ce fichier HTML.

<style>
<!--
    a, h1, h2, h3, p { 
        font-family: Verdana, Arial;
        font-weight: bold; 
    }
	
    a:hover	{ color: #000000 }
    a { color: #0060A0; font-size: 10pt; }
	               
    h1 { color: #004080; text-align: center; }
    h2 { color: #0060A0; text-align: left; font-size: 14pt; }
    h3 { color: #0060A0; text-align: left; font-size: 13pt; }
	
    p {
        color: #00A0FF;
        font-size: 10pt;
        text-align: justify;
        text-indent: 15pt;
    }
	
    #MonTag {
        background: #00FF00;
    }
	
    div.note {
        text-size: 1;
        text-align: center;
    }
	
    table.SectionCode	{
        background-color: #E0E0E0;
        border-style: ridge; border-width: 1pt; border-color: grey;
        text-align: center; width: 80%;
    }
	
    .SectionCode p, .SectionCode pre {
        text-align: left; font-size: medium; 
        font-family: courier; color: #000000;
    }
	
//-->
</style>
	                        

En observant cet exemple, on voit rapidement que l'on peut définir un style pour un ensemble de tags HTML : ici pour les titres de niveau 1 (H1), les titres de niveau 2 (H2), les titres de niveau 3 (H3), pour tous les paragraphes et pour une entité nommée SectionCode. Cette entité est en fait une classe de styles. Cette classe me sert, dans ce document, à vous présenter les exemples de code. En effet, j'utilise un tableau d'une cellule pour afficher les exemple de code. Or je pourrais avoir besoin d'utiliser les tableaux, dans ce document, pour tout autre choses. Si j'avais apposé des aspects de styles directement sur le tableau, ils auraient été utilisés dans tous les cas. Or j'ai préféré utiliser une classe : il me reste alors à appliquer la classe sur les tableaux concernés (et uniquement eux !!!). Pour appliquer une classe à un tag du document, il me suffit de rajouter le paramètre suivant dans le tag HTML : class="nom_classe".

Comme vous l'avez observé, on peut de plus qualifier le style d'un tag via un ensemble de sélecteurs. Prenons, par exemple, le cas des paragraphes. Via la règle précédemment détaillée, on voit que certaines définitions de styles s'appliquent déjà. On peut néanmoins compléter la définition du style CSS des paragraphes en rajoutant des caractéristiques spécifiques aux tags de paragraphes : tout paragraphe devra, en plus, être justifié, avec un retrait de 20 pixels sur la première ligne, et utiliser une certaines couleur.

Le sélecteur #MonTag s'appliquement uniquement à l'unique tag qui aura comme identifiant MonTag. Pour associer un identifiant à un tag, il suffit de lui rajouter l'attribut id. Par exemple : <p id="MonTag">Contenu avec une couleur d'arrière plan</p>.

Enfin, il nous reste à présenter la dernière possibilité : définir un fichier indépendant, d'extension ".css". Cette possibilité est sans aucun doute la plus intéressante : elle permet de concentrer la spécification visuelle d'un certain nombre de pages en un seul et unique endroit. Ainsi, si une modification est à réaliser, cela prendra quelques instants, et toutes les pages concernées seront finalement mises à jour. Pour arriver à ce résultat, deux étapes doivent être réalisées. En première étape, il vous faut créer le fichier de définition de styles CSS. La section de code suivante vous permet de voir comment ce document à été mis en place (notez que la définition de style reste très proche ce celle de l'exemple précédent).

a, h1, h2, h3, p { font-family: Verdana, Arial; font-weight: bold; }
	
	a:hover	{ color: #000000 }
	a { color: #0060A0; font-size: 10pt; }
	               
	h1 { color: #004080; text-align: center; }
	h2 { color: #0060A0; text-align: left; font-size: 14pt; }
	h3 { color: #0060A0; text-align: left; font-size: 13pt; }
	
	p {
	    color: #00A0FF; font-size: 10pt;
	    text-align: justify;
	    text-indent: 15pt;
	}
	             
	div.note {
	    text-size: 1;
	    text-align: center;
	}
	
	table.SectionCode	{
	    background-color: #E0E0E0;
	    border-style: ridge; border-width: 1pt; border-color: grey;
	    text-align: center; width: 80%;
	}
	
	.SectionCode p,.SectionCode pre {
	    text-align: left; font-size: medium; 
	    font-family: courier; color: #000000;
	}
	                    

La seconde étape consiste à lier chaque page HTML devant utiliser cette charte graphique au fichier définissant la feuille de styles CSS. Pour ce faire, vous devez utiliser le tag HTML <link>. Celui-ci accepte trois paramètres. Le premier, rel, spécifie le type de relation (ici une feuille de style (stylesheet en anglais) : en effet, on peut lier d'autres types de fichiers, via ce tag de lien. Le second, type, indique quel est le langage utilisé pour spécifier le style : pour l'heure, HTML ne supporte que le langage CSS. Enfin, le dernier, nommé href (référence hypertexte), spécifie le nom du fichier contenant les caractéristiques. La section de code suivante vous montre comment utiliser ce tag.

<link rel="stylesheet" type="text/css" href="styles.css" />

Vous avez donc trois localisations ou vous pouvez spécifier vos caractéristiques de style. Soit sur un tag en particulier, soit pour une page, soit pour en ensemble de pages.

Mais, comme dit précédemment, il peut être utile de jouer au niveau d'un tag en particulier. En effet, c'est toujours la définition la plus spécialisée qui prendra la main. Donc si pour un site, vous justifiez vos paragraphes, mais si pour l'un d'eux, dans une page donnée, vous dites qu'il doit être aligné à droite, c'est cette dernière définition qui prendra effet.