Tuto CSS-SASS

Associer les CSS au HTML

Comment associer les CSS au HTML? L'élément HTML sera identifié et modifié par la feuille de style directement grâce au nom de la balise HTML, grâce à sa classe, ou grâce à son ID. Ne pas oublier que l'ID doit être unique et que pour avoir un identifiant commun à plusieurs instances d'une balise HTML, il est préférable de les identifier avec l'attribut class plutôt que l'attribut id.

Lier les CSS au HTML avec l'attribut class

/*Côté CSS*/
.simpson{color:yellow;}

<!--Côté HTML-->
<div class="simpson">Homer</div>
<div class="simpson">Bart</div>

Lier les CSS au HTML avec l'attribut ID

/*Côté CSS*/
#homerSimpson{font-family:impact;}

<!--Côté HTML-->
<div id="homerSimpson">Je suis unique</div>

Lier les CSS au HTML avec un nom de balise

/*Côté CSS*/
p{font-family:Comic Sans MS;}

<!--Côté HTML-->
<p>Benny Hill</p>
<p>Thomas N'Gijol</p>

Cibler la N-ième Balise (nth-child)

/*Côté CSS*/
.vin:nth-child(2){color:red;}
.vin:nth-child(3){color:pink;}

<!--Côté HTML-->
<div class="vin">Le vin blanc</div>
<div class="vin">Le vin rouge</div>
<div class="vin">Le vin rosé</div>

Cibler une balise dans une balise

/*Côté CSS*/
div p{color:red;}

<!--Côté HTML-->
<div>
   <h1>Titre</h1>
   <p>balise cible<p>
</div>
<p>balise hors de portée<p>

Cibler une balise dans une balise (méthode 2)

/*Côté CSS*/
div > p{color:red;}

<!--Côté HTML-->
<div>
   <h1>Titre</h1>
   <p>balise cible<p>
</div>
<p>balise hors de portée<p>

Cibler une balise à côté d'une balise (après)

/*Côté CSS*/
div + p{color:red;}

<!--Côté HTML-->
<div>
   <h1>Titre</h1>
</div>
<p>balise cible<p>
<p>balise hors de portée<p>