Cette vidéo, de la formation HTML et CSS, présente la manière d’ajouter du style à une page HTML. Nous commençons à voir quelques propriétés CSS.
Bonjour et bienvenue dans cette vidéo dans laquelle nous allons commencer à aborder le CSS. Donc CSS pour Cascading Steel Sheets et en Français feuilles de styles en cascade. Donc le rôle du CSS va venir embellir notre HTML.
On va pouvoir y mettre de la couleur, faire de la mise en page, ce qui fait que notre HTML sera beaucoup plus agréable à voir qu’il n’était au départ. Pour cela nous allons voir qu’il existe trois méthodes pour mettre en place le CSS. Bien évidemment il y a une méthode que je vous recommande qui va être la plus utilisée et qui sera une méthode optimisée aussi par rapport aux deux premières que nous allons voir tout de suite.
Alors avant ça on va créer un fichier HTML comme d’habitude, que je vais nommer ici 06-style-page.html. Je vais faire mon petit point d’exclamation pour faire une structure de base et que je vais intituler mettre du style dans une page HTML. Voilà, je vais faire un petit affichage, retour automatique à la ligne, j’enregistre et on va pouvoir commencer à travailler sur un document propre. On va faire un petit paragraphe, donc p rentrer LOREM20. Voilà, donc juste un petit paragraphe histoire de commencer à agir en CSS sur ce paragraphe. Je vais enregistrer le fichier et puis on va commencer à ouvrir le navigateur avec Open Live Web Server. Voilà, donc là j’ai bien mon paragraphe et puis on va revenir ici pour mettre du style et on va déjà voir la première méthode qui consiste à mettre du style directement sur l’élément.
Donc là j’ai un paragraphe, je vais pouvoir mettre un attribut style et puis entre ces guillemets, style égal, je vais pouvoir mettre une propriété CSS, donc par exemple color, deux points. Là on voit qu’on a un certain nombre de couleurs, on peut mettre des couleurs comme ceci et mon texte va venir s’afficher en bleu. Donc j’enregistre, je regarde au niveau du navigateur et j’ai bien un texte en bleu.
Donc ça, c’est la première méthode d’appliquer du style CSS directement dans une balise HTML. Si je veux rajouter d’autres propriétés, puisqu’on n’est pas limité à une couleur bleue, je pourrais très bien mettre une autre propriété pour que mon texte soit un petit peu plus grand, que la police soit un petit peu plus grande. Donc je vais séparer ces propriétés par un point virgule et je vais venir ici ajouter une propriété font-size, deux points, et là je vais indiquer 20 pixels par exemple.
Donc j’enregistre et je regarde dans le navigateur. Donc j’ai maintenant mon texte qui est un petit peu plus gros, donc avec 20 pixels, en taille de police et de couleur bleue. Donc ça, c’était la première méthode qui consiste donc à agir directement dans l’élément HTML.
Alors vous imaginez bien que si je fais un autre paragraphe et que je refais un autre paragraphe, vous imaginez bien que si je détermine dans ma charte graphique que tous les paragraphes doivent être de couleur bleue, ça va être plutôt compliqué de mettre style, égale, couleur bleue, etc. On va répéter ce style sur tous les paragraphes, ça va être long et fastidieux. Donc c’est une méthode qu’on ne va pas utiliser, puisque d’appliquer un style directement dans une balise, ça veut dire qu’il faudrait la recopier un peu partout, ça serait plutôt compliqué.
Cette méthode c’est vraiment à utiliser à un cas extrême, mais vraiment ce n’est pas ce que je vais recommander pour le moment. Donc comment on peut faire ça ? On peut appliquer une deuxième méthode, c’est-à-dire que là on va directement aller soit dans le head, soit même dans le body, on peut appliquer une balise style, comme ceci. Et à l’intérieur de cette balise style, je vais pouvoir dire que je veux que tous mes paragraphes soient de couleur bleue.
Alors comment on fait ça ? Tout simplement en mettant un P ici, et en ouvrant et en fermant une accolade. Et même chose, je vais pouvoir mettre une propriété color de point bleu, comme on l’a fait tout à l’heure, avec le point-virgule, et pareil, on va mettre une balise de caractère un peu plus rose, on va mettre 20 pixels. Donc de cette manière, je vais pouvoir rendre tous mes paragraphes de couleur bleue et de 20 pixels.
Donc si on constate dans le navigateur, on a bien nos deux paragraphes qui sont de couleur bleue et de 20 pixels. Donc là j’insiste aussi sur la présentation de votre code, on commence par mettre l’élément P, comme ceci, on ouvre une accolade, on vient fermer l’accolade, et après on va mettre nos propriétés. On sépare bien ces différentes propriétés par un point virgule, puisque si j’oubliais un point virgule, on n’aurait pas un affichage correct au niveau du navigateur.
Donc des fois il peut y avoir des petites erreurs, on n’a pas forcément le résultat attendu, parce qu’on aura oublié à un moment donné un point virgule. Donc, pensez-y à bien mettre le point virgule. Sachant que tout ça, bien évidemment, là c’est de la présentation pour que votre code soit lisible, tout ça pourrait tenir sur la même ligne aussi.
Donc ça, c’était la deuxième méthode. Là encore, c’est une méthode qui n’est pas forcément optimisée, dans la mesure où si votre site va comporter un certain nombre de pages, il va comporter plusieurs pages, et ça voudrait dire qu’à chaque fois, sur toutes les pages, il faudrait recopier l’ensemble des propriétés CSS, de manière à ce qu’on ait le résultat partout sur les pages. Et donc ça, ça serait plutôt compliqué.
Donc c’est pas la méthode non plus qu’on va retenir. On va pour ça faire un fichier externe, un seul et unique fichier, qu’on pourra lier à toutes les pages du projet, et comme ça les propriétés vont être définies sur ce fichier externe, et à chaque fois, dans nos pages HTML, il suffira de faire le lien vers ce fichier CSS. Alors comment on va faire ça ? Donc là pour l’instant j’ai tout réinitialisé, j’ai que du HTML, et je vais créer un fichier CSS à part.
Alors je vais venir ici, et je vais faire un nouveau fichier, que je vais appeler style.css. Donc là attention, l’extension, il faut mettre .css. Donc là j’ai maintenant deux onglets, je vais pouvoir d’un côté mettre mon HTML, et puis de l’autre faire mon style CSS. Donc là on va refaire la même chose, donc on a toujours notre balise P, et je vais remettre mes accolades, on veut que la couleur de point soit blue, je mets un petit point virgule, et puis font-size, on va mettre toujours pareil, pour qu’on puisse bien voir 20 pixels. Donc j’enregistre, et là pour le moment, il ne se passe rien, j’ai mon HTML, il ne se passe rien, tout ça parce que je n’ai pas encore lié ma feuille de style à mon document HTML.
Donc c’est ce qu’on va faire tout de suite, on va revenir au niveau du HTML, et puis toujours dans la balise red, on va mettre une balise link CSS, donc on va avoir l’attribut rel égale stylesheets, et à shref, c’est là qu’on va préciser le fichier. Donc en l’occurrence, là par défaut, il m’a bien mis un style.css, c’est ce que j’ai ici. Si vous avez nommé votre feuille de style avec un autre nom, il faudra bien préciser ici la feuille de style à laquelle faire le lien.
Maintenant j’enregistre mon fichier, et si je constate dans mon navigateur, j’ai bien cette fois mes paragraphes de couleur bleue avec une taille de police de 20 pixels. Donc ça c’est déjà la méthode évidemment qu’on va recommander, qu’il faudra pratiquer, puisque dès que vous allez créer une nouvelle page HTML pour votre projet, pour votre site, et bien vous aurez simplement cette ligne à rajouter avec la feuille de style correspondante, et puis là vous allez pouvoir ajouter un ensemble de propriétés de style pour vos pages HTML. Donc voilà pour déjà une première petite vidéo qui vous montre comment mettre en place un style dans une page HTML.
On a vu, on a commencé à voir quelques propriétés de couleur et de taille de police, et puis bien sûr je vous donne rendez-vous dans une prochaine vidéo pour aller plus loin en CSS.
