Exercice 9/20
- Dans le fichier
index.html, ajoutez l'attributclassaux deux éléments HTML et donnez lui la valeur "bleu"; - Dans le fichier
stylesheet.css, ajoutez le sélecteur.bleuet attribuez la propriétécoloret sa valeurblue; - Cliquez sur soumettre ma réponse pour vérifier vos résultats;
Note :
Ce n'est pas le but de cet exercice, mais une solution plus simple aurait été d'utiliser le sélecteur body et de lui attribuer la propriété color: blue. Avec le principe de cascade, la règle CSS aurait été appliquée à tous les éléments enfants de body qui en auraient hérité par défaut.
Leçon 9/20
Le sélecteur **class** est utile quand vous souhaitez appliquer le même style à plusieurs éléments HTML différents. Plutôt que d'appliquer, en la répétant, la même règle aux différents sélecteurs, vous assignez une seule et même class aux éléments HTML concernés, puis définissez le style de cette class dans l'onglet CSS.
Les "class" sont assignées aux éléments HTML grâce à l'attribut class suivi du signe =, comme ceci :
‹h1 class="NomDeLaClass"›‹/h1› ‹p class="NomDeLaClass"›‹/p›
Dans le fichier .css, la class s'écrit comme ceci :
.NomDeLaClass {
color: red;
}
N'oubliez pas le point "." devant le nom de votre class.
Dans l'exemple ci-dessus, le titre h1 et le paragraphe p seront tous les deux en rouge.
111 Commentaires
-
natallia.simon-90
Bonjour,Je n'arrive pas a comprendre ou est le problème?le 23/03/2023 à 16h42
-
Patricio M Admin
Code OK
le 27/03/2023 à 11h52
-
louisauge-10
je recois un message d'erreur il vous manque la règle css pour la classe bleule 07/03/2023 à 11h31
-
Patricio M Admin
Louis, code correct de mon coté!
le 08/03/2023 à 08h01
-
Jocelyne Muller
bonjour: voici mon code .blue{ color: blue; } .blue{ color: blue; }, mon texte est bien assé en bleu mais ça me dit qu'il manque la règle css pour la classe bleu. quel est le problème?le 03/11/2022 à 19h52
-
Patricio M Admin
Code correcte :)
le 04/11/2022 à 09h16
-
massakimanu-8
J'ai réussi mon code. J'ai juste changé le nom de la classe en mettant "bleu" au lieu de "blue"le 16/03/2022 à 15h39
-
meriam Admin
N'hésitez pas à demander de l'aide si vous trouvez des problèmes dans les exercices suivants.Bon travail.
le 21/03/2022 à 15h07
-
massakimanu-8
.blue { color: blue; } Ceci est mon code mais je reçois le message suivant : Il vous manque la règle css pour la classe bluele 16/03/2022 à 15h15
-
meriam Admin
Bonjour, le nom de la classe doit être bleu.
le 21/03/2022 à 15h08
-
br.admette-75
Bonjour, où est mon erreur ?le 08/01/2022 à 09h06
-
meriam Admin
Bonjour, le nom de la classe demandée est bleu (doit être en miniscule)
le 10/01/2022 à 11h07
-
jonathangilard-54
Votre balise DOCTYPE est incorrecte. Avez-vous écrit ceci : <!DOCTYPE html> ? pourtant tout est okle 27/11/2021 à 16h57
-
meriam Admin
Bonjour, c'est un bug qui va être résolu . Merci pour votre compréhension.
le 28/11/2021 à 23h03
-
k.meuleau85-95
Bonjour je ne comprend pas mon erreur <h1 class=".bleu">Je suis un titre </h1> <p class=".bleu">Je suis un paragraphe.</p>le 21/11/2021 à 13h11
-
meriam Admin
Bonjour, au niveau de la balise h1, mettez uniquement la valeur de l'attribut class sans mettre le point "."
le 21/11/2021 à 22h44
-
meriam Admin
il faut écrire <h1 class="bleu"> sans ajouter le point.
le 21/11/2021 à 22h45
-
meriam Admin
le point qui précède le non de la classe doit être ajouté au niveau du fichier css.
le 21/11/2021 à 22h46
-
noahlebeau2005-25
je comprend pas mon erreurle 11/11/2021 à 12h08
-
meriam Admin
Bonjour, dans votre code je vois des balises inutiles, il suffit d'insérer l 'attribut class et la valeur demandée.
le 15/11/2021 à 10h47
-
maouchesami3-54
Bonsoir, depuis ce matin je rencontre un propbème étrange. Je ne peut plus soumettre le code. J'ai essayer avec un autre navigateur, j ai le mème résultat. Egalement plusieurs exercices précedent ont disparus et je ne peut pas les refairent étant donner que le bouton soumettre ne fonctionne plus nulle part. Précision: Quand je passe la souris sur le bouton soumettre, reset ou activer JavaScript le lien en bas a gauche ne s affiche pas. Je ne sais si le problème viens de mon coté, merci bien.le 26/03/2021 à 19h39
-
meriam Admin
Bonjour, le bouton fonctionne correctement.
le 28/03/2021 à 20h15
-
Aurélie Gendre
J'ai éteint mon ordinateur pour voir si cela change quelque chose au message d'erreur suivant :"Votre script a mis trop de temps à s'exécuter, auriez-vous une boucle infinie ?". Cela n'a rien changé et cela m'empêche d'avancer dans mon travail. Si vous avez une solution, merci d'avance !!le 25/03/2021 à 15h23
-
meriam Admin
Bonjour, essayez de cliquer une autre sur reset et refaites l'exo? tout en sachant que votre code est correct.
le 25/03/2021 à 16h40
-
loutchay-74
Bonjour, dans le fichier CSS, je ne vois pas ce qui cloche. Dès que je soumets: Il vous manque la règle css pour la classe bleu.le 09/08/2020 à 14h45
-
meriam Admin
Bonjour , le nom de la classe doit être bleu et non blue (il faut respecter les valeurs données).
le 10/08/2020 à 07h06
-
edwrolie-17
ca y est j'ai compris mon erreur et corrigé grace à vos commentaires.le 16/05/2020 à 21h21
-
sayks.inpanya-46
le code c'est: <h1 class="bleu"> je suis un titre ></h1>le 02/12/2019 à 08h03
-
benedictenicolas1964-73
bonsoir, c'était subtile...le 04/11/2019 à 19h10
Commentaires les mieux notés