Feuilles de style CSS : mise en forme d'une page web

En 30 secondes

• CSS sépare le contenu HTML de sa mise en forme : chaque règle associe un sélecteur à une déclaration.
• Trois types de sélecteurs : élément (1 point), classe (10 points, précédée d'un point), identifiant (100 points, précédé d'un croisillon).
• En cas de conflit, la spécificité la plus élevée l'emporte ; à spécificité égale, c'est la cascade CSS (règle déclarée en dernier) qui décide.

Ce que tu sauras faire

• Décrire le rôle des feuilles de style CSS dans la mise en forme d'une page HTML.
• Différencier sélecteur d'élément, sélecteur de classe et sélecteur d'identifiant.
• Calculer la spécificité d'un sélecteur CSS pour déterminer quelle règle s'applique en cas de conflit.
• Appliquer la cascade CSS pour départager deux règles de même spécificité.

Les mots à connaître

CSS (Cascading Style Sheets)

le langage qui définit l'apparence (couleurs, tailles, positions) des éléments d'une page HTML, séparément de son contenu.

Règle CSS

une instruction CSS composée d'un sélecteur et d'une déclaration entre accolades, qui applique une mise en forme aux éléments visés.

Sélecteur CSS

la partie d'une règle CSS qui désigne les éléments HTML concernés par la mise en forme.

Le piège classique

Croire que la règle écrite en dernier l'emporte toujours, même quand les spécificités diffèrent : ce n'est vrai qu'en cas d'ÉGALITÉ de spécificité (cascade CSS).

L'astuce

Spécificité = identifiant × 100 + classe × 10 + élément × 1 : additionne les points de chaque partie du sélecteur.