Utilisation de styles

Un style est un ensemble de caractéristiques de mise en forme qui sont définies dans une feuille de style en cascade (CSS). Vous pouvez appliquer des styles au contenu d'une page Web, y compris au texte (qu'il s'agisse de caractères individuels ou de paragraphes entiers), aux graphismes, aux couches, aux tableaux et même au corps de toute la page Web. Les styles vous permettent de réutiliser efficacement un ensemble de propriétés et de valeurs sans avoir à définir les propriétés à chaque fois que vous voulez les utiliser.

Les règles de style CSS sont dites « en cascade » dans la mesure où les règles de style globales continuent de s'appliquer aux éléments HTML, sauf si elles sont substituées par des règles de style locales. En général, les règles de style locales sont prioritaires sur les règles générales. Par exemple, un style défini dans une CSS interne d'une page Web se substitue à un style défini dans une feuille de style externe. De la même façon, une CSS intraligne définie dans un élément HTML unique sur la page se substitue à tous les styles définis pour ce même élément dans le feuille de style interne ou externe de la page Web. Les parties des règles de style globales qui ne sont pas substituées par les règles de style CSS locales continuent de s'appliquer aux éléments HTML, même après l'application des styles locaux.

Types de styles

Un style qui réside dans une CSS interne ou externe peut avoir un sélecteur de classe, d’élément ou d’identificateur. Un style se définit par son ensemble de règles, qui comprend un sélecteur, suivi d’un bloc de déclarations de propriétés placées entre une accolade gauche ({) et une accolade droite (}). Chaque type de style se distingue des autres types de styles par son sélecteur ; un point (.) précède le sélecteur pour un style basé sur une classe ; un signe dièse (#) précède le sélecteur pour un style basé sur l’ID ; le sélecteur d’un style basé sur un élément comprend uniquement un élément HTML, par exemple H1.

Sélecteurs d’élément

Utilisez un sélecteur d’élément pour définir un ensemble de propriétés que chaque occurrence d’un élément HTML particulier utilisera dans une page Web. Par exemple, pour créer une marge de 25 pixels autour de tous les paragraphes (contenu entouré par des balises <p>) dans votre page Web, vous créez un style qui utilise l’élément p comme sélecteur et contient les déclarations de propriétés de la marge, comme indiqué dans le code suivant.

L’exemple suivant applique les propriétés margin-left et margin-right à tous les éléments HTML h2 dans le document.

h2 { margin-left: 25px; margin-right: 25px;}

Sélecteurs de classe

Utilisez un sélecteur de classe pour définir un ensemble de propriétés que vous voulez utiliser sur un ou plusieurs éléments dans une page Web. Si vous voulez modifier le style, vous pouvez modifier l'ensemble de règles du style et les modifications seront automatiquement reflétées dans chaque élément auquel vous avez appliqué le style.

L’exemple suivant déclare la classe introduction et spécifie les propriétés font-size et color.

.introduction {font-size: small; color: white;}

Cette classe peut être affectée à n’importe quel élément HTML :

<h3 class="introduction">

Si vous souhaitez restreindre une règle CSS à des éléments HTML en particulier, incluez l’élément dans le sélecteur comme suit :

p.subtext {font-style: italics; font-size: 0.8em;}

Cette règle de style ne s’applique qu’à des éléments de paragraphe.

Remarque :
Plusieurs classes peuvent être affectées à un même élément HTML :

<p class="introduction subtext">

Sélecteurs d’ID

Utilisez un sélecteur d’ID lorsque vous voulez définir un ensemble de propriétés pour un seul élément ou bloc d’éléments que vous voulez distinguer de tous les autres contenus dans une ou plusieurs pages Web. Utilisez un sélecteur d’ID lorsque vous voulez appliquer un style à un seul élément HTML dans une page Web.

#footer {background-color: #CCCCCC; margin: 15px;}

Appliquez cette règle CSS à un même élément HTML.

<div id="footer">

Styles intralignes

Utilisez un style intraligne lorsque vous voulez définir un ensemble de propriétés pour un seul élément ou bloc d'éléments dans une page Web et que vous ne voulez par réutiliser ce style. Contrairement aux sélecteurs basés sur l’ID, l’élément et la classe, dont les propriétés sont définies dans la section de l’en-tête d’une page Web (CSS interne) ou dans un fichier CSS externe, les propriétés d’un style intraligne (ou CSS intraligne) sont définies directement dans l’élément HTML auquel vous voulez appliquer le style.

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Voir aussi

Tâches

Créer un style
Modifier un style

Concepts

Contrôle d'apparences avec styles
Référence des feuilles de style en cascade