Intégration des styles

Les styles CSS peuvent être intégrés dans une page Web de trois manières :

  1. À même les balises d'ouverture des éléments dans une page Web (=intraligne)

  2. Dans l'en-tête d'une page Web (=interne)

  3. Dans un fichier externe (=externe)

Chacune de ces méthodes possède ses avantages et désavantages, comme vous le constaterez à la lecture des sections qui suivent. Dans le cadre du TP Site Web, la troisième méthode (fichier externe) est privilégiée.

Intégration des styles dans les balises d'ouverture des éléments (intraligne)

Il est possible d'intégrer des règles CSS directement dans la page HTML dans la balise d'ouverture de l'élément HTML dont on veut modifier le visuel. Cela se fait en lui ajoutant un attribut style qui aura pour valeur les règles CSS désirées comme illustré ci-dessous. La couleur de la police de caractères de l'élément p y est redéfinie en argenté.

1
<p style="color: silver">titre</p>

Cette méthode permet de modifier à la pièce, pour des besoins particuliers, une instance d'un élément. Elle est toutefois déconseillée lorsqu'il s'agit de définir le visuel pour toutes les instances d'un élément en particulier dans l'ensemble d'un site Web. En effet, en ce cas, il faudrait ajouter l'attribut style à chacune des instances de l'élément, ce qui représente bien du travail. De plus, si vous décidez de modifier le visuel de votre site Web, il faudra modifier toutes les valeurs des attributs style ainsi ajoutés.

Intégration des styles dans l'en-tête d'une page Web (interne)

Il est possible d'insérer des règles CSS dans l'entête des pages HTML (section head) à l'aide d'un élément style comme l'illustre l'exemple ci-dessous :

1
<head>
2
	<style type="text/css">
3
		body {background-color: gray;}
4
	</style>
5
</head>

Cette méthode permet de modifier l'ensemble du visuel d'une page Web. Elle est à privilégier uniquement pour des cas particuliers où vous désirez, pour une page, un visuel différent du reste du site Web. Tout comme la première méthode présentée, elle est déconseillée pour définir les styles de base du site Web au complet comme il faudra faire l'insertion de l'élément style sur toutes les pages du site, ce qui peut devenir fastidieux si le site comporte plusieurs pages. De plus, si vous désirez changer le visuel de votre site Web, il faudra modifier les entêtes de toutes les pages Web.

Intégration des styles dans un fichier externe (externe)

La troisième et dernière méthode présentée est celle qui est conseillée lorsque l'on définit le visuel de base d'un site Web. Il s'agit d'inclure toutes les règles CSS dans un fichier séparé et de pointer vers ce fichier à partir des pages du site Web à l'aide d'un élément link que l'on inclut dans l'entête des pages (head) de cette manière :

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

On indique, dans cet élément link, le chemin vers le fichier CSS à l'aide de l'attribut href. Pour l'exemple ci-dessus, il s'agit d'un chemin relatif, comme le fichier CSS est sur le même serveur que la page HTML (ce qui est habituellement le cas). Ce fichier CSS, par rapport à la page HTML, se trouve dans un dossier css et se nomme styles.css. C'est la méthode que vous utiliserez pour le TP Site Web.

ExempleExemple d'une feuille de styles externe

1
@charset "utf-8";
2
3
@media all {
4
5
	body {
6
		font-family: Arial, Helvetica, sans-serif; 
7
	} 
8
9
	h1 {
10
		color: #FF6600; 
11
		font-weight: bold; 
12
		font-size: 1.8em;
13
	} 
14
	
15
	ul {
16
		list-style-type: square; 
17
	}
18
19
	*.notes {
20
		font-size: 0.7em;
21
		margin-bottom: 0em;
22
	} 
23
}

Si on examine l'exemple de plus près, on remarque :

  • L'indication, en première ligne, du jeu de caractères utilisé;

  • La précision, en deuxième ligne, du media auquel s'appliquent les styles (ici, cela s'applique à tous les médias);

  • La présence de propriétés CSS pour la définition du visuel pour les éléments body (polices de caractères), h1 (couleur de la police de caractères, emphase, taille) et ul (type de puces);

  • La présence d'une classe notes qui pourra s'appliquer à n'importe quel élément pour diminuer la taille de la police de caractères et enlever la marge inférieure;

  • L'utilisation de l'indentation et de retours de ligne pour séparer les propriétés pour faciliter la lecture de la feuille de styles.