Bonjour, bienvenue dans Learn As You Code : HTML et CSS ! Aujourd’hui, nous plongeons plus profondément dans le monde du stylisme. Jusqu’à présent, nous stylisions directement les éléments. Mais que se passe-t-il si vous avez deux éléments

et que vous souhaitez que chacun soit différent ? Entrez les sélecteurs CSS !

Sélecteurs d'éléments

Vous les connaissez déjà, mais récapitulons :

h1 {
  font-size: 32px;
  font-family: Arial;
  font-weight: 500;
}

Cet ensemble de règles cible tous les éléments

, en définissant leur taille de police, leur famille et leur poids. Les sélecteurs d’éléments sont parfaits pour les grandes lignes, comme définir un guide de style pour l’ensemble de votre page. Mais avouons-le, toutes les balises

ne devraient pas se ressembler. Pour un style plus spécifique, nous devons améliorer notre jeu !

Sélecteurs de classe

Les cours à la rescousse ! Vous voulez que deux balises

soient différentes ? Ajouter des cours :

This text is BIG and red.
This text is small and blue.

Chaque balise

a deux classes. Dans votre CSS, ciblez ces classes avec un .:

.big {
  font-size: 100px;
}

.small {
  font-size: 9px;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

Boom! Styles appliqués. Vous pourriez vous demander : « Pourquoi ne pas combiner les styles en moins de classes ? » Bonne question ! J'aime garder les cours flexibles. Vous ne savez jamais quand vous voudrez peut-être réutiliser du petit sans bleu.

Sélecteurs d'identifiant

Pour les éléments uniques, utilisez des identifiants. Regarde ça :

My Name is Nolan!

Utilisez les identifiants avec parcimonie, une seule fois par page. Ciblez-les en CSS avec #:

#name {
  text-decoration: underline;
}

Simple, non ?

Styles contradictoires

Maintenant, que se passe-t-il si un élément a à la fois une classe et un ID ? Comme ça:

Will I be red or blue?

Ce sera rouge ! Pourquoi? Parce que les identifiants sont plus spécifiques que les classes. Voici un exemple rapide :

I’m styled by three rulesets!

p {
  font-size: 12px;
  color: black;
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

#red {
  color: red;
}

Le texte devient rouge et est souligné, avec une taille de police de 12 px. Les identifiants l'emportent sur les classes, qui à leur tour remplacent les sélecteurs d'éléments. Cette cascade de styles donne à votre page un aspect soigné sans code répété.

Défi

Il est temps d'améliorer votre page À propos de moi ! Voici votre mission :

• Définissez les styles par défaut pour

  ,

  et

  à l'aide des sélecteurs d'éléments.

• Ajoutez un slogan sous votre nom avec une balise

  et stylisez-le à l'aide d'un identifiant.

• Égayez d'autres textes à l'aide des sélecteurs de classe.

Jouez avec des styles contradictoires et voyez quelles règles gagnent. Pouvez-vous comprendre pourquoi ?

Merci d'avoir lu ! Faites-moi savoir s'il y a d'autres sujets que vous aimeriez que j'explore dans cette série dans les commentaires, ou faites-moi simplement savoir si vous appréciez la série !