Vous avez vu dans des cours précédents comment utiliser des gabarits HTML-CSS pour personnaliser une page Web. Nous allons découvrir pendant ce cours un type de gabarit particulier, basé sur une feuille de style prête à l’usage : w3.css.
On nomme ce genre de feuille de style “un framework CSS”, ce qui pourrait être traduit par “une boîte à outils CSS”. En effet, tout repose sur un système de classes CSS pré-paramétrées que chacun utilise en fonction de ses besoins.
Il existe de nombreux frameworks CSS, le plus utilisé étant Bootstrap. Ce dernier peut d’ailleurs être pris en main en suivant les tutoriels publiés sur w3schools.com. Il en existe d’autres, moins utilisés, comme Pure CSS ou Butter Cake.
Le framework W3.CSS a été mis au point par les concepteurs du site w3schools.com. Ce site d’apprentissage des techniques fondamentales de la création de site utilise cette feuille de style.
Découvrez l’essentiel des possibilités offertes par W3.CSS en lisant la présentation des fonctionnalités du framework (en cliquant sur le visuel ci-dessus).
Naviguer sur le site w3schools.com
➜ Pour le bon déroulé de la formation, je vous recommande de vous familiariser avec la structure du site w3schools.com.
Ce site s’affiche par défaut en anglais… et c’est très bien ainsi. Si vous demandez une traduction en français, le code source utilisé sera traduit en français et les informations transmises seront alors erronées. Revenez à l’anglais pour afficher le code correctement.
➜ Ce site permet d’apprendre de manière autonome à utiliser plusieurs techniques de création de sites. Vous y trouverez notamment une rubrique intitulée HOW TO qui regroupe des tutoriels répondant à de nombreux besoins.
Le site w3schools.com publie également :
- la liste de toutes les balises HTML
- la liste de toutes les propriétés CSS
- la liste de toutes les classes de la feuille de style W3.CSS
- la liste de toutes les classes de Bootstrap-3
- la liste de toutes les classes de Bootstrap-4
Vous trouverez sur ce site des quizz et des exercices vous permettant de tester vos connaissances en HTML et CSS. Vous y découvrirez aussi des démos et des gabarits de sites réalisés en appui sur la feuille de style w3.css.
Les templates de w3schools.com
J’ ai rassemblé dans plusieurs dossiers les gabarits proposés par w3schools. Vous disposerez ainsi de plusieurs gabarits de portfolios et de quelques gabarits de sites à personnaliser selon vos besoins. Tous les gabarits proposés fonctionne avec la version 4 de w3css.
J’ai modifié les originaux à des degrés divers. J’ai parfois commenté le code et modifié une partie des contenus. Les gabarits de porfolios révisés sont les plus aboutis.
➜ Jetez un œil sur les différents modèles proposés mais ne vous attardez pas sur le code source. Vous travaillerez à partir de ces gabarits après vous êtes familiarisés avec W3.CSS. Je vous montre pour le moment ce vers quoi nous allons tendre au fil de la formation 😉
D’autres gabarits proposés par w3schools ont été rassemblés. Ils vous sont présentés sur ce site où vous pourrez passez facilement de l’un à l’autre. Pour les utiliser, vous devez les télécharger.
➜ Comme pour les portfolios révisés, ne vous attardez pas sur le code source des gabarits téléchargés. Prenez juste connaissance des modèles proposés et testez leur navigabilité et leur réactivité. Nous en utiliserons quelques uns pour les exercices qui vont suivre.
Le bac à sable de w3schools
On nomme “bac à sable” un espace de test, d’exercice et de tâtonnement. Le site w3schools.com dispose d’un outil très pratique pour s’exercer en ligne sans recourir à VS Code ou à tout autre éditeur de texte. Vous y accédez chaque fois que vous cliquez sur le bouton « Try It yourself » (« Essayez vous-même », en français).
Vous pouvez enregistrer vos exercices ou vos tests en cliquant sur la disquette, dans le menu de l’éditeur.
➜ Pour sauvegarder vos exercices vous devez créer un compte gratuit chez w3schools. Vous disposerez alors d’un espace d’archivage accessible avec vos identifiants.
Les classes CSS
Vous l’avez compris : la feuille de style w3.css est une grande liste de classes CSS. Tous les noms de classe commencent par w3-. Il est ainsi envisageable de les combiner avec d’autres classes ne commençant pas par w3-.
Pour vous rafraîchir la mémoire, vous pouvez consulter la page du site w3schools consacrée aux classes CSS.
➜ Lisez attentivement le cours proposé par w3schools.com en cliquant sur l’onglet W3.CSS colors et faites des modifications dans le code proposé dans les “Try It Yourself”.
➜ N’oubliez pas de cliquer sur le bouton “Run” pour voir le résultat de vos expérimentations.
Vous trouverez les 30 couleurs disponibles pour le texte à cette adresse :
➜ Vous constatez qu’il est possible d’associer plusieurs classes à un même élément HTML et de définir ainsi un style complexe pour l’élément sélectionné.
Les bibliothèques et les thèmes chromatiques
En plus des couleurs par défaut paramétrées dans la feuille de style w3.css, le site w3schools met à notre disposition de nombreuses bibliothèques de couleurs.
Chaque bibliothèque doit être appelée dans l’entête de la page Web (par un “link” approprié) afin que les couleurs choisies s’affichent correctement. Je vous détaille la marche à suivre un peu plus bas.
➜ Vous pouvez visualisez dans un même document quelques bibliothèques chromatiques regroupées. Les couleurs des années 2024 et 2025 complètent désormais ces biblothèques. Comme pour les couleurs par défaut, les classes correspondantes définissent à la fois la couleur du fond et une couleur de texte par défaut.
Nous disposons également de plusieurs thèmes chromatiques. Il s’agit d’une déclinaison monochrome d’une couleur par défaut, paramétrée sous forme de classes comprenant 10 nuances supplémentaires pour chaque couleur.
➜ Là aussi, je vous propose de visualiser dans un même document quelques thèmes chromatiques regroupés. Soyez attentif à la manière dont sont déclinés les noms de classes de chaque nuance.
Le d de d3 ou d4 correspond à la première lettre de l’anglais “dark”. Le l de l3 ou l4 (il s’agit bien d’un L minuscule et non d’un i majuscule…) correspond à la première lettre de l’anglais “light”.
➜ Modifiez l’appel du thème chromatique dans l’exercice proposé sur “Tryit Editor” et constatez le résultat de cette modification.
➜ Je vous propose d’effectuer l’exercice suivant : il s’agit, à partir du nouveau thème chromatique que vous avez choisi précédemment de modifier l’ordre d’affichage des nuances (le plus clair en bas et le plus foncé en haut.
➜ Pour la suite de cette formation je vous invite à utiliser un dossier “css” dans lequel se trouvent toutes les bibliothèques et tous les thèmes de couleurs proposées par w3schools (améliorés sur le plan des normes d’accessibilité). Les feuilles de style révisées sont placées dans les sous-dossiers « lib-colors » et “theme-colors”.
Remarque : il manque les couleurs ajoutées en 2025 à la version 5 de w3css ainsi que les bibliothèques des couleurs de 2024 et 2025. Vous pourrez les ajoutez vous-même pour compléter les ressources mises à votre disposition.
Utiliser les couleurs avec w3.css
Pour utiliser les bibliothèques ou les thèmes chromatiques dans une page Web, il est nécessaire d’appeler la feuille de style correspondante dans un <link>, au niveau du <head> (ou au dessus du body quand il n’y a pas de balises <head>).
Soit on choisit de les appeler depuis les serveurs de w3schools avec un lien du type :
<link rel="stylesheet" href="https://w3schools.com/lib/w3-colors-signal.css>
Soit on choisit d’utiliser le dossier “css” fourni dans ce cours et pour la même bibliothèque de couleurs on aura un lien du type :
<link rel="stylesheet" href="css/lib-colors/w3-colors-signal.css>
➜ Voir par exemple le code source de lib-colors-signal-w3css.htm
Personnaliser un gabarit de cv
Je vous propose maintenant de personnaliser le gabarit de CV que vous avez téléchargé en début de cours (avec les autres gabarits). Vous pouvez le télécharger seul à l’aide du bouton ci-dessous.
Utilisez le thème chromatique de votre choix, placez votre photo ou l’image qui vous semble la plus appropriée, adaptez les textes à votre parcours professionnel…
Changer les icônes utilisée sur le CV
Le gabarit de CV proposé utilise les icônes de la bibliothèque Font Awesome version 4.7 (notez bien ce numéro de version…).
Comme pour des feuilles de style ou des polices Google Fonts, Les icônes sont appelées depuis les serveurs de Font Awesome. Vous trouvez le lien d’appel des icônes dans le head du code source.
➜ Repérez dans le code HTML les endroits où sont utilisées des icônes (entre balises <i> et </i>. Pour les modifier, changez simplement le nom des icônes. Vous trouverez toutes les icônes disponibles dans cette version de Font Awesome sur le site https://fontawesome.com/v4.7.0/icons/ 😉
➜ Dans un gabarit basé sur w3.css, n’utilisez pas le code proposé sur le site de Font Awesome ! Modifiez juste le nom de l’icône dans la portion de code source concernée.
Activer les liens sur les petites icônes du footer
Pour les plus perfectionnistes d’entre vous va se poser le problème de l’activation des liens en relation avec les icônes de réseaux sociaux, en pied de CV. Voici ce que Sophie a expliqué à Éléonore à ce sujet :
C’est comme quand tu insères un lien pour aller vers un site internet et que tu dois cliquer sur un texte pour y aller, dans ce cas là tu tapes :
<a href="https://copiercollerdunomdusite.fr">texte qui va supporter le lien</a>Ça c’est la balise type.
Si tu ne veux pas que ce soit du texte cliquable mais plutôt une icône, il faut que tu « appelles » dans ta page l’icône (grâce à une feuille de style dédiée).
Ici les icônes sont déjà appelés (via une feuille de style fournie par le site FontAwesome.com et les classes qu’elle contient).
<i class="fa fa-linkedin w3-hover-opacity"></i>Du coup, il suffit juste de mettre l’icône à la place de « texte qui va supporter le lien », ce qui donne :
<a href="https://www.linkedin.com/in/sophie-rxxr-1a157a98/" target="_blank"><i class="fa fa-linkedin w3-hover-opacity"></i></a>Et bien sûr, tu mets un petit target= »_blank » (comme placé dans le lien que je viens de te montrer), pour que la fenêtre s’ouvre dans un nouvel onglet.
“Tout est dans le target !” a ajouté Sophie 😉
Grilles réactives avec w3.css
Quand vous aurez terminé de personnaliser le gabarit du CV, je vous invite à aller voir comment il est possible de rendre une page plus réactive (responsive) sur petits écrans.
La première solution proposée se trouve dans l’onglet W3.CSS responsive.
➜ Je vous propose un exercice, à faire en local, avec VS Code ou Phoenix Code.
Réalisations avec w3.css
W3.CSS est bien moins utilisé que Bootstrap. Il existe cependant plusieurs sites revendiquant leur appui sur cette boîte à outil assez simple à prendre en main. L’abondante documentation en ligne permet à des personnes autodidactes de produire des sites de qualité satisfaisante.
➜ Pour les trouver, avec Google ou Duckduckgo, saisissez entre guillemets “Made with w3css” ou “Powered by w3css ». Consultez à la fois les résultats “textes” et “images”.
En voici quelques sites réalisés avec w3.css :
- https://www.globesauter.fr/index.php
- http://www.grandpicguitars.com/#home
- http://www.sweeep.fr/
- http://www.peanut-scale.fr/index.html
- https://karstenskov.com/#about
- http://manianature.com/#home
Voici des cv réalisés avec w3.css :
Vous trouverez sur l’ancien support de cours une liste de sites réalisés avec w3.css. Quelques sites ne sont plus accessibles. D’autres ont évolué vers des présentations plus sophistiquées. Vous constaterez une nette prédominance de sites scientifiques.
W3.CSS et Bootstrap
Le framework CSS le plus utilisé est sans aucun doute Bootstrap. la courbe d’apprentissage de Bootstrap est cependant plus raide que celle de W3.CSS. Plusieurs articles comparent les 2 frameworks.
Le cours sur les frameworks d’Olivier Nocent, permet de se faire une idée des différences et des points communs entre les 2 boîtes à outils.
W3.CSS vs Bootstrap est un comparatif entre le ténor des frameworks CSS et le framework que vous venez de découvrir.