{"id":532,"date":"2026-02-03T20:02:23","date_gmt":"2026-02-03T19:02:23","guid":{"rendered":"https:\/\/lmspro.fr\/la-mise-en-forme-css-5\/"},"modified":"2026-02-03T20:02:23","modified_gmt":"2026-02-03T19:02:23","slug":"la-mise-en-forme-css-5","status":"publish","type":"post","link":"https:\/\/lmspro.fr\/en\/la-mise-en-forme-css-5\/","title":{"rendered":"CSS formatting"},"content":{"rendered":"<article class=\"lms-video-card\"><a href=\"https:\/\/www.lumni.fr\/video\/le-texte-et-la-couleur-transformer-une-page-internet-3-4\" class=\"lms-thumb lms-thumb-link\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"lms-thumb-img\" src=\"https:\/\/medias.lumni.fr\/NyNwAg42OAbJt8G3T0WFrGj_FZ8\/1200x630\/filters:focal(960x92:959x91):quality(90):max_bytes(120000)\/5dae33c0b988f83e3a2cf105\" alt=\"\"><div class=\"lms-play-triangle\"><\/div><\/a><div class=\"lms-content\"><div class=\"lms-meta\"><span class=\"lms-pill lms-pill--provider\">Lumni<\/span><span class=\"lms-pill lms-pill--muted\">2:41<\/span><span class=\"lms-pill lms-pill--muted\">College<\/span><span class=\"lms-pill lms-pill--muted\">Third<\/span><span class=\"lms-pill lms-pill--muted\">Techno<\/span><span class=\"lms-pill lms-pill--muted\">3 Minutes to Code<\/span><\/div><div class=\"lms-actions\"><a class=\"lms-btn lms-btn--primary\" href=\"https:\/\/www.lumni.fr\/video\/le-texte-et-la-couleur-transformer-une-page-internet-3-4\" target=\"_blank\" rel=\"noopener\">\u25b6 Watch the video<\/a><\/div><\/div><\/article>\n<h2>CSS formatting<\/h2>\n<p class=\"wpa-text\">Le CSS (Cascading Style Sheets) est le langage qui donne vie \u00e0 vos pages web en contr\u00f4lant leur apparence visuelle. Ma\u00eetriser les feuilles de style en cascade vous permettra de transformer vos documents HTML en interfaces attrayantes et professionnelles.<\/p>\n<div class=\"article-meta\">\n<p><strong>Module:<\/strong> Module 1: Technical Fundamentals of the Web<\/p>\n<p><strong>Level :<\/strong> Beginner<\/p>\n<p><strong>Duration :<\/strong> 20 minutes<\/p>\n<p><strong>Prerequisites:<\/strong> None<\/p>\n<\/div>\n<h2>Educational objectives<\/h2>\n<ul>\n<li>Expliquer le principe de fonctionnement des feuilles de style en cascade<\/li>\n<li>Cr\u00e9er et appliquer des styles inline pour modifier l&rsquo;apparence d&rsquo;\u00e9l\u00e9ments HTML<\/li>\n<li>Utiliser diff\u00e9rents types de s\u00e9lecteurs CSS pour cibler des \u00e9l\u00e9ments sp\u00e9cifiques<\/li>\n<li>Comprendre la priorit\u00e9 et l&rsquo;h\u00e9ritage des styles CSS<\/li>\n<li>Structurer une feuille de style externe pour organiser efficacement le code CSS<\/li>\n<\/ul>\n<div class=\"wpa-accordion wpa-accordion-flush\" id=\"accordion-la-mise-en-forme-css\">\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-la-mise-en-forme-css-item-1\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">01<\/span> Principe des feuilles de style en cascade<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-la-mise-en-forme-css-item-1\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>Qu&rsquo;est-ce que le CSS ?<\/h4>\n<p>CSS (Cascading Style Sheets) est un langage de feuilles de style utilis\u00e9 pour d\u00e9crire la pr\u00e9sentation d&rsquo;un document HTML. Le terme \u00ab\u00a0cascade\u00a0\u00bb fait r\u00e9f\u00e9rence au m\u00e9canisme fondamental qui d\u00e9termine quels styles s&rsquo;appliquent \u00e0 un \u00e9l\u00e9ment lorsque plusieurs r\u00e8gles entrent en conflit. Cette cascade suit un ordre de priorit\u00e9 pr\u00e9cis : d&rsquo;abord l&rsquo;importance (r\u00e8gles marqu\u00e9es !important), puis la sp\u00e9cificit\u00e9 du s\u00e9lecteur, et enfin l&rsquo;ordre d&rsquo;apparition dans le code.<\/p>\n<h4>S\u00e9paration du contenu et de la pr\u00e9sentation<\/h4>\n<p>L&rsquo;un des principes fondamentaux du CSS est la s\u00e9paration claire entre le contenu (HTML) et la pr\u00e9sentation (CSS). Cette approche offre de nombreux avantages : maintenance simplifi\u00e9e, r\u00e9utilisabilit\u00e9 des styles, am\u00e9lioration des performances et meilleure accessibilit\u00e9. Un m\u00eame document HTML peut ainsi avoir diff\u00e9rentes pr\u00e9sentations selon le contexte (\u00e9cran, impression, mobile) en changeant simplement la feuille de style.<\/p>\n<div class=\"info-box\">\n<p><strong>Key point<\/strong> : La cascade CSS d\u00e9termine automatiquement quels styles s&rsquo;appliquent en cas de conflit, suivant les r\u00e8gles de priorit\u00e9 et de sp\u00e9cificit\u00e9.<\/p>\n<\/div>\n<div class=\"tuto-objectif\" style=\"background: #f5f5f5; border-left: 4px solid #667eea; padding: 16px 20px; margin-top: 24px; border-radius: 0 8px 8px 0;\">\n<h3 style=\"color: #667eea; margin: 0 0 8px 0; font-size: 16px;\">Key points to remember<\/h3>\n<p style=\"margin: 0; color: #333;\">Le CSS s\u00e9pare le contenu HTML de sa pr\u00e9sentation gr\u00e2ce au m\u00e9canisme de cascade qui r\u00e9sout automatiquement les conflits entre styles.<\/p>\n<\/div>\n<div class=\"tuto-exercise\" style=\"background: #fff3e0; border-left: 4px solid #ff9800; padding: 16px 20px; margin-top: 20px; border-radius: 0 8px 8px 0;\">\n<h4 style=\"color: #ff9800; margin: 0 0 8px 0; font-size: 15px;\">\ud83c\udfaf Mini-exercice : D\u00e9couvrir la cascade<\/h4>\n<p style=\"margin: 0; color: #333; font-size: 14px;\">Observez comment la cascade r\u00e9sout le conflit entre deux r\u00e8gles qui ciblent le m\u00eame \u00e9l\u00e9ment avec des couleurs diff\u00e9rentes.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-1\">\n<p class=\"codepen-block-label\">Reference code:<\/p>\n<div class=\"codepen-header\">\n<div class=\"codepen-tabs\">\n<button class=\"codepen-tab active\" data-tab=\"html\">HTML<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"css\">CSS<\/button>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copy<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;fr&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;title&gt;Cascade CSS&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1 class=&quot;titre&quot;&gt;Mon titre principal&lt;\/h1&gt;\n    &lt;p&gt;Un paragraphe de d&eacute;monstration.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">\/* Premi\u00e8re r\u00e8gle *\/\n.titre {\n    color: blue;\n    font-size: 24px;\n}\n\n\/* Seconde r\u00e8gle - plus sp\u00e9cifique *\/\nh1.titre {\n    color: red;\n    font-weight: bold;\n}\n\np {\n    color: #333;\n    line-height: 1.6;\n}<\/pre>\n<\/div>\n<\/div>\n<div class=\"monaco-sandbox\" data-block-id=\"exercise-1\">\n<div class=\"monaco-header\">\n<div class=\"monaco-tabs\">\n<button class=\"monaco-tab active\" data-lang=\"html\">HTML<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"css\">CSS<\/button>\n<\/div>\n<div class=\"monaco-actions\">\n<button class=\"monaco-btn monaco-btn-run\">\u25b6 Run<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-reset\">\u21ba Reset<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-save\">\ud83d\udcbe Save<\/button>\n<\/div>\n<\/div>\n<div class=\"monaco-container\">\n<div class=\"monaco-editor-wrapper\">\n<div class=\"monaco-editor-pane active\" data-lang=\"html\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"css\"><\/div>\n<\/div>\n<div class=\"monaco-preview-wrapper\">\n<div class=\"monaco-preview-header\">Result<\/div>\n<\/div>\n<\/div>\n<div class=\"monaco-status\">\n<span class=\"monaco-status-left\">\u25cf Ready<\/span><br \/>\n<span class=\"monaco-status-right\">Monaco Editor v0.45<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-la-mise-en-forme-css-item-2\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">02<\/span> Styles inline et int\u00e9gr\u00e9s<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-la-mise-en-forme-css-item-2\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>Les styles inline<\/h4>\n<p>Les styles inline sont appliqu&eacute;s directement sur un &eacute;l&eacute;ment HTML via l&rsquo;attribut &laquo;&nbsp;style&nbsp;&raquo;. Cette m&eacute;thode offre la priorit&eacute; la plus &eacute;lev&eacute;e dans la cascade CSS (except&eacute; pour !important). Par exemple : &lt;p style=&quot;&nbsp;&raquo;color:&quot; red; font-size: 18px;&nbsp;&raquo;&gt;. Bien qu&rsquo;efficaces pour des modifications ponctuelles, les styles inline pr&eacute;sentent des inconv&eacute;nients majeurs : ils m&eacute;langent contenu et pr&eacute;sentation, rendent la maintenance difficile et ne sont pas r&eacute;utilisables.<\/p>\n<h4>Les styles int\u00e9gr\u00e9s dans le document<\/h4>\n<p>Les styles int\u00e9gr\u00e9s sont d\u00e9finis dans la balise &lt;style&gt; situ\u00e9e dans la section &lt;head&gt; du document HTML. Cette approche permet de centraliser les styles pour une page sp\u00e9cifique tout en gardant une s\u00e9paration relative entre HTML et CSS. Les styles int\u00e9gr\u00e9s ont une priorit\u00e9 interm\u00e9diaire dans la cascade, plus faible que les styles inline mais plus \u00e9lev\u00e9e que les feuilles de style externes. Cette m\u00e9thode convient pour des styles sp\u00e9cifiques \u00e0 une seule page.<\/p>\n<div class=\"info-box\">\n<p><strong>Key point<\/strong> : Les styles inline ont la priorit\u00e9 la plus \u00e9lev\u00e9e mais nuisent \u00e0 la maintenabilit\u00e9 du code, tandis que les styles int\u00e9gr\u00e9s offrent un compromis pour des besoins ponctuels.<\/p>\n<\/div>\n<div class=\"tuto-objectif\" style=\"background: #f5f5f5; border-left: 4px solid #667eea; padding: 16px 20px; margin-top: 24px; border-radius: 0 8px 8px 0;\">\n<h3 style=\"color: #667eea; margin: 0 0 8px 0; font-size: 16px;\">Key points to remember<\/h3>\n<p style=\"margin: 0; color: #333;\">Les styles inline offrent la priorit\u00e9 maximale mais compromettent la maintenance, les styles int\u00e9gr\u00e9s conviennent aux besoins sp\u00e9cifiques d&rsquo;une page.<\/p>\n<\/div>\n<div class=\"tuto-exercise\" style=\"background: #fff3e0; border-left: 4px solid #ff9800; padding: 16px 20px; margin-top: 20px; border-radius: 0 8px 8px 0;\">\n<h4 style=\"color: #ff9800; margin: 0 0 8px 0; font-size: 15px;\">\ud83c\udfaf Mini-exercice : Appliquer des styles inline<\/h4>\n<p style=\"margin: 0; color: #333; font-size: 14px;\">Modifiez l&rsquo;apparence d&rsquo;\u00e9l\u00e9ments HTML en utilisant l&rsquo;attribut style directement dans les balises.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-2\">\n<p class=\"codepen-block-label\">Reference code:<\/p>\n<div class=\"codepen-header\">\n<div class=\"codepen-tabs\">\n<button class=\"codepen-tab active\" data-tab=\"html\">HTML<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"css\">CSS<\/button>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copy<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;fr&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;title&gt;Styles Inline&lt;\/title&gt;\n    &lt;style&gt;\n        h2 { color: blue; }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h2&gt;Titre avec style int&eacute;gr&eacute;&lt;\/h2&gt;\n    &lt;h2 style=&quot;color: red; font-size: 28px;&quot;&gt;Titre avec style inline&lt;\/h2&gt;\n    &lt;p style=&quot;background-color: yellow; padding: 10px;&quot;&gt;Paragraphe styl&eacute; inline&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">\/* Styles int\u00e9gr\u00e9s dans le HTML *\/\n\/* Voir la balise &lt;style&gt; dans la section &lt;head&gt; *\/<\/pre>\n<\/div>\n<\/div>\n<div class=\"monaco-sandbox\" data-block-id=\"exercise-2\">\n<div class=\"monaco-header\">\n<div class=\"monaco-tabs\">\n<button class=\"monaco-tab active\" data-lang=\"html\">HTML<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"css\">CSS<\/button>\n<\/div>\n<div class=\"monaco-actions\">\n<button class=\"monaco-btn monaco-btn-run\">\u25b6 Run<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-reset\">\u21ba Reset<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-save\">\ud83d\udcbe Save<\/button>\n<\/div>\n<\/div>\n<div class=\"monaco-container\">\n<div class=\"monaco-editor-wrapper\">\n<div class=\"monaco-editor-pane active\" data-lang=\"html\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"css\"><\/div>\n<\/div>\n<div class=\"monaco-preview-wrapper\">\n<div class=\"monaco-preview-header\">Result<\/div>\n<\/div>\n<\/div>\n<div class=\"monaco-status\">\n<span class=\"monaco-status-left\">\u25cf Ready<\/span><br \/>\n<span class=\"monaco-status-right\">Monaco Editor v0.45<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-la-mise-en-forme-css-item-3\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">03<\/span> S\u00e9lecteurs CSS essentiels<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-la-mise-en-forme-css-item-3\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>S\u00e9lecteurs de base<\/h4>\n<p>Les s\u00e9lecteurs CSS permettent de cibler pr\u00e9cis\u00e9ment les \u00e9l\u00e9ments HTML \u00e0 styliser. Les s\u00e9lecteurs de type (h1, p, div) ciblent tous les \u00e9l\u00e9ments d&rsquo;une balise donn\u00e9e. Les s\u00e9lecteurs de classe (.ma-classe) ciblent les \u00e9l\u00e9ments ayant un attribut class sp\u00e9cifique, tandis que les s\u00e9lecteurs d&rsquo;ID (#mon-id) ciblent un \u00e9l\u00e9ment unique avec un attribut id particulier. Le s\u00e9lecteur universel (*) s&rsquo;applique \u00e0 tous les \u00e9l\u00e9ments de la page.<\/p>\n<h4>S\u00e9lecteurs de combinaison<\/h4>\n<p>Les s\u00e9lecteurs de combinaison permettent de cibler des \u00e9l\u00e9ments selon leur position dans le DOM. Le s\u00e9lecteur descendant (div p) cible tous les paragraphes \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un div. Le s\u00e9lecteur enfant direct (div > p) ne cible que les paragraphes directement enfants d&rsquo;un div. Le s\u00e9lecteur fr\u00e8re adjacent (h2 + p) cible le premier paragraphe suivant imm\u00e9diatement un h2. Ces combinaisons offrent une grande pr\u00e9cision dans le ciblage des \u00e9l\u00e9ments.<\/p>\n<div class=\"info-box\">\n<p><strong>Key point<\/strong> : La sp\u00e9cificit\u00e9 des s\u00e9lecteurs d\u00e9termine leur priorit\u00e9 : ID (100 points) > classe (10 points) > type (1 point). Plus un s\u00e9lecteur est sp\u00e9cifique, plus il a de chances de s&rsquo;appliquer.<\/p>\n<\/div>\n<div class=\"tuto-objectif\" style=\"background: #f5f5f5; border-left: 4px solid #667eea; padding: 16px 20px; margin-top: 24px; border-radius: 0 8px 8px 0;\">\n<h3 style=\"color: #667eea; margin: 0 0 8px 0; font-size: 16px;\">Key points to remember<\/h3>\n<p style=\"margin: 0; color: #333;\">Les s\u00e9lecteurs CSS permettent un ciblage pr\u00e9cis des \u00e9l\u00e9ments, leur sp\u00e9cificit\u00e9 d\u00e9termine leur priorit\u00e9 dans la cascade.<\/p>\n<\/div>\n<div class=\"tuto-exercise\" style=\"background: #fff3e0; border-left: 4px solid #ff9800; padding: 16px 20px; margin-top: 20px; border-radius: 0 8px 8px 0;\">\n<h4 style=\"color: #ff9800; margin: 0 0 8px 0; font-size: 15px;\">\ud83c\udfaf Mini-exercice : Utiliser diff\u00e9rents s\u00e9lecteurs<\/h4>\n<p style=\"margin: 0; color: #333; font-size: 14px;\">Explorez les s\u00e9lecteurs de type, classe, ID et combinaison pour cibler pr\u00e9cis\u00e9ment des \u00e9l\u00e9ments HTML.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-3\">\n<p class=\"codepen-block-label\">Reference code:<\/p>\n<div class=\"codepen-header\">\n<div class=\"codepen-tabs\">\n<button class=\"codepen-tab active\" data-tab=\"html\">HTML<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"css\">CSS<\/button>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copy<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;fr&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;title&gt;S&eacute;lecteurs CSS&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1 id=&quot;titre-principal&quot;&gt;Main title&lt;\/h1&gt;\n    &lt;div class=&quot;contenu&quot;&gt;\n        &lt;p&gt;Premier paragraphe dans la div&lt;\/p&gt;\n        &lt;p class=&quot;important&quot;&gt;Paragraphe important&lt;\/p&gt;\n    &lt;\/div&gt;\n    &lt;p&gt;Paragraphe hors de la div&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">\/* S\u00e9lecteur d'ID *\/\n#titre-principal {\n    color: navy;\n    font-size: 32px;\n}\n\n\/* S\u00e9lecteur de classe *\/\n.important {\n    background-color: lightyellow;\n    font-weight: bold;\n}\n\n\/* S\u00e9lecteur descendant *\/\n.contenu p {\n    margin-left: 20px;\n    color: #666;\n}\n\n\/* S\u00e9lecteur de type *\/\np {\n    line-height: 1.5;\n}<\/pre>\n<\/div>\n<\/div>\n<div class=\"monaco-sandbox\" data-block-id=\"exercise-3\">\n<div class=\"monaco-header\">\n<div class=\"monaco-tabs\">\n<button class=\"monaco-tab active\" data-lang=\"html\">HTML<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"css\">CSS<\/button>\n<\/div>\n<div class=\"monaco-actions\">\n<button class=\"monaco-btn monaco-btn-run\">\u25b6 Run<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-reset\">\u21ba Reset<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-save\">\ud83d\udcbe Save<\/button>\n<\/div>\n<\/div>\n<div class=\"monaco-container\">\n<div class=\"monaco-editor-wrapper\">\n<div class=\"monaco-editor-pane active\" data-lang=\"html\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"css\"><\/div>\n<\/div>\n<div class=\"monaco-preview-wrapper\">\n<div class=\"monaco-preview-header\">Result<\/div>\n<\/div>\n<\/div>\n<div class=\"monaco-status\">\n<span class=\"monaco-status-left\">\u25cf Ready<\/span><br \/>\n<span class=\"monaco-status-right\">Monaco Editor v0.45<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-la-mise-en-forme-css-item-4\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">04<\/span> Priorit\u00e9 et h\u00e9ritage des styles<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-la-mise-en-forme-css-item-4\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>Calcul de la sp\u00e9cificit\u00e9<\/h4>\n<p>La sp\u00e9cificit\u00e9 CSS d\u00e9termine quel style s&rsquo;applique lorsque plusieurs r\u00e8gles ciblent le m\u00eame \u00e9l\u00e9ment. Elle se calcule selon un syst\u00e8me de points : les styles inline valent 1000 points, chaque ID vaut 100 points, chaque classe, attribut ou pseudo-classe vaut 10 points, et chaque \u00e9l\u00e9ment ou pseudo-\u00e9l\u00e9ment vaut 1 point. Par exemple, \u00ab\u00a0div.menu #nav\u00a0\u00bb a une sp\u00e9cificit\u00e9 de 111 (1+10+100). En cas d&rsquo;\u00e9galit\u00e9, c&rsquo;est la derni\u00e8re r\u00e8gle d\u00e9clar\u00e9e qui l&#8217;emporte.<\/p>\n<h4>H\u00e9ritage des propri\u00e9t\u00e9s<\/h4>\n<p>L&rsquo;h\u00e9ritage permet aux \u00e9l\u00e9ments enfants de r\u00e9cup\u00e9rer automatiquement certaines propri\u00e9t\u00e9s CSS de leurs parents. Les propri\u00e9t\u00e9s li\u00e9es au texte (color, font-family, font-size) sont g\u00e9n\u00e9ralement h\u00e9rit\u00e9es, contrairement aux propri\u00e9t\u00e9s de mise en page (margin, padding, border). On peut forcer l&rsquo;h\u00e9ritage avec la valeur \u00ab\u00a0inherit\u00a0\u00bb ou l&#8217;emp\u00eacher avec \u00ab\u00a0initial\u00a0\u00bb. Cette m\u00e9canique \u00e9vite la r\u00e9p\u00e9tition de code et assure une coh\u00e9rence visuelle naturelle.<\/p>\n<div class=\"info-box\">\n<p><strong>Key point<\/strong> : La r\u00e8gle !important outrepasse la sp\u00e9cificit\u00e9 normale, mais son usage doit rester exceptionnel car elle complique la maintenance du code.<\/p>\n<\/div>\n<div class=\"tuto-objectif\" style=\"background: #f5f5f5; border-left: 4px solid #667eea; padding: 16px 20px; margin-top: 24px; border-radius: 0 8px 8px 0;\">\n<h3 style=\"color: #667eea; margin: 0 0 8px 0; font-size: 16px;\">Key points to remember<\/h3>\n<p style=\"margin: 0; color: #333;\">La sp\u00e9cificit\u00e9 CSS suit un syst\u00e8me de points pr\u00e9cis, tandis que l&rsquo;h\u00e9ritage transmet naturellement certaines propri\u00e9t\u00e9s des parents aux enfants.<\/p>\n<\/div>\n<div class=\"tuto-exercise\" style=\"background: #fff3e0; border-left: 4px solid #ff9800; padding: 16px 20px; margin-top: 20px; border-radius: 0 8px 8px 0;\">\n<h4 style=\"color: #ff9800; margin: 0 0 8px 0; font-size: 15px;\">\ud83c\udfaf Mini-exercice : Comprendre priorit\u00e9 et h\u00e9ritage<\/h4>\n<p style=\"margin: 0; color: #333; font-size: 14px;\">Observez comment la sp\u00e9cificit\u00e9 et l&rsquo;h\u00e9ritage influencent l&rsquo;application des styles sur des \u00e9l\u00e9ments imbriqu\u00e9s.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-4\">\n<p class=\"codepen-block-label\">Reference code:<\/p>\n<div class=\"codepen-header\">\n<div class=\"codepen-tabs\">\n<button class=\"codepen-tab active\" data-tab=\"html\">HTML<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"css\">CSS<\/button>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copy<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;fr&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;title&gt;Priorit&eacute; et H&eacute;ritage&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=&quot;parent&quot; id=&quot;conteneur&quot;&gt;\n        &lt;p class=&quot;enfant&quot;&gt;Texte avec h&eacute;ritage de couleur&lt;\/p&gt;\n        &lt;span&gt;Span h&eacute;rite aussi des styles&lt;\/span&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">\/* Styles h\u00e9rit\u00e9s *\/\n.parent {\n    color: blue;\n    font-family: Arial;\n    border: 2px solid red; \/* Ne s'h\u00e9rite pas *\/\n}\n\n\/* Sp\u00e9cificit\u00e9 faible (10 points) *\/\n.enfant {\n    color: green;\n}\n\n\/* Sp\u00e9cificit\u00e9 \u00e9lev\u00e9e (110 points) *\/\n#conteneur .enfant {\n    color: purple;\n    font-weight: bold;\n}\n\nspan {\n    display: block;\n    margin-top: 10px;\n}<\/pre>\n<\/div>\n<\/div>\n<div class=\"monaco-sandbox\" data-block-id=\"exercise-4\">\n<div class=\"monaco-header\">\n<div class=\"monaco-tabs\">\n<button class=\"monaco-tab active\" data-lang=\"html\">HTML<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"css\">CSS<\/button>\n<\/div>\n<div class=\"monaco-actions\">\n<button class=\"monaco-btn monaco-btn-run\">\u25b6 Run<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-reset\">\u21ba Reset<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-save\">\ud83d\udcbe Save<\/button>\n<\/div>\n<\/div>\n<div class=\"monaco-container\">\n<div class=\"monaco-editor-wrapper\">\n<div class=\"monaco-editor-pane active\" data-lang=\"html\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"css\"><\/div>\n<\/div>\n<div class=\"monaco-preview-wrapper\">\n<div class=\"monaco-preview-header\">Result<\/div>\n<\/div>\n<\/div>\n<div class=\"monaco-status\">\n<span class=\"monaco-status-left\">\u25cf Ready<\/span><br \/>\n<span class=\"monaco-status-right\">Monaco Editor v0.45<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-la-mise-en-forme-css-item-5\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">05<\/span> Feuilles de style externes<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-la-mise-en-forme-css-item-5\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>Cr\u00e9ation et liaison d&rsquo;une feuille de style externe<\/h4>\n<p>Les feuilles de style externes constituent la m\u00e9thode recommand\u00e9e pour organiser le CSS. On cr\u00e9e un fichier .css s\u00e9par\u00e9 (comme styles.css) que l&rsquo;on lie au HTML via la balise &lt;link rel=\u00a0\u00bbstylesheet\u00a0\u00bb href=\u00a0\u00bbstyles.css\u00a0\u00bb&gt; dans la section &lt;head&gt;. Cette approche offre de nombreux avantages : s\u00e9paration compl\u00e8te du contenu et de la pr\u00e9sentation, r\u00e9utilisation sur plusieurs pages, mise en cache par le navigateur pour de meilleures performances, et collaboration facilit\u00e9e entre d\u00e9veloppeurs.<\/p>\n<h4>Organisation et structure du code CSS<\/h4>\n<p>Une feuille de style bien structur\u00e9e am\u00e9liore la maintenance et la lisibilit\u00e9. Il est recommand\u00e9 d&rsquo;organiser le CSS par sections : reset\/normalize, styles g\u00e9n\u00e9raux, layout, composants, puis pages sp\u00e9cifiques. L&rsquo;utilisation de commentaires pour d\u00e9limiter les sections, l&rsquo;indentation coh\u00e9rente et la nomenclature claire des classes (m\u00e9thodologie BEM par exemple) facilitent le travail en \u00e9quipe. Les propri\u00e9t\u00e9s peuvent \u00eatre regroup\u00e9es logiquement : positionnement, mod\u00e8le de bo\u00eete, typographie, puis d\u00e9coration.<\/p>\n<div class=\"info-box\">\n<p><strong>Key point<\/strong> : Les feuilles de style externes permettent la r\u00e9utilisation, am\u00e9liorent les performances gr\u00e2ce \u00e0 la mise en cache et facilitent la maintenance du code.<\/p>\n<\/div>\n<div class=\"tuto-objectif\" style=\"background: #f5f5f5; border-left: 4px solid #667eea; padding: 16px 20px; margin-top: 24px; border-radius: 0 8px 8px 0;\">\n<h3 style=\"color: #667eea; margin: 0 0 8px 0; font-size: 16px;\">Key points to remember<\/h3>\n<p style=\"margin: 0; color: #333;\">Les feuilles de style externes offrent la meilleure approche pour organiser le CSS : r\u00e9utilisables, performantes et maintenables.<\/p>\n<\/div>\n<div class=\"tuto-exercise\" style=\"background: #fff3e0; border-left: 4px solid #ff9800; padding: 16px 20px; margin-top: 20px; border-radius: 0 8px 8px 0;\">\n<h4 style=\"color: #ff9800; margin: 0 0 8px 0; font-size: 15px;\">\ud83c\udfaf Mini-exercice : Structurer une feuille de style<\/h4>\n<p style=\"margin: 0; color: #333; font-size: 14px;\">D\u00e9couvrez comment organiser efficacement votre CSS externe avec des sections comment\u00e9es et une hi\u00e9rarchie claire.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-5\">\n<p class=\"codepen-block-label\">Reference code:<\/p>\n<div class=\"codepen-header\">\n<div class=\"codepen-tabs\">\n<button class=\"codepen-tab active\" data-tab=\"html\">HTML<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"css\">CSS<\/button>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copy<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;fr&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;title&gt;Feuille de style externe&lt;\/title&gt;\n    &lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt; --&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;header class=&quot;header&quot;&gt;\n        &lt;h1 class=&quot;header__title&quot;&gt;My Website&lt;\/h1&gt;\n    &lt;\/header&gt;\n    &lt;main class=&quot;main-content&quot;&gt;\n        &lt;article class=&quot;article&quot;&gt;\n            &lt;h2 class=&quot;article__title&quot;&gt;Article principal&lt;\/h2&gt;\n            &lt;p class=&quot;article__text&quot;&gt;Contenu de l&#039;article...&lt;\/p&gt;\n        &lt;\/article&gt;\n    &lt;\/main&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">\/* ===========================\n   RESET ET STYLES G\u00c9N\u00c9RAUX\n   =========================== *\/\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: Arial, sans-serif;\n    line-height: 1.6;\n    color: #333;\n}\n\n\/* ===========================\n   HEADER\n   =========================== *\/\n.header {\n    background-color: #2c3e50;\n    padding: 20px 0;\n    text-align: center;\n}\n\n.header__title {\n    color: white;\n    font-size: 28px;\n}\n\n\/* ===========================\n   CONTENU PRINCIPAL\n   =========================== *\/\n.main-content {\n    max-width: 800px;\n    margin: 40px auto;\n    padding: 0 20px;\n}\n\n.article__title {\n    color: #2c3e50;\n    margin-bottom: 16px;\n}\n\n.article__text {\n    color: #666;\n    margin-bottom: 16px;\n}<\/pre>\n<\/div>\n<\/div>\n<div class=\"monaco-sandbox\" data-block-id=\"exercise-5\">\n<div class=\"monaco-header\">\n<div class=\"monaco-tabs\">\n<button class=\"monaco-tab active\" data-lang=\"html\">HTML<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"css\">CSS<\/button>\n<\/div>\n<div class=\"monaco-actions\">\n<button class=\"monaco-btn monaco-btn-run\">\u25b6 Run<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-reset\">\u21ba Reset<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-save\">\ud83d\udcbe Save<\/button>\n<\/div>\n<\/div>\n<div class=\"monaco-container\">\n<div class=\"monaco-editor-wrapper\">\n<div class=\"monaco-editor-pane active\" data-lang=\"html\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"css\"><\/div>\n<\/div>\n<div class=\"monaco-preview-wrapper\">\n<div class=\"monaco-preview-header\">Result<\/div>\n<\/div>\n<\/div>\n<div class=\"monaco-status\">\n<span class=\"monaco-status-left\">\u25cf Ready<\/span><br \/>\n<span class=\"monaco-status-right\">Monaco Editor v0.45<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2>Summary<\/h2>\n<div class=\"tuto-recap\" style=\"background: #f5f5f5; border-left: 4px solid #9c27b0; padding: 16px 20px; border-radius: 0 8px 8px 0;\">\n<h3 style=\"color: #9c27b0; margin: 0 0 12px 0; font-size: 16px;\">Key points to remember<\/h3>\n<ul style=\"margin: 0; padding-left: 20px; color: #333;\">\n<li><strong>Principe de cascade<\/strong> : Le CSS r\u00e9sout automatiquement les conflits entre styles selon des r\u00e8gles de priorit\u00e9 et de sp\u00e9cificit\u00e9 pr\u00e9cises<\/li>\n<li><strong>M\u00e9thodes d&rsquo;int\u00e9gration<\/strong> : Les styles inline ont la priorit\u00e9 maximale, les styles int\u00e9gr\u00e9s conviennent aux besoins ponctuels, les feuilles externes sont recommand\u00e9es<\/li>\n<li><strong>CSS Selectors<\/strong> : Ils permettent un ciblage pr\u00e9cis des \u00e9l\u00e9ments avec une sp\u00e9cificit\u00e9 calcul\u00e9e (ID > classe > type)<\/li>\n<li><strong>H\u00e9ritage des propri\u00e9t\u00e9s<\/strong> : Certaines propri\u00e9t\u00e9s CSS se transmettent naturellement des \u00e9l\u00e9ments parents aux enfants<\/li>\n<li><strong>Organisation du code<\/strong> : Les feuilles de style externes bien structur\u00e9es am\u00e9liorent la maintenance, les performances et la r\u00e9utilisabilit\u00e9<\/li>\n<\/ul>\n<\/div>\n<h2>Sources<\/h2>\n<div class=\"sources-box\" style=\"background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border: 1px solid #cbd5e1; border-radius: 12px; padding: 16px; margin-bottom: 24px;\">\n<p style=\"color: #64748b; margin: 0 0 12px 0; font-size: 13px;\">To deepen your knowledge:<\/p>\n<ul style=\"margin: 0; padding-left: 0; list-style: none;\">\n<li style=\"margin-bottom: 8px;\">\n<a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/CSS_Cascading_and_Inheritance\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: white; border-radius: 8px; text-decoration: none; color: #1e293b; border: 1px solid #e2e8f0;\"><br \/>\n<span style=\"color: #94a3b8;\">\ud83d\udd17<\/span><br \/>\n<span style=\"flex: 1; font-weight: 500; color: #0f172a;\">CSS Cascading and Inheritance &#8211; MDN Web Docs<\/span><br \/>\n<span style=\"color: #94a3b8;\">\u2192<\/span><br \/>\n<\/a>\n<\/li>\n<li style=\"margin-bottom: 0;\">\n<a href=\"https:\/\/css-tricks.com\/specifics-on-css-specificity\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: white; border-radius: 8px; text-decoration: none; color: #1e293b; border: 1px solid #e2e8f0;\"><br \/>\n<span style=\"color: #94a3b8;\">\ud83d\udd17<\/span><br \/>\n<span style=\"flex: 1; font-weight: 500; color: #0f172a;\">Specifics on CSS Specificity &#8211; CSS-Tricks<\/span><br \/>\n<span style=\"color: #94a3b8;\">\u2192<\/span><br \/>\n<\/a>\n<\/li>\n<\/ul>\n<\/div>\n<h2>Validate your knowledge<\/h2>\n<p>Test your understanding with this 10-question quiz:<\/p>\n<div id=\"quiz-block-1\" class=\"quiz-container\" data-quiz-json=\"https:\/\/lmspro.fr\/wp-content\/plugins\/generate-article-endpoint\/quiz-data\/en\/quiz-la-mise-en-forme-css.json\" aria-label=\"Interactive Quiz\"><div class=\"quiz-loading\" role=\"status\" aria-live=\"polite\"><span class=\"quiz-sr-only\">Loading quiz...<\/span><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>CSS (Cascading Style Sheets) is the language that brings your web pages to life by controlling their visual appearance. Mastering cascading style sheets will allow you to transform your HTML documents into attractive and professional interfaces. Module: Module 1: Web Technical Fundamentals Level: \u2026 <a href=\"https:\/\/lmspro.fr\/en\/la-mise-en-forme-css-5\/\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> \u00ab\u00a0La mise en forme CSS\u00a0\u00bb<\/span> &raquo;<\/a><\/p>","protected":false},"author":1,"featured_media":533,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30],"tags":[34,25,26,132,27,28,133,2],"class_list":["post-532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-module-1-fondamentaux-techniques-du-web","tag-accessibilite","tag-animation","tag-css","tag-fondamentaux-web","tag-html","tag-javascript","tag-js","tag-ux"],"_links":{"self":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/comments?post=532"}],"version-history":[{"count":0,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/532\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media\/533"}],"wp:attachment":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media?parent=532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/categories?post=532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/tags?post=532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}