Les feuilles de style CSS (1/15) - C'est quoi CSS et comment l'intégrer?

Bonjour à tous et bienvenue dans cette nouvelle série de leçons qui sera consacrée au langage CSS. CSS signifie Cascading Style Sheets ou bien feuille de style en cascade. Il s'agit d'un langage qui permet de styler le contenu intégré avec du HTML. On peut le considérer comme étant une extension du langage HTML. Il permet de formater le contenu qui est intégré. Le contenu HTML n'est rien d'autre que les objets que l'on peut voir sur le navigateur, comme les textes, les images, les hyperliens, les vidéos et bien d'autres objets. Ces objets-là sont intégrés généralement d'une manière basique sans aucun style et ils sont souvent alignés d'une manière verticale puisque la plupart des conteneurs HTML sont des balises bloc. Regardons cette page web. Elle est faite avec du HTML et du CSS. Tout le contenu que l'on peut voir devant Ça veut dire les images, les textes et tous les autres objets, ils ont été intégrés avec le langage HTML, mais stylés avec le CSS afin de pouvoir les positionner correctement et aussi les doter des couleurs convenables. Maintenant, essayons de démunir cette page du style CSS. Bon, ce qu'on va voir, c'est une opération simple. Par exemple, on va inspecter. Et là, dans le code, on va aller sur le head. Et la balise qui permet d'intégrer le style CSS, on va tout simplement La modifier légèrement pour que le style ne soit pas trouvé. Maintenant quand je valide, regardez la page à quoi elle ressemble. C'est une page démunie de tout style. Les objets ont été intégrés d'une manière basique sans le moindre style sauf les styles par défaut du HTML comme les hyperliens qui sont par défaut colorés en bleu et sont soulignés. Tous les autres contenus ont été intégrés d'une manière verticale puisque la plupart des conteneurs sont des balises de type Alors le rôle du CSS, c'est agir sur l'effet visuel de la page web. Il peut agir sur plusieurs aspects, à savoir les couleurs de fond et d'avant-plan, les dimensions, les bordures, les marges, le positionnement. Il peut même traiter des effets qui sont plus avancés comme les filtres, les animations, les transformations et le responsive design. Il y a plusieurs manières d'intégrer un style CSS à une page web. Prenons cet exemple. Il s'agit d'un code purement HTML. On va essayer de styler quelques objets qui ont été intégrés, comme par exemple la balise H1 que nous avons ici. Maintenant, si on exécute la page telle qu'elle est, on va voir le résultat qui ressemble à ça. Voilà, c'est le rendu par défaut du HTML sans la moindre couleur ni positionnement ni aucun effet spécial. Bon, maintenant pour le H1, on va par exemple essayer de le colorer. Alors il suffit de mettre ici style égal Et là on va mettre la syntaxe CSS. Par exemple color, on va mettre par exemple la couleur rouge. Voilà comme ça deux points red. Quand j'exécute, on va voir que le titre a changé de couleur. Alors là nous avons ce qu'on appelle un attribut de style local puisque le style que je vais déclarer ensuite est déclaré localement sur la balise concernée. Dans ce cas c'est la balise H1. Color deux points red ce qu'on appelle propriété et valeur. La propriété, c'est tout simplement ce que je veux formater. Ensuite, on met deux points et après, on met la valeur de cette propriété. Dans ce cas, la couleur, c'est rouge. Notez bien ici que nous avons deux points et non pas le symbole égal. Là encore, nous n'avons pas de simples quotes ou bien de doubles quotes. On met directement la valeur. Alors, cette première technique s'appelle un attribut de style local. Le problème avec cette technique, c'est que imaginons que nous avons d'autres balises H1 sur la même page. Afin de les doter de la même couleur, alors on imagine qu'il faut répéter ce style plusieurs fois. Et ça, c'est un travail qui est un petit peu fastidieux. C'est pourquoi il existe une autre technique qui est plus appropriée. Alors on va retirer ce style et maintenant on va aller dans le head, voilà, dans la balise head. Et là, on va ouvrir une nouvelle balise, c'est la balise style. Alors vous l'avez deviné, entre style et /style, il n'y a que la syntaxe CSS qui est autorisée. Si vous voulez mettre autre chose que du CSS, alors il faut que ce soit un commentaire. Le commentaire CSS c'est ça, voilà, slash étoile ensuite étoile slash. Et vous pouvez mettre n'importe quel texte même si ce n'est pas du CSS. De toute façon il sera ignoré par le navigateur. Maintenant revenons à notre balise H1. Bon tout d'abord il faut indiquer au navigateur que c'est la balise H1 qui est concernée par le style. Alors là je vais mettre H1 et j'ouvre des accolades. On appelle H1 un sélecteur de balise. Ce n'est pas une balise parce qu'il est diminué de chevrons. Ce n'est pas une balise, c'est un sélecteur de balises qui fait référence à la balise H1. Dans ce cas, le navigateur va chercher toutes les balises H1 du document courant et il va leur appliquer le style que je vais déclarer ensuite entre les accolades. Par exemple, color, maintenant je vais mettre green pour voir le changement. Et voilà, maintenant le titre a changé de couleur. Même chose pour la balise div. Par exemple, font-size, je vais mettre 32 points. Ça veut dire que je veux changer la taille de la police, le texte sera plus grand. Quand j'actualise, je vois que le texte de la balise div est devenu plus gros. Imaginez avec moi que vous disposez d'un site web qui contient beaucoup de pages web. Ces pages web vont généralement avoir le même design en gros, c'est-à-dire que les titres H1 seront les mêmes sur toutes les pages, les liens hypertextes, les bannières ou bien les menus principaux seront pratiquement stylés de la même manière. Alors on imagine que pour faire ceci, il faut répéter le style de la même façon sur toutes les pages. Et ça constitue un travail énorme, surtout si un jour vous décidez de changer un style, alors il faut reproduire le changement sur toutes les pages. Donc la troisième solution qui nous permet d'intégrer un style CSS, c'est ce qu'on appelle littéralement la feuille de style en cascade, d'où le nom de CSS ou bien Cascading Style Sheets. Dans ce cas, on va retirer la balise style et on va créer une feuille de style quelque part dans notre projet. Par exemple, là je vais créer un dossier que j'appellerai CSS. Et dans ce dossier CSS, je mettrai par exemple ma feuille de style que je vais créer avec mon éditeur. Alors nouveau, je vais l'enregistrer dans CSS, que je l'appellerai par exemple style.css. Alors maintenant, mon fichier qui s'appelle style.css, il est intégré dans le dossier qui s'appelle CSS. Et ça, c'est ma feuille de style en cascade que je vais appeler par la suite. Maintenant, je vais lier la feuille de style à mon document HTML. Pour faire ceci, on utilise la balise link avec les attributs classiques, à savoir rel, je mettrai ici stylesheet, type text/css, href, et là je vais mettre le chemin relatif ou bien absolu vers ma feuille de style. Alors là, il faut d'abord entrer dans le dossier CSS, ensuite on va mettre style.css. Notez que la balise link est une balise autofermante, c'est pourquoi j'ai mis espace puis un slash à la fin. Examinons maintenant ses attributs. rel ne permet pas d'intégrer que des feuilles de style, mais aussi d'autres objets comme par exemple les favicon. Alors pour indiquer au navigateur ce qu'il doit intégrer réellement, il faut spécifier stylesheet pour dire que dans ce cas il faut s'attendre à une feuille de style et pas autre chose. L'attribut type ne fait que confirmer l'attribut rel. Dans ce cas, l'attribut type contient ce qu'on appelle le type et le MIME. Le type, c'est du texte parce que généralement une feuille de style en cascade n'est rien d'autre qu'un fichier texte, mais c'est pas n'importe quel texte, c'est un texte CSS. Notez que cet attribut est facultatif, ça veut dire même si je le retire, il ne se passera vraiment rien parce qu'il y a l'attribut rel qui est obligatoire et qui indique bien au navigateur qu'il s'agit bien d'une feuille de style. Le troisième attribut, bien sûr, c'est le plus important, c'est lui qui va lier ma feuille de style avec mon document HTML. Maintenant, on va aller sur la feuille de style, on va écrire tout simplement le même contenu que la balise style. Par exemple, on va mettre h1 le sélecteur de balises. Ensuite on va mettre color par exemple green et là font-size par exemple 72 points. C'est très gros mais juste pour un test. La balise div par exemple background-color yellow. Voilà, je peux aussi agrandir le texte font-size par exemple 32 points. Actualisons maintenant notre page. Bon, on voit maintenant que les styles ils ont été intégré. Et cette troisième méthode, c'est la méthode la plus utilisée parce que tout simplement elle permet de centraliser tous les styles CSS et du coup toutes les pages de mon site web peuvent se partager ce même style. Alors toute modification ultérieure, il suffit de l'appliquer une seule fois et elle sera répartie sur toutes les pages. Alors récapitulons, pour intégrer un style CSS à notre page HTML, il existe 3 manières: soit un attribut de style local grâce à l'attribut style sur la balise concernée, Ou bien un style global à la page courante que l'on peut intégrer dans la balise style/style dans le head. Ou encore la troisième méthode qui est la plus utilisée et la meilleure d'ailleurs, c'est une feuille de style en cascade que l'on peut intégrer grâce à la balise link de la manière suivante. Maintenant que nous avons vu comment intégrer le style CSS, nous allons voir par la suite la syntaxe CSS et les différents effets visuels que l'on peut appliquer à notre page. Merci pour votre attention et à la vidéo prochaine.