On a vu depuis le TD1 qu'une règle CSS permet de définir le style d'une famille d'éléments html. Le sélecteur est la partie de la règle qui décrit la famille d'éléments en question. Pour le moment, on a rencontré le sélecteur universel, les sélecteurs de type, et les sélecteurs d'identifiant. Pour finir, on verra un peu plus loin les sélecteurs de classe.
Ce sélecteur, nommé * (étoile), permet de sélectionner tous les éléments. Par exemple, les deux règles
* { border: blue 1px solid; margin: 0px; }
s'appliquent à tous les éléments (toutes les boîtes seront bordées d'un trait bleu d'un pixel d'épaisseur, et sans marges extérieures).
On a vu qu'un élément html consiste en une paire de balises (ouvrante et fermante) et ce qui se trouve entre les deux. Le nom de la balise ouvrante (ou fermante, c'est le même) s'appelle le type de l'élément; par exemple: p, h3, html ou body sont des types d'éléments.
Un sélecteur de type porte simplement le nom du type d'élément concerné par la règle. Par exemple, la règle
a {color: green;}
s'applique à tous les éléments de type a (toutes les ancres auront un texte en vert).
Il arrive qu'un élément ait un rôle particulier dans une page web. Il est alors possible, en HTML, d'utiliser l'attribut id (qui est attribut de tous les types de balises) pour lui donner un nom (la valeur de l'attribut id). Par exemple,
<p id="truc"> blablabla spécial... </p>
identifie ce paragraphe apparemment spécial par le nom truc.
Ce nom doit être unique dans une page web donnée, mais dans un site web entier plusieurs éléments peuvent avoir le même identifiant (dans des pages différentes).
Un sélecteur d'identifiant porte simplement le nom de l'identifiant concerné par la règle, précédé d'un signe # (dièse). Par exemple, la règle
#truc {background-color: yellow;}
s'applique à tous les éléments dont l'attribut id a été fixé à truc (maximum 1 par page, il aura un fond jaune).
class (qui est attribut de tous les types de balises) pour donner un nom (la valeur de l'attribut class) à cette famille. Par exemple,
<p class="rem"> Remarquez que blabla... </p>
class peut prendre plusieurs valeurs (class="cla1 cla2" par exemple).
Un sélecteur de classe porte simplement le nom de la classe concernée par la règle, précédé d'un signe . (point). Par exemple, la règle
.rem { font-size: smaller;}
s'applique à tous les éléments de classe rem (ils seront écrits dans un corps plus petit).
Cette archive contient une page html et une image de son apparence après application d'une feuille de style (interview.css) que vous allez créer (partiellement).
Ouvrez la page avec Notepad++ ou Bluefish (ou autre). Remarquez que certains éléments de type p ont une classe (question ou reponse) ou un identifiant (intro) qui vont vous permettre de les distinguer des autres éléments de type p.
Dans interview.css, ne mettez que les quelques règles utiles pour les deux classes et l'identifiant pour le moment (vous ferez la suite à l'occasion de l'exercice d'application 5 en fin de td).