{"id":3168,"date":"2020-11-09T17:07:12","date_gmt":"2020-11-09T16:07:12","guid":{"rendered":"http:\/\/graphizm.fr\/greta\/?p=3168"},"modified":"2026-01-04T22:24:06","modified_gmt":"2026-01-04T21:24:06","slug":"familiarisation-avec-w3css","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/fcs\/familiarisation-avec-w3css\/","title":{"rendered":"Se familiariser avec W3.CSS"},"content":{"rendered":"\n<p class=\"has-subtle-background-background-color has-background\">Vous avez vu dans des cours pr\u00e9c\u00e9dents comment utiliser des gabarits HTML-CSS pour personnaliser une page Web. <strong>Nous allons d\u00e9couvrir pendant ce cours un type de gabarit particulier, bas\u00e9 sur une feuille de style pr\u00eate \u00e0 l&rsquo;usage&nbsp;: w3.css<\/strong>.<\/p>\n\n\n\n<p>On nomme ce genre de feuille de style \u201c<strong>un framework CSS<\/strong>\u201d, ce qui pourrait \u00eatre traduit par \u201c<strong>une bo\u00eete \u00e0 outils CSS<\/strong>\u201d. En effet, tout repose sur un syst\u00e8me de classes CSS pr\u00e9-param\u00e9tr\u00e9es que chacun utilise en fonction de ses besoins.<\/p>\n\n\n\n<p>Il existe de <strong>nombreux frameworks CSS, le plus utilis\u00e9 \u00e9tant Bootstrap<\/strong>. Ce dernier peut d&rsquo;ailleurs \u00eatre pris en main en suivant les tutoriels publi\u00e9s sur <a href=\"https:\/\/www.w3schools.com\/bootstrap\/bootstrap_ver.asp\" target=\"_blank\" rel=\"noreferrer noopener\">w3schools.com<\/a>. Il en existe d&rsquo;autres, moins utilis\u00e9s, comme <a href=\"https:\/\/pure-css.github.io\">Pure CSS<\/a> ou <a href=\"https:\/\/getbuttercake.com\">Butter Cake<\/a>.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Le framework W3.CSS a \u00e9t\u00e9 mis au point par <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/about\/\" target=\"_blank\">les concepteurs du site w3schools.com<\/a>. Ce site d&rsquo;apprentissage des techniques fondamentales de la cr\u00e9ation de site utilise cette feuille de style.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/w3css\/gabarits-divers-w3css\/presentation_fonctionnalites_w3css\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/framework_w3_css-1024x512.jpg\" alt=\"\" class=\"wp-image-5104\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/framework_w3_css-1024x512.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/framework_w3_css-600x300.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/framework_w3_css-768x384.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/framework_w3_css-1200x600.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/framework_w3_css.jpg 1423w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-accent-background-color has-background\">D\u00e9couvrez l&rsquo;essentiel des possibilit\u00e9s offertes par W3.CSS en lisant la <strong>pr\u00e9sentation des fonctionnalit\u00e9s du framework<\/strong> (en cliquant sur le visuel ci-dessus).<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6b6b6b;color:#6b6b6b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6b6b6b;color:#6b6b6b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/familiarisation-avec-w3css\/#Naviguer_sur_le_site_w3schoolscom\" >Naviguer sur le site w3schools.com<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/familiarisation-avec-w3css\/#Les_templates_de_w3schoolscom\" >Les templates de w3schools.com<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/familiarisation-avec-w3css\/#Le_bac_a_sable_de_w3schools\" >Le bac \u00e0 sable de w3schools<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/familiarisation-avec-w3css\/#Les_classes_CSS\" >Les classes CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/familiarisation-avec-w3css\/#Les_bibliotheques_et_les_themes_chromatiques\" >Les biblioth\u00e8ques et les th\u00e8mes chromatiques<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/familiarisation-avec-w3css\/#Utiliser_les_couleurs_avec_w3css\" >Utiliser les couleurs avec w3.css<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/familiarisation-avec-w3css\/#Personnaliser_un_gabarit_de_cv\" >Personnaliser un gabarit de cv<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/familiarisation-avec-w3css\/#Activer_les_liens_sur_les_petites_icones_du_footer\" >Activer les liens sur les petites ic\u00f4nes du footer<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/familiarisation-avec-w3css\/#Grilles_reactives_avec_w3css\" >Grilles r\u00e9actives avec w3.css<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/familiarisation-avec-w3css\/#Realisations_avec_w3css\" >R\u00e9alisations avec w3.css<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/familiarisation-avec-w3css\/#W3CSS_et_Bootstrap\" >W3.CSS et Bootstrap<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Naviguer_sur_le_site_w3schoolscom\"><\/span>Naviguer sur le site w3schools.com<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Pour le bon d\u00e9roul\u00e9 de la formation, <strong>je vous recommande de vous familiariser avec la structure du site w3schools.com<\/strong>.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">Ce site s&rsquo;affiche par d\u00e9faut en anglais&#8230; et c&rsquo;est tr\u00e8s bien ainsi. Si vous demandez une traduction en fran\u00e7ais, le code source utilis\u00e9 sera traduit en fran\u00e7ais et les informations transmises seront alors erron\u00e9es. Revenez \u00e0 l&rsquo;anglais pour afficher le code correctement.<\/p>\n\n\n\n<p>\u279c Ce site permet d&rsquo;apprendre de mani\u00e8re autonome \u00e0 utiliser plusieurs techniques de cr\u00e9ation de sites. Vous y trouverez notamment <strong>une rubrique intitul\u00e9e <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/howto\/default.asp\" target=\"_blank\">HOW TO<\/a> <\/strong>qui regroupe des tutoriels r\u00e9pondant \u00e0 de nombreux besoins.<\/p>\n\n\n\n<p>Le site <strong>w3schools.com<\/strong> publie \u00e9galement&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3schools.com\/tags\/default.asp\" target=\"_blank\" rel=\"noreferrer noopener\">la liste de toutes les balises HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/cssref\/default.asp\" target=\"_blank\" rel=\"noreferrer noopener\">la liste de toutes les propri\u00e9t\u00e9s CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/w3css\/w3css_references.asp\" target=\"_blank\" rel=\"noreferrer noopener\">la liste de toutes les classes de la feuille de style W3.CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/bootstrap\/bootstrap_ref_all_classes.asp\" target=\"_blank\" rel=\"noreferrer noopener\">la liste de toutes les classes de Bootstrap-3<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/bootstrap4\/bootstrap_ref_all_classes.asp\" target=\"_blank\" rel=\"noreferrer noopener\">la liste de toutes les classes de Bootstrap-4<\/a><\/li>\n<\/ul>\n\n\n\n<p>Vous trouverez sur ce site <strong>des quizz et des exercices<\/strong> vous permettant de tester vos connaissances en HTML et CSS. Vous y d\u00e9couvrirez aussi <strong>des d\u00e9mos et des gabarits de sites <\/strong>r\u00e9alis\u00e9s en appui sur la feuille de style w3.css.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3schools.com\/html\/html_quiz.asp\" target=\"_blank\" rel=\"noreferrer noopener\">quizz HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/html\/html_exercises.asp\" target=\"_blank\" rel=\"noreferrer noopener\">exercices HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/css\/css_quiz.asp\" target=\"_blank\" rel=\"noreferrer noopener\">quizz CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/css\/css_exercises.asp\" target=\"_blank\" rel=\"noreferrer noopener\">exercices CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/w3css\/w3css_templates.asp\" target=\"_blank\" rel=\"noreferrer noopener\">d\u00e9mos W3CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/w3css\/w3css_templates.asp\" target=\"_blank\" rel=\"noreferrer noopener\">gabarits (ou templates) W3CSS<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_templates_de_w3schoolscom\"><\/span>Les templates de w3schools.com<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">J&rsquo; ai rassembl\u00e9 dans plusieurs dossiers les gabarits propos\u00e9s par w3schools. Vous disposerez ainsi de plusieurs gabarits de portfolios et de quelques gabarits de sites \u00e0 personnaliser selon vos besoins. Tous les gabarits propos\u00e9s fonctionne avec la version 4 de w3css.<\/p>\n\n\n\n<p>J&rsquo;ai modifi\u00e9 les originaux \u00e0 des degr\u00e9s divers. J&rsquo;ai parfois comment\u00e9 le code et modifi\u00e9 une partie des contenus. <strong>Les gabarits de porfolios r\u00e9vis\u00e9s sont les plus aboutis<\/strong>. <\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c Jetez un \u0153il sur les diff\u00e9rents mod\u00e8les propos\u00e9s mais <strong>ne vous attardez pas sur le code source<\/strong>. Vous travaillerez \u00e0 partir de ces gabarits apr\u00e8s vous \u00eates familiaris\u00e9s avec W3.CSS. Je vous montre pour le moment ce vers quoi nous allons tendre au fil de la formation \ud83d\ude09<\/p>\n\n\n\n<div class=\"wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-499968f5 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"http:\/\/graphizm.fr\/w3css\/gabarits-portfolios-revised-w3css.zip\" style=\"border-radius:10px\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger les gabarits de porfolios r\u00e9vis\u00e9s<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><strong>D&rsquo;autres gabarits propos\u00e9s par w3schools<\/strong> ont \u00e9t\u00e9 rassembl\u00e9s. Ils vous sont <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/w3css\/gabarits-divers-w3css\" target=\"_blank\"><strong>pr\u00e9sent\u00e9s sur ce site<\/strong><\/a> o\u00f9 vous pourrez passez facilement de l&rsquo;un \u00e0 l&rsquo;autre. Pour les utiliser, vous devez les t\u00e9l\u00e9charger.<\/p>\n\n\n\n<p>\u279c <span style=\"color: #2776d7;\" class=\"ugb-highlight\"><strong>Comme pour les portfolios r\u00e9vis\u00e9s, ne vous attardez pas sur le code source des gabarits t\u00e9l\u00e9charg\u00e9s.<\/strong><\/span> <strong>Prenez juste connaissance des mod\u00e8les propos\u00e9s et testez leur navigabilit\u00e9 et leur r\u00e9activit\u00e9.<\/strong> Nous en utiliserons quelques uns pour les exercices qui vont suivre.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-499968f5 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"http:\/\/graphizm.fr\/w3css\/gabarits-divers-w3css.zip\" style=\"border-radius:10px\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger les gabarits divers<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Le_bac_a_sable_de_w3schools\"><\/span>Le bac \u00e0 sable de w3schools<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>On nomme \u201cbac \u00e0 sable\u201d un espace de test, d&rsquo;exercice et de t\u00e2tonnement. Le site w3schools.com dispose d&rsquo;un outil tr\u00e8s pratique pour s&rsquo;exercer en ligne sans recourir \u00e0 VS Code ou \u00e0 tout autre \u00e9diteur de texte.<strong> Vous y acc\u00e9dez chaque fois que vous cliquez sur le bouton \u00ab\u00a0Try It yourself\u00a0\u00bb (\u00ab\u00a0Essayez vous-m\u00eame\u00a0\u00bb, en fran\u00e7ais).<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/tryit_Editor_v3_6.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/tryit_Editor_v3_6-1024x543.jpg\" alt=\"\" class=\"wp-image-3187\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/tryit_Editor_v3_6-1024x543.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/tryit_Editor_v3_6-600x318.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/tryit_Editor_v3_6-768x407.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/tryit_Editor_v3_6-1200x637.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/tryit_Editor_v3_6.jpg 1378w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Vous pouvez enregistrer vos exercices ou vos tests en cliquant sur la disquette, dans le menu de l&rsquo;\u00e9diteur.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Pour sauvegarder vos exercices <strong>vous devez cr\u00e9er un compte gratuit chez w3schools<\/strong>. Vous disposerez alors d&rsquo;un espace d&rsquo;archivage accessible avec vos identifiants.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_classes_CSS\"><\/span>Les classes CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Vous l&rsquo;avez compris&nbsp;: la feuille de style w3.css est une grande liste de classes CSS. Tous les noms de classe commencent par <code>w3-<\/code>. Il est ainsi envisageable de les combiner avec d&rsquo;autres classes ne commen\u00e7ant pas par <code>w3-<\/code>.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Pour vous rafra\u00eechir la m\u00e9moire, vous pouvez consulter la <a href=\"https:\/\/www.w3schools.com\/cssref\/sel_class.asp\" target=\"_blank\" rel=\"noreferrer noopener\">page du site w3schools consacr\u00e9e aux classes CSS<\/a>.<\/p>\n\n\n\n<p class=\"has-background-color has-secondary-background-color has-text-color has-background\">\u279c Lisez attentivement le cours propos\u00e9 par w3schools.com en cliquant sur l&rsquo;onglet <a href=\"https:\/\/www.w3schools.com\/w3css\/w3css_colors.asp\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>W3.CSS colors<\/strong><\/a> et faites des modifications dans le code propos\u00e9 dans les \u201cTry It Yourself\u201d.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c  N&rsquo;oubliez pas de <strong>cliquer sur le bouton \u201cRun\u201d<\/strong> pour voir le r\u00e9sultat de vos exp\u00e9rimentations.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><\/ul>\n\n\n\n<p>Vous trouverez <strong>les 30 couleurs disponibles pour le texte<\/strong> \u00e0 cette adresse&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3schools.com\/w3css\/w3css_references.asp#textcolor\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.w3schools.com\/w3css\/w3css_references.asp#textcolor<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"has-secondary-background-color has-background\">\u279c Vous constatez qu&rsquo;<strong>il est possible d&rsquo;associer plusieurs classes \u00e0 un m\u00eame \u00e9l\u00e9ment HTML<\/strong> et de d\u00e9finir ainsi un style complexe pour l&rsquo;\u00e9l\u00e9ment s\u00e9lectionn\u00e9.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_bibliotheques_et_les_themes_chromatiques\"><\/span>Les biblioth\u00e8ques et les th\u00e8mes chromatiques<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>En plus des couleurs par d\u00e9faut param\u00e9tr\u00e9es dans la feuille de style w3.css, le site w3schools met \u00e0 notre disposition de nombreuses <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/w3css\/w3css_color_libraries.asp\" target=\"_blank\">biblioth\u00e8ques de couleurs<\/a>.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\"><strong>Chaque biblioth\u00e8que doit \u00eatre appel\u00e9e dans l&rsquo;ent\u00eate de la page Web<\/strong> (par un \u201clink\u201d appropri\u00e9) afin que les couleurs choisies s&rsquo;affichent correctement. Je vous d\u00e9taille la marche \u00e0 suivre un peu plus bas.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Vous pouvez visualisez dans un m\u00eame document quelques <a href=\"https:\/\/graphizm.fr\/w3css\/couleurs-w3css\/\" target=\"_blank\" rel=\"noreferrer noopener\">biblioth\u00e8ques chromatiques regroup\u00e9es<\/a>. Les couleurs des ann\u00e9es 2024 et 2025 compl\u00e8tent d\u00e9sormais ces bibloth\u00e8ques. Comme pour les couleurs par d\u00e9faut, <strong>les classes correspondantes d\u00e9finissent \u00e0 la fois la couleur du fond et une couleur de texte par d\u00e9faut<\/strong>.<\/p>\n\n\n\n<p>Nous disposons \u00e9galement de plusieurs <a href=\"https:\/\/www.w3schools.com\/w3css\/w3css_color_themes.asp\" target=\"_blank\" rel=\"noreferrer noopener\">th\u00e8mes chromatiques<\/a>. Il s&rsquo;agit d&rsquo;une d\u00e9clinaison monochrome d&rsquo;une couleur par d\u00e9faut, param\u00e9tr\u00e9e sous forme de classes comprenant 10 nuances suppl\u00e9mentaires pour chaque couleur.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c L\u00e0 aussi, je vous propose de visualiser dans un m\u00eame document quelques <a href=\"http:\/\/graphizm.fr\/w3css\/themes-w3css\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">th\u00e8mes chromatiques regroup\u00e9s<\/a>. Soyez attentif \u00e0 la mani\u00e8re dont sont d\u00e9clin\u00e9s les noms de classes de chaque nuance.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/w3css\/themes-w3css\/theme-green.html\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"525\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/theme_green_w3css-1024x525.jpg\" alt=\"\" class=\"wp-image-5124\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/theme_green_w3css-1024x525.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/theme_green_w3css-600x308.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/theme_green_w3css-768x394.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/theme_green_w3css-1200x616.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/05\/theme_green_w3css.jpg 1421w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-accent-background-color has-background\">Le d de d3 ou d4 correspond \u00e0 la premi\u00e8re lettre de l&rsquo;anglais \u201cdark\u201d. Le l de l3 ou l4 (il s&rsquo;agit bien d&rsquo;un L minuscule et non d&rsquo;un i majuscule&#8230;) correspond \u00e0 la premi\u00e8re lettre de l&rsquo;anglais \u201clight\u201d.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c <strong>Modifiez l&rsquo;appel du th\u00e8me chromatique dans l&rsquo;exercice <\/strong> propos\u00e9 sur \u201cTryit Editor\u201d et constatez le r\u00e9sultat de cette modification.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3schools.com\/w3css\/tryit.asp?filename=tryw3css_theme_indigo\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.w3schools.com\/w3css\/tryit.asp?filename=tryw3css_theme_indigo<\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/tryit_Editor_exo_couleurs-03.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"521\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/tryit_Editor_exo_couleurs-03-1024x521.jpg\" alt=\"\" class=\"wp-image-3297\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/tryit_Editor_exo_couleurs-03-1024x521.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/tryit_Editor_exo_couleurs-03-600x305.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/tryit_Editor_exo_couleurs-03-768x391.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/tryit_Editor_exo_couleurs-03-1200x610.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/tryit_Editor_exo_couleurs-03.jpg 1378w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Je vous propose d&rsquo;effectuer l&rsquo;exercice suivant&nbsp;: <strong>il s&rsquo;agit, \u00e0 partir du nouveau th\u00e8me chromatique que vous avez choisi pr\u00e9c\u00e9demment de modifier l&rsquo;ordre d&rsquo;affichage des nuances (le plus clair en bas et le plus fonc\u00e9 en haut.<\/strong><\/p>\n\n\n\n<p class=\"has-secondary-background-color has-background\">\u279c Pour la suite de cette formation <strong>je vous invite \u00e0 utiliser un dossier \u201ccss\u201d dans lequel se trouvent toutes les biblioth\u00e8ques et tous les th\u00e8mes de couleurs<\/strong> propos\u00e9es par w3schools (am\u00e9lior\u00e9s sur le plan des normes d&rsquo;accessibilit\u00e9). Les feuilles de style r\u00e9vis\u00e9es sont plac\u00e9es dans les sous-dossiers \u00ab\u00a0lib-colors\u00a0\u00bb et \u201ctheme-colors\u201d.<\/p>\n\n\n\n<p>Remarque&nbsp;: il manque les couleurs ajout\u00e9es en 2025 \u00e0 la version 5 de w3css ainsi que les biblioth\u00e8ques des couleurs de 2024 et 2025. Vous pourrez les ajoutez vous-m\u00eame pour compl\u00e9ter les ressources mises \u00e0 votre disposition.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-499968f5 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"http:\/\/graphizm.fr\/w3css\/css.zip\" style=\"border-radius:10px\" target=\"_blank\" rel=\"noreferrer noopener\">t\u00e9l\u00e9charger le dossier CSS complet<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_les_couleurs_avec_w3css\"><\/span>Utiliser les couleurs avec w3.css<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Pour utiliser les biblioth\u00e8ques ou les th\u00e8mes chromatiques dans une page Web, il est n\u00e9cessaire d&rsquo;<strong>appeler la feuille de style correspondante dans un <code>&lt;link&gt;<\/code><\/strong>, au niveau du <code>&lt;head&gt;<\/code> (ou au dessus du body quand il n&rsquo;y a pas de balises <code>&lt;head&gt;<\/code>).<\/p>\n\n\n\n<p>Soit on choisit de les appeler depuis les serveurs de w3schools avec un lien du type&nbsp;:<\/p>\n\n\n\n<p><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/w3schools.com\/lib\/w3-colors-signal.css&gt;<\/code><\/p>\n\n\n\n<p>Soit on choisit d&rsquo;utiliser le dossier \u201ccss\u201d fourni dans ce cours et pour la m\u00eame biblioth\u00e8que de couleurs on aura un lien du type&nbsp;:<\/p>\n\n\n\n<p><code>&lt;link rel=\"stylesheet\" href=\"css\/lib-colors\/w3-colors-signal.css&gt;<\/code><\/p>\n\n\n\n<p>\u279c Voir par exemple le code source de <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/w3css\/couleurs-w3css\/nuanciers-w3css\/lib-colors-signal-w3css.html\" target=\"_blank\">lib-colors-signal-w3css.htm<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Personnaliser_un_gabarit_de_cv\"><\/span>Personnaliser un gabarit de cv<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Je vous propose maintenant de <strong>personnaliser le gabarit de CV que vous avez t\u00e9l\u00e9charg\u00e9 en d\u00e9but de cours<\/strong> (avec les autres gabarits). Vous pouvez le t\u00e9l\u00e9charger seul \u00e0 l&rsquo;aide du bouton ci-dessous.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-499968f5 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"http:\/\/graphizm.fr\/w3css\/site_cv_onepage_w3css.zip\" style=\"border-radius:10px\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger lE gabarit du CV<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"has-secondary-background-color has-background\"><strong>Utilisez le th\u00e8me chromatique de votre choix<\/strong>, placez votre photo ou l&rsquo;image qui vous semble la plus appropri\u00e9e, <strong>adaptez les textes \u00e0 votre parcours professionnel<\/strong>&#8230; <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Changer les ic\u00f4nes utilis\u00e9e sur le CV<\/h4>\n\n\n\n<p>Le gabarit de CV propos\u00e9 utilise les ic\u00f4nes de la biblioth\u00e8que <strong>Font Awesome version 4.7<\/strong> (notez bien ce num\u00e9ro de version&#8230;). <\/p>\n\n\n\n<p>Comme pour des feuilles de style ou des polices Google Fonts,<strong> Les ic\u00f4nes sont appel\u00e9es depuis les serveurs de Font Awesome<\/strong>. Vous trouvez le lien d&rsquo;appel des ic\u00f4nes dans le <code>head<\/code> du code source.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Rep\u00e9rez dans le code HTML les endroits o\u00f9 sont utilis\u00e9es des ic\u00f4nes (entre balises &lt;i&gt; et &lt;\/i&gt;. Pour les modifier, <strong>changez simplement le nom des ic\u00f4nes<\/strong>. Vous trouverez toutes les ic\u00f4nes disponibles dans cette version de Font Awesome sur le site <a rel=\"noreferrer noopener\" href=\"https:\/\/fontawesome.com\/v4.7.0\/icons\/\" target=\"_blank\">https:\/\/fontawesome.com\/v4.7.0\/icons\/<\/a> \ud83d\ude09<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c <strong>Dans un gabarit bas\u00e9 sur w3.css, n&rsquo;utilisez pas le code propos\u00e9 sur le site de Font Awesome&nbsp;!<\/strong> Modifiez juste le nom de l&rsquo;ic\u00f4ne dans la portion de code source concern\u00e9e.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Activer_les_liens_sur_les_petites_icones_du_footer\"><\/span>Activer les liens sur les petites ic\u00f4nes du footer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pour les plus perfectionnistes d&rsquo;entre vous va se poser le probl\u00e8me de l&rsquo;activation des liens en relation avec les ic\u00f4nes de r\u00e9seaux sociaux, en pied de CV. <strong>Voici ce que Sophie a expliqu\u00e9 \u00e0 \u00c9l\u00e9onore<\/strong> \u00e0 ce sujet&nbsp;:<\/p>\n\n\n\n<p><em>C&rsquo;est comme quand tu ins\u00e8res un lien pour aller vers un site internet et que tu dois cliquer sur un texte pour y aller, dans ce cas l\u00e0 tu tapes<\/em> :&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/copiercollerdunomdusite.fr\"&gt;texte qui va supporter le lien&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p><em>\u00c7a c&rsquo;est la balise type.<\/em> <\/p>\n\n\n\n<p><em>Si tu ne veux pas que ce soit du texte cliquable mais plut\u00f4t une ic\u00f4ne, il faut que tu \u00ab\u00a0appelles\u00a0\u00bb dans ta page l&rsquo;ic\u00f4ne (gr\u00e2ce \u00e0 une feuille de style d\u00e9di\u00e9e).<\/em><\/p>\n\n\n\n<p><em>Ici les ic\u00f4nes sont d\u00e9j\u00e0 appel\u00e9s<\/em> <em>(via une feuille de style fournie par le site FontAwesome.com et les classes qu&rsquo;elle contient)<\/em>. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;i class=\"fa fa-linkedin w3-hover-opacity\"&gt;&lt;\/i&gt;<\/code><\/pre>\n\n\n\n<p><em>Du coup, il suffit juste de mettre l&rsquo;ic\u00f4ne \u00e0 la place de \u00ab\u00a0texte qui va supporter le lien\u00a0\u00bb, ce qui donne&nbsp;:&nbsp;<\/em><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.linkedin.com\/in\/sophie-rxxr-1a157a98\/\" target=\"_blank\"&gt;&lt;i class=\"fa fa-linkedin w3-hover-opacity\"&gt;&lt;\/i&gt;&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p><em>Et bien s\u00fbr, tu mets un petit&nbsp;<strong>target=\u00a0\u00bb_blank\u00a0\u00bb<\/strong>&nbsp;(comme plac\u00e9 dans le lien que je viens de te montrer), pour que la fen\u00eatre s&rsquo;ouvre dans un nouvel onglet<\/em>.<\/p>\n\n\n\n<p>\u201cTout est dans le target&nbsp;!\u201d a ajout\u00e9 Sophie \ud83d\ude09<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Grilles_reactives_avec_w3css\"><\/span>Grilles r\u00e9actives avec w3.css<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Quand vous aurez termin\u00e9 de personnaliser le gabarit du CV, je vous invite \u00e0 aller voir comment il est possible de rendre une page plus r\u00e9active (responsive) sur petits \u00e9crans.<\/p>\n\n\n\n<p><strong>La premi\u00e8re solution propos\u00e9e se trouve dans l&rsquo;onglet <a href=\"https:\/\/www.w3schools.com\/w3css\/w3css_responsive.asp\" target=\"_blank\" rel=\"noreferrer noopener\">W3.CSS responsive<\/a>.<\/strong><a href=\"http:\/\/graphizm.fr\/greta\/wp-admin\/edit.php?post_type=post\"><\/a><\/p>\n\n\n\n<p class=\"has-secondary-background-color has-background\">\u279c Je vous propose un exercice, \u00e0 faire en local, avec VS Code ou Phoenix Code.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-499968f5 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"http:\/\/graphizm.fr\/w3css\/exo-rangs-et-colonnes.zip\" style=\"border-radius:10px\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger l\u2018eXERCICE<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Realisations_avec_w3css\"><\/span>R\u00e9alisations avec w3.css<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>W3.CSS est bien moins utilis\u00e9 que Bootstrap. Il existe cependant plusieurs sites revendiquant leur appui sur cette bo\u00eete \u00e0 outil assez simple \u00e0 prendre en main. <strong>L&rsquo;abondante documentation en ligne permet \u00e0 des personnes autodidactes de produire des sites de qualit\u00e9 satisfaisante.<\/strong><\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Pour les trouver, avec Google ou Duckduckgo, saisissez entre guillemets \u201cMade with w3css\u201d ou \u201cPowered by w3css\u00a0\u00bb. Consultez \u00e0 la fois les r\u00e9sultats \u201ctextes\u201d et \u201cimages\u201d.<\/p>\n\n\n\n<p>En voici quelques <strong>sites r\u00e9alis\u00e9s avec w3.css<\/strong> :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.globesauter.fr\/index.php\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.globesauter.fr\/index.php<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.grandpicguitars.com\/#home\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/www.grandpicguitars.com\/#home<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.sweeep.fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/www.sweeep.fr\/<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.peanut-scale.fr\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/www.peanut-scale.fr\/index.html<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/karstenskov.com\/#about\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/karstenskov.com\/#about<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/manianature.com\/#home\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/manianature.com\/#home<\/a><\/li>\n<\/ul>\n\n\n\n<p>Voici <strong>des cv<\/strong> r\u00e9alis\u00e9s avec w3.css&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/arunkumar413.github.io\/myresume\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/arunkumar413.github.io\/myresume\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rtwilson.info\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/rtwilson.info\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/guipedreira.com.br\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/guipedreira.com.br\/<\/a><\/li>\n<\/ul>\n\n\n\n<p><strong>Vous trouverez sur l&rsquo;ancien support de cours une liste de sites r\u00e9alis\u00e9s avec w3.css.<\/strong> Quelques sites ne sont plus accessibles. D&rsquo;autres ont \u00e9volu\u00e9 vers des pr\u00e9sentations plus sophistiqu\u00e9es. Vous constaterez une nette pr\u00e9dominance de sites scientifiques.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-499968f5 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"http:\/\/graphizm.fr\/w3css\/prendre-en-main-w3css.html\" style=\"border-radius:9px\" target=\"_blank\" rel=\"noreferrer noopener\">Ancien support de cours<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"W3CSS_et_Bootstrap\"><\/span>W3.CSS et Bootstrap<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Le framework CSS le plus utilis\u00e9 est sans aucun doute Bootstrap. la courbe d&rsquo;apprentissage de Bootstrap est cependant plus raide que celle de W3.CSS. Plusieurs articles comparent les 2 frameworks.<\/p>\n\n\n\n<p>Le <a rel=\"noreferrer noopener\" href=\"https:\/\/iut-info.univ-reims.fr\/users\/nocent\/web\/?section=15\" target=\"_blank\">cours sur les frameworks<\/a> d&rsquo;Olivier Nocent, permet de se faire une id\u00e9e des diff\u00e9rences et des points communs entre les 2 bo\u00eetes \u00e0 outils.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/blog.hubspot.com\/website\/w3-css-vs-bootstrap\" target=\"_blank\">W3.CSS vs Bootstrap<\/a> est un comparatif entre le t\u00e9nor des frameworks CSS et le framework que vous venez de d\u00e9couvrir.<\/p>","protected":false},"excerpt":{"rendered":"<p>Vous avez vu dans des cours pr\u00e9c\u00e9dents comment utiliser des gabarits HTML-CSS pour personnaliser une page Web. Nous allons d\u00e9couvrir pendant ce cours un type de gabarit particulier, bas\u00e9 sur une feuille de style pr\u00eate \u00e0 l&rsquo;usage&nbsp;: w3.css. On nomme ce genre de feuille de style \u201cun framework CSS\u201d, ce qui pourrait \u00eatre traduit par [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,16,12,26],"tags":[],"class_list":["post-3168","post","type-post","status-publish","format-standard","hentry","category-fcs","category-fcs2-cours","category-w3css","category-w3css-cours"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Vous avez vu dans des cours pr\u00e9c\u00e9dents comment utiliser des gabarits HTML-CSS pour personnaliser une page Web. Nous allons d\u00e9couvrir pendant ce cours un type de gabarit particulier, bas\u00e9 sur une feuille de style pr\u00eate \u00e0 l&rsquo;usage&nbsp;: w3.css. On nomme ce genre de feuille de style \u201cun framework CSS\u201d, ce qui pourrait \u00eatre traduit par \u201cune bo\u00eete \u00e0 outils CSS\u201d. En effet, tout repose sur un syst\u00e8me de classes CSS pr\u00e9-param\u00e9tr\u00e9es que chacun utilise en fonction de ses besoins. Il existe de nombreux frameworks CSS, le plus utilis\u00e9 \u00e9tant Bootstrap. Ce dernier peut d&rsquo;ailleurs \u00eatre pris en main en suivant\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/\" rel=\"category tag\">FCS<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/fcs2-cours\/\" rel=\"category tag\">FCS2-cours<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/w3css\/\" rel=\"category tag\">W3CSS<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/w3css\/w3css-cours\/\" rel=\"category tag\">W3CSS-cours<\/a>","author_info_v2":{"name":"Yves Goguely","url":"https:\/\/graphizm.fr\/greta\/author\/formationsgreta\/"},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/3168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/comments?post=3168"}],"version-history":[{"count":182,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/3168\/revisions"}],"predecessor-version":[{"id":7681,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/3168\/revisions\/7681"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=3168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=3168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=3168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}