Je vais vous mettre à l'aise très rapidement : vous connaissez déjà (du moins si vous écrivez vos pages en code source, c'est-à-dire en jonglant avec HTML !) le nom des sélecteurs de base des CSS !
Il s'agit tout simplement des balises utilisées en HTML ... sauf :
html - head - title - meta - script - base - basefont - param
Cela ouvre des horizons, n'est-ce pas ! Et ce n'est pas tout ! ... mais, commençons par le début, c'est-à-dire la syntaxe :
Là aussi, vous verrez que l'écriture des feuilles de style est finalement très simple (ben oui ! ... vous verrez !) car elle ne repose que sur 3 éléments de base :
1) le sélecteur, c'est-à-dire l'élément faisant l'objet du
style
2) la propriété : la caractéristique ou partie de l'élément qui sera affecté
3) la valeur, enfin : comment le contenu du sélecteur sera présenté
Schématiquement, l'écriture se fera donc ainsi :
sélecteur {propriété : valeur}
où les propriétés et valeurs de celles-ci seront enfermées entre des accolades.
Exemple pratique et simple : P {color : blue} ce qui affichera le contenu de la
balise <P> en couleur bleue. *
Vous écrirez rarement des feuilles de style ne comportant qu'un réglage de sélecteur et il faudra par conséquent séparer les différentes propriétés et valeurs de celle-ci. Cela se fait tout simplement en séparant celles-ci par un point-virgule, à l'intérieur des accolades. Comme ceci :
C'est d'une facilité déconcertante, n'est-ce pas ! ... encore faut-il bien maîtriser et structurer les
règles de style !
... que vous pourrez attribuer à 2 autres types de sélecteurs : CLASS et
ID.
... à condition de les identifier, bien entendu !
Comment ? En les ajoutant au sélecteur (la balise) utilisé pour l'écriture de la page Html.
Par exemple, pour les "classes", la feuille de style comportera les éléments suivants :
qui seront appelés dans le corps de la page Html en écrivant :
Mais, lorsque vous écrirez vos pages en y incluant vos "classes", vous risquez de vous trouver en face d'un problème : celui d'inclure une règle de style ... dans une règle de style. Vous ne voyez pas ? Bon, voici une exemple :
<P class="serie2"> votre texte qui sera affiché en bleu comme dans l'exemple ci-dessus</P>
Vous auriez toutefois voulu que la partie "sera affiché en bleu" soit réellement affichée en bleu ... alors que l'ensemble de votre paragraphe est affiché en noir ... Or, vous savez que les règles régissant HTML interdisent d'utiliser une balise <P> dans une balise identique NON fermée. On ne peut faire :
<P> blabla <P> blablabla </P> blabla </P>
Les feuilles de style ont prévu (on s'en serait douté !) une parade : l'utilisation de SPAN comme "sélecteur" interne. Comment déclarer alors cette règle ? Vous écrirez dans votre feuille de style :
.serie4 {color : blue}
Ce sélecteur n'est toutefois pas déclaré par la balise SPAN mais simplement par
un point : . suivi de
l'identifiant choisi. Il vous suffira alors de déclarer cette règle dans votre document HTML de la manière
suivante :
<P class="serie2"> votre texte qui <span class="serie4"> sera affiché en
bleu </span> comme dans l'exemple ci-dessus</P>
Le résultat obtenu sera celui que vous espériez. Le voici
:
votre texte qui sera
affiché en bleu comme dans l'exemple ci-dessus
Remarque : vous pouvez utiliser la même technique (le point) pour attribuer des identités ayant les mêmes règles de style MAIS utilisables avec différentes balises au lieu d'une seule, celles qui comporteront l'identifiant choisi ! Dans ce cas, il vous suffit d'écrire de la manière suivante :
Et pour les "identifiants" appelés par la balise
ID la feuille de style sera écrite de la façon suivante :
#rubrique1 {color : blue}
Ces identifiants seront appelés dans le corps de la page HTML en écrivant, par exemple :
Il s'agit en fait de créer ainsi des règles de style génériques qui permettront de multiplier les effets de présentation. Grâce à ces deux "extensions" dans la famille des sélecteurs, il n'y a pratiquement plus de limite à l'imagination des concepteurs. Attention toutefois à ceci : la balise ID est destinée à fixer des propriétés de style pour un élément unique et ne peut donc être appelée une seconde fois dans la même page ! Elle ne fait pas donc pas double emploi avec le POINT (la classe) : son utilisation est notamment intéressante pour pouvoir intégrer des règles de styles avec des scripts réalisés dans d'autres langages, tel JavaScript. Si votre but dans l'utilisation des feuilles de style est de faire de la mise en forme et de la présentation, utilisez donc plutôt les classes.
Vous désirez attribuer certaines règles identiques à différents sélecteurs sans devoir ajouter l'écriture d'appel de classes dans la balise HTML ? C'est également très simple : il vous suffit alors de grouper ces sélecteurs dans la déclaration de règles. Par exemple :
H1, H2, H3, P {color : blue}
Cet ensemble Sélecteurs {propriété : valeur} permettra d'afficher un texte
en couleur bleue dans ces 4 balises.
Il suffit, comme dans cet exemple, de séparer chacun des sélecteurs par une virgule et un espace.
Reste à savoir où et comment déclarer les règles de style. Vous verrez cela dans l'exposé suivant.
* Afin de permettre une lecture sans risque de confusion, j'ai volontairement écrit les balises en majuscules. Sachez toutefois que l'écriture correcte d'une page, qu'il s'agisse de HTML ou de CSS, doit se faire en lettres minuscules.