Cette vidéo, de la formation HTML et CSS, présente la manière de cibler les éléments HTML à l’aide de sélecteurs. Les balises sont ciblées par élément, class ou identifiant.
>> Les propriétés de mise en forme du texte
Bonjour à tous et bienvenue dans cette vidéo dans laquelle nous allons poursuivre notre formation HTML-CSS. Et donc plus précisément CSS puisque nous avons vu dans la vidéo précédente comment mettre en place une feuille de style, comment lier une feuille de style à une page HTML. Et nous allons voir dans cette vidéo où nous allons parler plus précisément des sélecteurs.
Nous allons voir comment cibler des éléments HTML afin d’y mettre des propriétés CSS. Alors on va commencer par créer un nouveau fichier comme d’habitude, donc 07-selecteur.html. Je vais créer ma structure de base et dans le titre je vais mettre les sélecteurs. Voilà.
Je fais mon petit retour à la ligne pour que vous puissiez bien voir le contenu du code. Alors cette fois, dans le cours précédent, on a vu qu’on avait créé une page CSS à ce niveau-là, une feuille de style. Alors maintenant, pour la suite des cours, je vais à chaque fois créer une feuille de style.
Donc je vais plutôt les placer dans un dossier CSS que nous allons créer maintenant, donc avec cette fois la deuxième icône ici. Je clique bien ici et je clique ici afin de créer le dossier CSS. Et dans ce dossier CSS, je vais commencer à y mettre mes feuilles de style.
Et donc là, je vais la nommer pareil que mon cours, donc je vais l’appeler aussi 07-selecteur ici. Je vais créer mon nouveau fichier, 07-selecteur.css. Donc maintenant, j’ai bien deux onglets, un onglet pour le HTML et un onglet pour le CSS. Donc pour mon HTML, on n’oubliera pas de lier notre feuille de style qu’on vient de créer.
Je vais venir ici dans le head et mettre la balise link CSS. Donc là, cette fois, je ne vais pas avoir le fichier style CSS. Je vais aller dans mon dossier CSS et là, il retrouve bien ma feuille de style, donc 07-selecteur.css. Et maintenant, j’ai bien ma feuille de style qui est liée à mon HTML.
Alors, on va parler des sélecteurs, le fait de cibler un élément ou plusieurs éléments pour pouvoir en mettre du style CSS. Alors pour ça, je vais d’abord faire quelques petits paragraphes, histoire d’avoir un peu de contenu. Je vais commencer d’ailleurs par mettre un h1, on va mettre un titre, les sélecteurs simples.
Ici, on va mettre un autre paragraphe et puis un troisième par exemple. Donc là, j’ai trois paragraphes, donc on va enregistrer. On va regarder aussi au niveau du navigateur, quel sera le rendu.
Donc pour le moment, rien de bien compliqué, un titre et trois paragraphes. Alors, je vais un petit peu zoomer, on verra un petit peu plus clair. Je reviens ici dans mon code et maintenant, je vais vouloir modifier la couleur de mes paragraphes.
Donc je vais venir sur ma feuille de style ici. Et comme on l’a vu, comme on veut cibler un ensemble d’éléments, on va cibler la balise P. Donc comme on l’a vu dans le cours précédent, on pouvait mettre la balise P et entre accolades, on va lui affecter une couleur bleue. Voilà, avec un point virgule.
Donc le fait de faire de cette manière, on va cibler ici tous les éléments, toutes les balises P. Et on va leur dire, ben voilà, maintenant tous les paragraphes vont être de couleur bleue. Donc si on vérifie au niveau du HTML, on a bien tous les paragraphes qui sont de couleur bleue. Donc ça, c’est la première méthode pour cibler avec une balise HTML.
Maintenant vous allez me dire, peut-être qu’il y a un paragraphe, on voudrait qu’il ait par exemple la couleur rouge. Alors comment on pourrait faire ? Et ben tout simplement, on va rajouter ici, on va dire le deuxième paragraphe, je souhaite qu’il soit de couleur rouge. Alors je vais me mettre ici, à l’intérieur de la balise et je vais rajouter l’attribut classe.
Et la classe ici, je vais la nommer, donc par exemple, rouge. Alors veillez quand même à faire attention lorsque vous nommez vos classes, à mettre un mot qui soit en rapport évidemment à ce que vous voulez faire. Et en plus, il ne faut pas qu’il y ait des accents, des espaces, etc.
Il faut vraiment que ça soit un mot de type variable en fait, en minuscule. Et puis on va pouvoir maintenant en modifier le CSS. Donc quand on veut modifier le CSS d’une classe, et ici on va écrire avec un point rouge.
Quand on met un point, ça signifie qu’ici il s’agit de la classe qui s’appelle rouge. Comme on l’a nommé dans le HTML. Et cette fois je vais faire une couleur red.
Voilà, j’enregistre et j’ai bien mon deuxième paragraphe de couleur rouge. Alors une autre manière de cibler un élément, ça sera avec l’identifiant. Donc on va prendre un troisième paragraphe, et on va rajouter cette fois-ci, ID égal vert.
Donc ici, il faudra faire attention, puisque avec un ID, cet ID devrait être unique, on devra l’utiliser pour un élément spécifique, il devra être unique. Autant les classes, on pourra mettre plusieurs classes pour différents éléments, mais l’ID devra être unique, c’est un petit peu la différence entre la classe et l’ID. Et d’ailleurs l’ID on l’utilisera plutôt peut-être pour du Javascript, quand on veut agir sur un élément précis, on l’utilisera plutôt pour ça.
Là en CSS, je vous recommande plutôt d’utiliser le ciblage par élément ou par classe. Donc au niveau du CSS, pour cibler l’ID, on mettra ici, on ne mettra pas un point, on mettra cette fois un dièse, et suivi du nom qu’on lui a donné. Pareil, en accolade, je vais lui mettre une propriété color green.
Et là si je vérifie, alors j’enregistre bien mon HTML également, et si je vérifie, j’ai bien mon troisième paragraphe qui est vert. Donc on a vu trois méthodes, le ciblage par élément, le ciblage par classe, qui se représente avec un point suivi du nom de la classe en CSS, et le ciblage par identifiant, par ID, avec un dièse suivi du nom en CSS. Alors on pourrait très bien, au niveau du titre, comme je le disais, on peut utiliser plusieurs fois la même classe, donc au niveau du titre, je pourrais très bien mettre la classe rouge.
Et si je vérifie à nouveau, j’ai bien mon titre en rouge, le deuxième paragraphe en rouge. Donc là il n’y a pas de problème, on peut utiliser les classes à différents endroits, à différents éléments. Au niveau de mon deuxième, je vais m’amuser à mettre, enfin plutôt, dans ce troisième élément, qui est ici avec un ID vert, si je mets une classe rouge, on vérifie, on s’aperçoit qu’il y a un ordre de priorité aussi, au niveau du CSS, c’est d’abord l’ID qui aura le poids le plus fort, puisqu’on a bien notre couleur verte, ensuite ce sera la classe, et ensuite ce sera l’élément.
Donc là si j’enlève par exemple l’ID qu’on a là, donc on avait bien l’ID en vert, si j’enlève maintenant l’ID, on a bien cette fois-ci le troisième paragraphe qui est rouge, et bien évidemment, si je n’ai plus de classe, il va être de couleur bleue, comme on l’avait au départ, puisque là il faut bien prendre conscience qu’on a un ordre de priorité, c’est d’abord l’ID, la classe, et puis le ciblage par élément. Donc voilà un petit peu comment cibler les éléments en HTML, on a revu un peu, pour l’instant on n’a pas été très loin dans les propriétés CSS, au fur et à mesure on va en apprendre des nouvelles, donc là vous avez vu la propriété couleur, la propriété font-size qu’on avait vu dans le cours précédent, pour augmenter ou réduire la taille de la police, et au fur et à mesure on va assimiler davantage de propriétés CSS, et pour les prochains cours je pense que je préparerai peut-être le nom du fichier HTML et puis le fichier CSS, mais dans la logique, si vous voulez bien suivre, vous faites comme j’ai fait à ce moment-là, vous créez une page HTML, vous liez votre page CSS qu’on aura positionnée et disposée dans notre dossier CSS. Écoutez, c’est tout pour cette vidéo, et puis je vous retrouve bientôt pour une prochaine vidéo.
À bientôt !
