Bonjour, je suis assez novice et je voudrais comprendre pourquoi certaines personnes (tutos) mettent ceci

ex : <p class="exemple" id="exemple2">Test</p>

Et cible en CSS avec #exemple2 { color: red }

Alors qu'elles pourraient très bien mettre simplement p { color: red }, est-ce que c'est utile de mettre tout ça ou ça revient au même ?

merci

Koyuki Tanaka a écrit:

Salut, tout simplement car si t'applique ton css sur ton p, tout tes texte seront rouge

LogeenzUrstukut a écrit:

Bonjour, je suis assez novice et je voudrais comprendre pourquoi certaines personnes (tutos) mettent ceci

ex : <p class="exemple" id="exemple2">Test</p>

Et cible en CSS avec #exemple2 { color: red }

Alors qu'elles pourraient très bien mettre simplement p { color: red }, est-ce que c'est utile de mettre tout ça ou ça revient au même ?

merci

Salut !

Je vais diviser en 2 sujets :

Les classes

Les classes sont des attributs qu'on donne à des balises, pour les identifier. Plusieurs balises peuvent les posséder. Les classes servent, à quand je veux cibler plusieurs éléments. On pourrait donner comme exemple, des boites.

<div class="boite"></div>
<div class="boite"></div>
<div class="boite"></div>

Si je veux leur donner du style, je pourrai simplement faire :

.boite
{
    height: 50px;
    width: 50px;
    border: solid black 1px;
}

Ce qui rend le tout beaucoup plus facile

Les ID

Les ID sont des attributs qu'on donne à un seul élément. Ils servent à identifier quelque chose d'unique sur la page. Si tu veux un exemple dans la vie réelle. Tu peux regarder le bouton "répondre" sur lequel tu as cliqué pour poster ta question. On lui a attribué un ID spécial, pour pouvoir le customizer. On va reprendre avec l'exemple des boites. Si je veux que le block du milieu soit rouge, je donnerai un ID au div du milieu :

<div class="boite"></div>
<div class="boite" id="boite_du_milieu"></div>
<div class="boite"></div>

Et pour le CSS :

.boite
{
    height: 50px;
    width: 50px;
    border: solid black 1px;
}
#boite_du_milieu
{
    background-color: red;
}

La raison pour laquelle on utilise ces attributs, c'est que si on ne les identifies pas, le CSS s'appliquera à tout les balises de cette sorte ; Chose qu'on ne veut pas, car il y en a beaucoup de différents sur une page HTML. Si je n'avais pas mis d'ID sur ma boite du milieu, tout les div seraient rouge. Et imagine cela, sur une page HTML ou il y a des centaines de divs et d'autres balises.

J'espère que ça aura répondu à ta question.

Bonne journée

Oui ça a très bien répondu à ma question, merci à toi !

J'ai petit pb un tout petit peu HS :s :

Lorsque je met text-align: center, le texte se centre correctement, mais à l'insertion de display: inline-block, le texte retourne à son point de départ

LogeenzUrstukut a écrit:

Oui ça a très bien répondu à ma question, merci à toi !

J'ai petit pb un tout petit peu HS :s :

Lorsque je met text-align: center, le texte se centre correctement, mais à l'insertion de display: inline-block, le texte retourne à son point de départ

Re,

Tu iras te renseigner sur les différents display en CSS, ça répondra à ta question

Bonne journée

Bonsoir ce qui pourrais te donner pas mal de réponses c'est rhooomanu

https://www.emmanuelbeziat.com/blog/principes-du-css-poids-des-declarations/