{"id":5339,"date":"2024-08-27T16:09:50","date_gmt":"2024-08-27T16:09:50","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/rediger-css-pages-html-guide\/"},"modified":"2024-08-27T16:09:53","modified_gmt":"2024-08-27T16:09:53","slug":"rediger-css-pages-html-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/rediger-css-pages-html-guide\/","title":{"rendered":"3.2 R\u00e9diger du CSS dans vos Pages HTML : Guide"},"content":{"rendered":"Voici l&rsquo;article am\u00e9lior\u00e9 avec les modifications SEO demand\u00e9es :\n\n\n<p><strong>R\u00e9diger du CSS dans vos Pages HTML<\/strong> est essentiel pour styliser vos pages web et leur donner un aspect professionnel et attrayant. L&rsquo;int\u00e9gration du CSS permet de contr\u00f4ler la mise en forme, les couleurs, les marges et bien plus encore. Apprenons comment inclure et g\u00e9rer efficacement le CSS dans vos projets HTML gr\u00e2ce \u00e0 ce guide complet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>CSS pour vos Pages HTML<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586288014?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Int\u00e9grer le CSS dans vos pages HTML peut se faire de trois mani\u00e8res principales : en ligne, int\u00e9gr\u00e9 dans le header de votre HTML ou via un fichier CSS externe. Chacune de ces m\u00e9thodes a ses avantages et ses inconv\u00e9nients. D\u00e9couvrons ces options plus en d\u00e9tail.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">La M\u00e9thode CSS en Ligne<\/h3>\n\n\n\n<p>Le CSS en ligne est directement int\u00e9gr\u00e9 dans les balises HTML en utilisant l&rsquo;attribut <code>style<\/code>. Cette m\u00e9thode est simple et pratique pour de petites modifications ponctuelles. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;title&gt;Exemple de CSS en Ligne&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1 style=\"color: blue; text-align: center;\"&gt;Bienvenue sur mon site !&lt;\/h1&gt;\n    &lt;p style=\"font-size: 16px; text-align: justify;\"&gt;Ceci est un exemple de texte utilisant du CSS en ligne.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">La M\u00e9thode CSS Int\u00e9gr\u00e9<\/h3>\n\n\n\n<p>Le CSS int\u00e9gr\u00e9 se trouve dans un bloc <code>&lt;style&gt;<\/code> au sein de la section <code>&lt;head&gt;<\/code> de votre document HTML. Cette m\u00e9thode permet de d\u00e9finir des styles pour toute la page sans cr\u00e9er de fichier CSS s\u00e9par\u00e9. Voici comment faire :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;title&gt;Exemple de CSS Int\u00e9gr\u00e9&lt;\/title&gt;\n    &lt;style&gt;\n        body {\n            font-family: Arial, sans-serif;\n        }\n        h1 {\n            color: blue;\n            text-align: center;\n        }\n        p {\n            font-size: 16px;\n            text-align: justify;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Bienvenue sur mon site !&lt;\/h1&gt;\n    &lt;p&gt;Ceci est un exemple de texte utilisant du CSS int\u00e9gr\u00e9.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">La M\u00e9thode CSS Externe<\/h3>\n\n\n\n<p>Le CSS externe implique la cr\u00e9ation d&rsquo;un fichier CSS s\u00e9par\u00e9, qui est li\u00e9 \u00e0 votre document HTML avec une balise <code>&lt;link&gt;<\/code> dans la section <code>&lt;head&gt;<\/code> du fichier HTML. Cette m\u00e9thode est recommand\u00e9e pour des projets plus importants, o\u00f9 la s\u00e9paration du style et du contenu est essentielle. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;title&gt;Exemple de CSS Externe&lt;\/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Bienvenue sur mon site !&lt;\/h1&gt;\n    &lt;p&gt;Ceci est un exemple de texte utilisant du CSS externe.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Focus sur les S\u00e9lecteurs CSS<\/h3>\n\n\n\n<p>Les s\u00e9lecteurs CSS sont utilis\u00e9s pour cibler des \u00e9l\u00e9ments HTML sp\u00e9cifiques afin de leur appliquer des styles. Ils permettent une grande flexibilit\u00e9 et pr\u00e9cision dans la personnalisation des \u00e9l\u00e9ments de votre page. D\u00e9couvrons quelques types de s\u00e9lecteurs courants :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">S\u00e9lecteurs de Type<\/h4>\n\n\n\n<p>Ces s\u00e9lecteurs ciblent des balises HTML sp\u00e9cifiques, par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>h1 {\n    color: green;\n}\n\np {\n    font-size: 14px;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">S\u00e9lecteurs de Classe<\/h4>\n\n\n\n<p>Les s\u00e9lecteurs de classe ciblent tous les \u00e9l\u00e9ments ayant un attribut <code>class<\/code> sp\u00e9cifique. Utilisez un point (.) suivi du nom de la classe :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.texte-important {\n    color: red;\n    font-weight: bold;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">S\u00e9lecteurs d&rsquo;ID<\/h4>\n\n\n\n<p>Les s\u00e9lecteurs d&rsquo;ID ciblent un seul \u00e9l\u00e9ment ayant un attribut <code>id<\/code> sp\u00e9cifique. Utilisez un di\u00e8se (#) suivi du nom de l&rsquo;ID :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>#header {\n    background-color: #f1f1f1;\n    border-bottom: 2px solid #333;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Commentaires CSS<\/h3>\n\n\n\n<p>Les commentaires CSS sont des annotations dans le code qui ne sont pas interpr\u00e9t\u00e9es par le navigateur. Ils permettent de documenter votre code et de le rendre plus lisible. Utilisez des commentaires pour expliquer des sections de styles complexes ou pour rappeler des modifications futures :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/*\n    Exemple de commentaire CSS\n    Cela ne sera pas affich\u00e9 par le navigateur\n*\/\nbody {\n    font-family: Arial, sans-serif; \/* Commentaire en ligne *\/\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de CSS<\/h3>\n\n\n\n<p>Poursuivons par quelques exemples avanc\u00e9s qui montrent comment le CSS peut \u00eatre utilis\u00e9 pour cr\u00e9er des mises en page complexes et des animations. Voici comment cr\u00e9er une mise en page en grille simplifi\u00e9e:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Mise en Page Flexbox<\/h4>\n\n\n\n<p>Flexbox est un mod\u00e8le de mise en page unidimensionnelle qui permet de disposer les \u00e9l\u00e9ments enfants en colonne ou en rang\u00e9e, et de les ajuster automatiquement pour qu&rsquo;ils remplissent l&rsquo;espace disponible :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n    display: flex;\n    justify-content: space-between;\n}\n\n.item {\n    flex: 1;\n    margin: 10px;\n    padding: 20px;\n    background-color: #eaeaea;\n}<\/code><\/pre>\n\n\n\n<p>Et voici le HTML correspondant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"container\"&gt;\n    &lt;div class=\"item\"&gt;Item 1&lt;\/div&gt;\n    &lt;div class=\"item\"&gt;Item 2&lt;\/div&gt;\n    &lt;div class=\"item\"&gt;Item 3&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Animation avec CSS<\/h4>\n\n\n\n<p>Le CSS permet aussi de cr\u00e9er des animations simples sans avoir besoin de JavaScript. Voici comment cr\u00e9er une animation de rotation :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@keyframes rotation {\n    from {\n        transform: rotate(0deg);\n    }\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n.animated {\n    display: inline-block;\n    animation: rotation 2s infinite linear;\n}<\/code><\/pre>\n\n\n\n<p>Et le HTML correspondant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"animated\"&gt;\n    &#x1F680; <!-- Emoji de fus\u00e9e pour illustration -->\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La ma\u00eetrise du <strong>CSS dans vos Pages HTML<\/strong> est un atout pr\u00e9cieux pour tout d\u00e9veloppeur web. Que ce soit pour styliser des petits d\u00e9tails ou pour construire des interfaces utilisateur compl\u00e8tes, le CSS vous offre les outils n\u00e9cessaires pour donner vie \u00e0 vos designs. Continuez \u00e0 explorer les possibilit\u00e9s qu&rsquo;offre le CSS pour devenir un expert dans le domaine. Pour plus de tutoriels sur HTML et CSS, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">les fonctionnalit\u00e9s avanc\u00e9es de HTML5 et CSS3<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\nVoici quelques ajouts pour atteindre les 1200 mots et introduire les liens internes :\n\n\n<h3 class=\"wp-block-heading\">Pourquoi utiliser du CSS pour vos Pages HTML ?<\/h3>\n\n\n\n<p>L&rsquo;utilisation du CSS","protected":false},"excerpt":{"rendered":"<p>Voici l&rsquo;article am\u00e9lior\u00e9 avec les modifications SEO demand\u00e9es : R\u00e9diger du CSS dans vos Pages HTML est essentiel pour styliser vos pages web et leur&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2766,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5339","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5339"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5339\/revisions"}],"predecessor-version":[{"id":5340,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5339\/revisions\/5340"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2766"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}