Pour appliquer des règles de style Css à certains éléments d'une page .html, il faut pouvoir les sélectionner. Il existe pour cela différentes sortes de sélecteurs.

Sélecteurs d'éléments

Une règle Css telle que :

concernera tous les éléments de type paragraphe.
On peut ainsi facilement définir des comportements «par défaut» pour les éléments essentiels d'une page (ce qui a déjà été fait dans les exercices précédents).

De cette façon, on peut alors choisir la police par défaut pour la page avec une règle telle que la suivante (voir le web pour plus de détail sur le facteur 1.5 ci-dessous, il s'agit d'une valeur sur la propriété line-height) :

Sélecteurs de classe

Il peut exister plusieurs types de paragraphes dans une page web. Pour les distinguer, il faut définir des groupes de balises à l'aide de l'attribut class.

Voici comment écrire en vert des paragraphes correspondants aux énoncés d'exercices :

Sélecteurs d'identifiant

On peut aussi désigner un élément unique dans une page avec l'attribut id. Cet élément sera unique dans la page, mais il pourra être présent dans chaque page du site.

Voici comment écrire en rouge le paragraphe de conclusion de la page :

Conclusion sur les sélecteurs

Les attributs de classe et/ou d'identifiant s'utilisent aussi avec les balises génériques <div> (de type block) et <span> (de type inline). Une façon sympathique et efficace de faire le tour des sélecteurs est de traiter les situations proposées à cette adresse. Prenez le temps de lire le cours qui se trouve à droite de la fenêtre dans chaque situation.

On trouvera également une liste exhaustive des sélections possibles sur cette page de w3schools.

Pour le code ci-dessous, plusieurs règles Css peuvent a priori s'appliquer à un même élément.

1. Pour chacun des liens, expliquer ses caractéristiques (couleur, graisse, surlignage...)
2. Ajouter une règle Css de façon à ce que la couleur du dernier élément soit orange.

Dans le code ci-après :

1. Justifier la couleur du lien.
2. Anticiper ce que sera cette couleur si on supprime la seconde règle css.

Dans le fichier .html ci-dessous, les trois paragraphes sont encadrés par une bordure gauche et une bordure basse. Modifier les parties Html et Css en utilisant des sélecteurs et des bordures de couleur «transparente» pour obtenir l'affichage ci-dessous.
On pourra augmenter l'épaisseur des bordures pour mieux voir les effets...

En Css, il existe un sélecteur permettant de repérer le numéro de présence d'un élément dans une page .html. Ce sélecteur est le pseudo-élément :nth-of-type(n). Voici comment écrire en violet le 3^ème titre de niveau <h1> présent dans la page .html :

Ce pseudo-élément permet aussi de repérer les numéros pairs et impairs à partir d'expressions de la forme an+b, où a et b sont des entiers permettant de définir la règle de calcul. En utilisant cette information, définir le Css permettant d'obtenir l'affichage ci-contre.