{"id":44363,"date":"2026-01-07T16:09:45","date_gmt":"2026-01-07T16:09:45","guid":{"rendered":"\/fr\/tutoriels\/?p=44363"},"modified":"2026-01-07T16:38:06","modified_gmt":"2026-01-07T16:38:06","slug":"css-cheat-sheet","status":"publish","type":"post","link":"\/fr\/tutoriels\/css-cheat-sheet\/","title":{"rendered":"CSS cheat sheet &#8211; le PDF complet pour les d\u00e9butants et les professionnels"},"content":{"rendered":"<p class=\"wp-block-paragraph\">CSS est un langage de conception de sites web que vous pouvez utiliser pour ajouter un arri&egrave;re-plan, des couleurs et m&ecirc;me des transitions ou d&rsquo;autres &eacute;l&eacute;ments interactifs. Il vous aidera &eacute;galement &agrave; d&eacute;velopper un site web convivial pour les moteurs de recherche, l&eacute;ger et r&eacute;actif.<\/p><p class=\"wp-block-paragraph\">Cependant, il peut &ecirc;tre difficile de se familiariser avec les diff&eacute;rentes valeurs CSS, en particulier si vous &ecirc;tes novice dans ce langage.<\/p><p class=\"wp-block-paragraph\">Pour vous aider, nous avons cr&eacute;&eacute; un cheat sheet CSS complet qui vous sera utile pour tous vos projets de d&eacute;veloppement web. En outre, il y a 13 pages de d&eacute;clarations CSS et CSS3, ainsi que plusieurs propri&eacute;t&eacute;s possibles.<\/p><h2 class=\"wp-block-heading\" id=\"h-css-basics\">Les bases du CSS<\/h2><p class=\"wp-block-paragraph\">La feuille de style en cascade (Cascading Style Sheet ou CSS) est un langage de feuille de style qui dicte l&rsquo;apparence des &eacute;l&eacute;ments de votre site web. Vous pouvez contr&ocirc;ler la conception, la mise en page, la police et la couleur du contenu de votre site web en int&eacute;grant un fichier CSS dans votre document HTML.<\/p><p class=\"wp-block-paragraph\">Voyons comment fonctionne le CSS en d&eacute;composant la syntaxe:<\/p><pre class=\"wp-block-preformatted\">selector {declaration}<\/pre><p class=\"wp-block-paragraph\">La <strong>d&eacute;claration<\/strong> peut &ecirc;tre d&eacute;compos&eacute;e comme suit:<\/p><pre class=\"wp-block-preformatted\">selector {property: value;}<\/pre><p class=\"wp-block-paragraph\">Comme vous pouvez le constater, la syntaxe CSS se compose d&rsquo;un s&eacute;lecteur et d&rsquo;un bloc de d&eacute;claration. Le s&eacute;lecteur est l&rsquo;&eacute;l&eacute;ment HTML que vous allez contr&ocirc;ler. Le bloc de d&eacute;claration, quant &agrave; lui, contient le nom de la propri&eacute;t&eacute; et la valeur de l&rsquo;&eacute;l&eacute;ment HTML &ndash; tous deux sont s&eacute;par&eacute;s par deux points (:) et d&eacute;clar&eacute;s entre accolades ({}).<\/p><p class=\"wp-block-paragraph\">Supposons que vous souhaitiez que la taille de la police de votre titre 1 <strong>(h1<\/strong>, ) soit de <strong>20 pixels.<\/strong> Votre syntaxe devrait ressembler &agrave; ceci:<\/p><pre class=\"wp-block-preformatted\">h1 {font-size: 20px;}<\/pre><p class=\"wp-block-paragraph\">Dans ce cas, le s&eacute;lecteur est <strong>h1<\/strong>. Ensuite, <strong>font-size<\/strong> est le nom de la propri&eacute;t&eacute;, et <strong>20px<\/strong> est la valeur.<\/p><p class=\"wp-block-paragraph\">Le langage CSS comporte un grand nombre de s&eacute;lecteurs et de d&eacute;clarations qui peuvent &ecirc;tre difficiles &agrave; m&eacute;moriser. C&rsquo;est pourquoi nous avons mis au point un guide complet des CSS et CSS3 pour vous aider &agrave; ma&icirc;triser ce langage.<\/p><p class=\"wp-block-paragraph\">Une fois que vous avez t&eacute;l&eacute;charg&eacute; le cheat sheet CSS, enregistrez le fichier sur votre appareil ou imprimez-le. Vous trouverez ainsi facilement ce que vous cherchez.<\/p><h2 class=\"wp-block-heading\" id=\"h-download-the-full-css-cheat-sheet-here\">T&eacute;l&eacute;chargez le cheat sheet CSS complet ici:<\/h2><p class=\"has-text-align-center wp-block-paragraph\"><strong><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/CSS-3-Cheatsheet.pdf\" data-type=\"link\" data-id=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/CSS-3-Cheatsheet.pdf\" target=\"_blank\" rel=\"noopener\">T&eacute;l&eacute;charger le CSS cheat sheet en.pdf<\/a><\/strong><\/p><h3 class=\"wp-block-heading\" id=\"h-preview-of-css-cheat-sheet-nbsp\">Aper&ccedil;u du cheat sheet CSS&nbsp;<\/h3><p class=\"wp-block-paragraph\">Voici un aper&ccedil;u des valeurs et propri&eacute;t&eacute;s CSS les plus courantes, extraites de notre PDF!<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a748561d8906\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a748561d8906\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"724\" height=\"1024\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/01\/CSS-3-Cheatsheet-04.png\/w=1024,h=1024,fit=scale-down\" alt=\"Aide-m&eacute;moire CSS pour les bordures, le mod&egrave;le de bo&icirc;te et les transitions\" class=\"wp-image-44359\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/01\/CSS-3-Cheatsheet-04.png\/w=724,fit=scale-down 724w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/01\/CSS-3-Cheatsheet-04.png\/w=212,fit=scale-down 212w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/01\/CSS-3-Cheatsheet-04.png\/w=106,fit=scale-down 106w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a748561dcac9\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a748561dcac9\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"724\" height=\"1024\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/01\/CSS-3-Cheatsheet-05.png\/w=1024,h=1024,fit=scale-down\" alt=\"Aide-m&eacute;moire pour la configuration des mod&egrave;les de bo&icirc;tes, des polices et des couleurs. \" class=\"wp-image-44361\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/01\/CSS-3-Cheatsheet-05.png\/w=724,fit=scale-down 724w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/01\/CSS-3-Cheatsheet-05.png\/w=212,fit=scale-down 212w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/01\/CSS-3-Cheatsheet-05.png\/w=106,fit=scale-down 106w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/public\" alt=\"\" class=\"wp-image-41467\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>CSS est un langage de conception de sites web que vous pouvez utiliser pour ajouter un arri&egrave;re-plan, des couleurs et m&ecirc;me des transitions ou d&rsquo;autres &eacute;l&eacute;ments interactifs. Il vous aidera &eacute;galement &agrave; d&eacute;velopper un site web convivial pour les moteurs de recherche, l&eacute;ger et r&eacute;actif. Cependant, il peut &ecirc;tre difficile de se familiariser avec les [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/css-cheat-sheet\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":355,"featured_media":44357,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Le CSS cheat sheet complet au format PDF et images","rank_math_description":"Apprenez le CSS ou concevez votre site : t\u00e9l\u00e9chargez le cheat sheet CSS en PDF et d\u00e9couvrez les versions PNG.","rank_math_focus_keyword":"css cheat sheet","footnotes":""},"categories":[5898,5847],"tags":[],"class_list":["post-44363","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developpement-de-site-web","category-site-web"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/css-cheat-sheet\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/codigos-css-prontos-guia-pdf\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/css-cheat-sheet\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/codigos-css-cheat-sheet\/","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/cheat-sheet-css\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/css-cheat-sheet\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/css-cheat-sheet\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/css-cheat-sheet\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/css-cheat-sheet\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/css-cheat-sheet\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/css-cheat-sheet\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/css-cheat-sheet\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/codigos-css-cheat-sheet\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/codigos-css-cheat-sheet\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/codigos-css-cheat-sheet\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/codigos-css-prontos-guia-pdf\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/44363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/355"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=44363"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/44363\/revisions"}],"predecessor-version":[{"id":44473,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/44363\/revisions\/44473"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media\/44357"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=44363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=44363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=44363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}