Class et ID

Comment appliquer un style particulier à un paragraphe ?

C'est ici on intègre la notion de id et de class

La seule différence entre un id et une class est que id ne doit être utilisé qu'une seule fois dans la page WEB

class

HTML

<div class="firstclass">
  <p class="introduction">Bonjour et bienvenue sur mon site !</p>
  <p>Ceci est un texte </p>
</div>

CSS

.introduction
{
    color: blue;
}

Résultat

Dans le code HTML l'attribut class peut être utilisé avec toutes les balises img, h1, p, ...

HTML

<p class="classP"> Ceci est un texte avec une class </p>

<img src="https://cdn.pixabay.com/photo/2016/09/08/04/12/programmer-1653351_960_720.png" class="image">

<h1 class="titre1">Ceci est un titre avec une class </h1>

CSS

.classP {
  color:red;
  font-size:15px;
}

.image {
  width: 25%;
}

.titre1 {
  text-decoration:underline;
}

Dans le fichier .css commencer le nom de votre class par un point .

Résultat

La class s'ajoute à toutes les balises afin de les personnaliser. Ajouter la class à toutes les balises que vous avez besoin.

HTML

<p class="classP"> Ceci est un texte avec une class </p>
<p class="classP"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit tellus et velit consectetur, vitae varius.</p>
<p> Ceci est un paragraphe</p>
<p class="classP"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin cursus nisi vitae egestas efficitur. Proin neque. </p>
<p> Ceci est un texte  </p>

CSS

.classP {
  color:red;
  font-size:15px;
}

Résultat

Les class peuvent être combinées :

<div class="testclass1">
  <h1>Exemples :</h1>
  <p>Lorem ipsum dolor sit amet, et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.</p>
</div>
<div class="testclass2">
  <p>Elementum sagittis vitae et leo duis ut.</p>
</div>

.testclass1 p {
color: red;
}

.testclass2 p {
color: blue;

}

Résultat

Avec la combinaisons des classes, vous pouvez personnaliser au maximum.

id

L'attribut id fonctionne exactement pareil que class mais il doit être unique dans le code.

HTML

<p id="idP">
  Ceci est un texte avec un id 
</p>

CSS

#idP {
  color:red;
  font-size:15px;
}

Comme vous l'avez remarqué, la différence se trouve dans le CSS, il faut ajouter un # puis le nom de votre id en tant que sélecteur

Mais attention : l'id ne doit être présent qu'une seule fois dans le code

HTML

<div id="iddiv">
<p>
Ceci est un texte dans une div
</p>
</div>

<div id="iddiv2">
<p>
Ceci est un texte dans une autre div
</p>
</div>

CSS

#iddiv {
  height:250px;
  background-color: #091DB0;
}
#iddiv p {
  color: white;
}

#iddiv2 {
  height:150px;
  background: #EE6C0C;
}

#iddiv2 p {
  text-decoration: underline;
}

Résultats