[{"data":1,"prerenderedAt":950},["ShallowReactive",2],{"page-\u002Fcss\u002Fpremiers-pas":3,"pieces-css":906,"autour-\u002Fcss\u002Fpremiers-pas":931,"prerequis-\u002Fcss\u002Fpremiers-pas":936,"plan-css":939},{"id":4,"title":5,"body":6,"description":876,"extension":877,"ligne":184,"meta":878,"motsCles":879,"navigation":426,"niveau":883,"path":884,"prerequis":885,"ressources":887,"seo":899,"sources":900,"stem":904,"__hash__":905},"docs\u002Fcss\u002F01.premiers-pas.md","Premiers pas en CSS",{"type":7,"value":8,"toc":864},"minimark",[9,14,32,36,48,147,160,170,174,180,230,237,262,268,272,275,302,305,309,319,382,385,452,458,462,473,501,506,510,513,592,622,625,629,635,711,714,744,759,765,769,772,801,810,814,861],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,26,29],"ul",{},[18,19,20,21,25],"li",{},"Relier un fichier ",[22,23,24],"code",{},".css"," à une page HTML.",[18,27,28],{},"Écrire une règle : un sélecteur, des propriétés, des valeurs.",[18,30,31],{},"Cibler un élément par sa balise, sa classe ou son identifiant.",[10,33,35],{"id":34},"relier-une-feuille-de-style","Relier une feuille de style",[37,38,39,40,43,44,47],"p",{},"Tu as une page HTML qui liste des recettes. Crée à côté un fichier ",[22,41,42],{},"style.css",", puis ajoute cette ligne dans le ",[22,45,46],{},"\u003Chead>"," de ta page :",[49,50,56],"pre",{"className":51,"code":52,"filename":53,"language":54,"meta":55,"style":55},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Chead>\n  \u003Cmeta charset=\"utf-8\">\n  \u003Ctitle>Mes recettes\u003C\u002Ftitle>\n  \u003Clink rel=\"stylesheet\" href=\"style.css\">\n\u003C\u002Fhead>\n","index.html","html","",[22,57,58,74,96,111,137],{"__ignoreMap":55},[59,60,63,67,71],"span",{"class":61,"line":62},"line",1,[59,64,66],{"class":65},"scfrF","\u003C",[59,68,70],{"class":69},"s5JFL","head",[59,72,73],{"class":65},">\n",[59,75,77,80,83,87,90,94],{"class":61,"line":76},2,[59,78,79],{"class":65},"  \u003C",[59,81,82],{"class":69},"meta",[59,84,86],{"class":85},"s5iOY"," charset",[59,88,89],{"class":65},"=",[59,91,93],{"class":92},"shWOn","\"utf-8\"",[59,95,73],{"class":65},[59,97,99,101,104,107,109],{"class":61,"line":98},3,[59,100,79],{"class":65},[59,102,103],{"class":69},"title",[59,105,106],{"class":65},">Mes recettes\u003C\u002F",[59,108,103],{"class":69},[59,110,73],{"class":65},[59,112,114,116,119,122,124,127,130,132,135],{"class":61,"line":113},4,[59,115,79],{"class":65},[59,117,118],{"class":69},"link",[59,120,121],{"class":85}," rel",[59,123,89],{"class":65},[59,125,126],{"class":92},"\"stylesheet\"",[59,128,129],{"class":85}," href",[59,131,89],{"class":65},[59,133,134],{"class":92},"\"style.css\"",[59,136,73],{"class":65},[59,138,140,143,145],{"class":61,"line":139},5,[59,141,142],{"class":65},"\u003C\u002F",[59,144,70],{"class":69},[59,146,73],{"class":65},[37,148,149,150,154,155,159],{},"Le ",[151,152,153],"strong",{},"CSS"," (",[156,157,158],"em",{},"Cascading Style Sheets",") est le langage qui décrit l'apparence d'une page : couleurs, tailles, positions. Le HTML dit ce que contient la page, le CSS dit comment elle s'affiche.",[37,161,162,163,165,166,169],{},"La balise ",[22,164,118],{}," charge le fichier. L'attribut ",[22,167,168],{},"href"," donne son chemin, relatif à la page.",[10,171,173],{"id":172},"une-règle-css","Une règle CSS",[37,175,176,177,179],{},"Voici ta première règle, dans ",[22,178,42],{}," :",[49,181,185],{"className":182,"code":183,"filename":42,"language":184,"meta":55,"style":55},"language-css shiki shiki-themes github-light-default github-dark-default github-dark-default","h1 {\n  color: darkred;\n  font-size: 2rem;\n}\n","css",[22,186,187,195,209,225],{"__ignoreMap":55},[59,188,189,192],{"class":61,"line":62},[59,190,191],{"class":69},"h1",[59,193,194],{"class":65}," {\n",[59,196,197,200,203,206],{"class":61,"line":76},[59,198,199],{"class":85},"  color",[59,201,202],{"class":65},": ",[59,204,205],{"class":85},"darkred",[59,207,208],{"class":65},";\n",[59,210,211,214,216,219,223],{"class":61,"line":98},[59,212,213],{"class":85},"  font-size",[59,215,202],{"class":65},[59,217,218],{"class":85},"2",[59,220,222],{"class":221},"sOnC1","rem",[59,224,208],{"class":65},[59,226,227],{"class":61,"line":113},[59,228,229],{"class":65},"}\n",[37,231,232,233,236],{},"Une ",[151,234,235],{},"règle"," se lit en trois morceaux :",[15,238,239,248,259],{},[18,240,241,242,154,245,247],{},"le ",[151,243,244],{},"sélecteur",[22,246,191],{},") désigne les éléments à styler ;",[18,249,250,251,254,255,258],{},"entre accolades, des ",[151,252,253],{},"déclarations",", chacune écrite sous la forme ",[22,256,257],{},"propriété: valeur;"," ;",[18,260,261],{},"le point-virgule termine chaque déclaration.",[37,263,264,265,267],{},"Ici, tous les titres ",[22,266,191],{}," de la page deviennent rouge foncé et grands. Si tu oublies un point-virgule, la déclaration suivante peut être ignorée : relis-les en cas de bug.",[10,269,271],{"id":270},"cibler-par-la-balise","Cibler par la balise",[37,273,274],{},"Le sélecteur le plus simple est le nom de la balise. Il s'applique à tous les éléments de ce type :",[49,276,278],{"className":182,"code":277,"language":184,"meta":55,"style":55},"p {\n  line-height: 1.5;\n}\n",[22,279,280,286,298],{"__ignoreMap":55},[59,281,282,284],{"class":61,"line":62},[59,283,37],{"class":69},[59,285,194],{"class":65},[59,287,288,291,293,296],{"class":61,"line":76},[59,289,290],{"class":85},"  line-height",[59,292,202],{"class":65},[59,294,295],{"class":85},"1.5",[59,297,208],{"class":65},[59,299,300],{"class":61,"line":98},[59,301,229],{"class":65},[37,303,304],{},"Tous les paragraphes de la page ont maintenant un interligne confortable. C'est pratique pour les réglages généraux, mais trop large pour styler une seule recette.",[10,306,308],{"id":307},"cibler-par-une-classe","Cibler par une classe",[37,310,232,311,314,315,318],{},[151,312,313],{},"classe"," est une étiquette que tu choisis et que tu poses sur des éléments HTML avec l'attribut ",[22,316,317],{},"class",".",[49,320,322],{"className":51,"code":321,"language":54,"meta":55,"style":55},"\u003Carticle class=\"recette\">\n  \u003Ch2>Tarte aux pommes\u003C\u002Fh2>\n  \u003Cp class=\"duree\">45 minutes\u003C\u002Fp>\n\u003C\u002Farticle>\n",[22,323,324,341,354,374],{"__ignoreMap":55},[59,325,326,328,331,334,336,339],{"class":61,"line":62},[59,327,66],{"class":65},[59,329,330],{"class":69},"article",[59,332,333],{"class":85}," class",[59,335,89],{"class":65},[59,337,338],{"class":92},"\"recette\"",[59,340,73],{"class":65},[59,342,343,345,347,350,352],{"class":61,"line":76},[59,344,79],{"class":65},[59,346,10],{"class":69},[59,348,349],{"class":65},">Tarte aux pommes\u003C\u002F",[59,351,10],{"class":69},[59,353,73],{"class":65},[59,355,356,358,360,362,364,367,370,372],{"class":61,"line":98},[59,357,79],{"class":65},[59,359,37],{"class":69},[59,361,333],{"class":85},[59,363,89],{"class":65},[59,365,366],{"class":92},"\"duree\"",[59,368,369],{"class":65},">45 minutes\u003C\u002F",[59,371,37],{"class":69},[59,373,73],{"class":65},[59,375,376,378,380],{"class":61,"line":113},[59,377,142],{"class":65},[59,379,330],{"class":69},[59,381,73],{"class":65},[37,383,384],{},"Dans le CSS, une classe s'écrit avec un point devant son nom :",[49,386,388],{"className":182,"code":387,"language":184,"meta":55,"style":55},".recette {\n  border: 1px solid gray;\n}\n\n.duree {\n  color: gray;\n}\n",[22,389,390,397,418,422,428,435,447],{"__ignoreMap":55},[59,391,392,395],{"class":61,"line":62},[59,393,394],{"class":85},".recette",[59,396,194],{"class":65},[59,398,399,402,404,407,410,413,416],{"class":61,"line":76},[59,400,401],{"class":85},"  border",[59,403,202],{"class":65},[59,405,406],{"class":85},"1",[59,408,409],{"class":221},"px",[59,411,412],{"class":85}," solid",[59,414,415],{"class":85}," gray",[59,417,208],{"class":65},[59,419,420],{"class":61,"line":98},[59,421,229],{"class":65},[59,423,424],{"class":61,"line":113},[59,425,427],{"emptyLinePlaceholder":426},true,"\n",[59,429,430,433],{"class":61,"line":139},[59,431,432],{"class":85},".duree",[59,434,194],{"class":65},[59,436,438,440,442,445],{"class":61,"line":437},6,[59,439,199],{"class":85},[59,441,202],{"class":65},[59,443,444],{"class":85},"gray",[59,446,208],{"class":65},[59,448,450],{"class":61,"line":449},7,[59,451,229],{"class":65},[37,453,454,455,318],{},"Plusieurs éléments peuvent partager la même classe. Un élément peut aussi en porter plusieurs, séparées par des espaces : ",[22,456,457],{},"class=\"recette vegetarienne\"",[10,459,461],{"id":460},"cibler-par-un-identifiant","Cibler par un identifiant",[37,463,464,465,468,469,472],{},"Un ",[151,466,467],{},"identifiant"," (attribut ",[22,470,471],{},"id",") nomme un élément unique de la page. En CSS, il s'écrit avec un dièse :",[49,474,476],{"className":182,"code":475,"language":184,"meta":55,"style":55},"#entete {\n  background-color: black;\n}\n",[22,477,478,485,497],{"__ignoreMap":55},[59,479,480,483],{"class":61,"line":62},[59,481,482],{"class":85},"#entete",[59,484,194],{"class":65},[59,486,487,490,492,495],{"class":61,"line":76},[59,488,489],{"class":85},"  background-color",[59,491,202],{"class":65},[59,493,494],{"class":85},"black",[59,496,208],{"class":65},[59,498,499],{"class":61,"line":98},[59,500,229],{"class":65},[37,502,464,503,505],{},[22,504,471],{}," ne doit apparaître qu'une fois par page. Pour le style, préfère les classes, plus souples. Tu verras pourquoi dans le cours sur la cascade.",[10,507,509],{"id":508},"combiner-des-sélecteurs","Combiner des sélecteurs",[37,511,512],{},"Tu peux viser un élément selon sa place dans la page.",[514,515,516,529],"table",{},[517,518,519],"thead",{},[520,521,522,526],"tr",{},[523,524,525],"th",{},"Écriture",[523,527,528],{},"Cible",[530,531,532,549,564,578],"tbody",{},[520,533,534,540],{},[535,536,537],"td",{},[22,538,539],{},"h1, h2",[535,541,542,543,545,546,548],{},"les ",[22,544,191],{}," et les ",[22,547,10],{}," (une virgule sépare plusieurs sélecteurs)",[520,550,551,556],{},[535,552,553],{},[22,554,555],{},".recette p",[535,557,542,558,560,561,563],{},[22,559,37],{}," situés à l'intérieur d'un ",[22,562,394],{}," (descendants)",[520,565,566,571],{},[535,567,568],{},[22,569,570],{},".recette > p",[535,572,542,573,575,576],{},[22,574,37],{}," directement enfants d'un ",[22,577,394],{},[520,579,580,585],{},[535,581,582],{},[22,583,584],{},"a:hover",[535,586,587,588,591],{},"un lien quand la souris le survole (",[151,589,590],{},"pseudo-classe",")",[49,593,595],{"className":182,"code":594,"language":184,"meta":55,"style":55},"a:hover {\n  color: crimson;\n}\n",[22,596,597,607,618],{"__ignoreMap":55},[59,598,599,602,605],{"class":61,"line":62},[59,600,601],{"class":69},"a",[59,603,604],{"class":85},":hover",[59,606,194],{"class":65},[59,608,609,611,613,616],{"class":61,"line":76},[59,610,199],{"class":85},[59,612,202],{"class":65},[59,614,615],{"class":85},"crimson",[59,617,208],{"class":65},[59,619,620],{"class":61,"line":98},[59,621,229],{"class":65},[37,623,624],{},"Une pseudo-classe décrit un état de l'élément. Ici le lien change de couleur au survol.",[10,626,628],{"id":627},"quelques-propriétés-et-couleurs","Quelques propriétés et couleurs",[37,630,232,631,634],{},[151,632,633],{},"propriété"," est un réglage visuel que tu peux modifier. Voici celles que tu utiliseras tout de suite :",[514,636,637,650],{},[517,638,639],{},[520,640,641,644,647],{},[523,642,643],{},"Propriété",[523,645,646],{},"Effet",[523,648,649],{},"Exemple de valeur",[530,651,652,666,681,696],{},[520,653,654,659,662],{},[535,655,656],{},[22,657,658],{},"color",[535,660,661],{},"couleur du texte",[535,663,664],{},[22,665,205],{},[520,667,668,673,676],{},[535,669,670],{},[22,671,672],{},"background-color",[535,674,675],{},"couleur de fond",[535,677,678],{},[22,679,680],{},"#f5f0e6",[520,682,683,688,691],{},[535,684,685],{},[22,686,687],{},"font-size",[535,689,690],{},"taille du texte",[535,692,693],{},[22,694,695],{},"1.25rem",[520,697,698,703,706],{},[535,699,700],{},[22,701,702],{},"text-align",[535,704,705],{},"alignement",[535,707,708],{},[22,709,710],{},"center",[37,712,713],{},"Une couleur s'écrit de plusieurs façons. Ces trois lignes donnent un rouge très proche :",[49,715,717],{"className":182,"code":716,"language":184,"meta":55,"style":55},"color: crimson;                 \u002F* un nom de couleur *\u002F\ncolor: #dc143c;                 \u002F* en hexadécimal *\u002F\ncolor: rgb(220 20 60);          \u002F* rouge, vert, bleu de 0 à 255 *\u002F\n",[22,718,719,728,736],{"__ignoreMap":55},[59,720,721,724],{"class":61,"line":62},[59,722,723],{"class":65},"color: crimson;                 ",[59,725,727],{"class":726},"sd6ml","\u002F* un nom de couleur *\u002F\n",[59,729,730,733],{"class":61,"line":76},[59,731,732],{"class":65},"color: #dc143c;                 ",[59,734,735],{"class":726},"\u002F* en hexadécimal *\u002F\n",[59,737,738,741],{"class":61,"line":98},[59,739,740],{"class":65},"color: rgb(220 20 60);          ",[59,742,743],{"class":726},"\u002F* rouge, vert, bleu de 0 à 255 *\u002F\n",[37,745,746,747,750,751,754,755,758],{},"Le texte entre ",[22,748,749],{},"\u002F*"," et ",[22,752,753],{},"*\u002F"," est un ",[151,756,757],{},"commentaire"," : le navigateur l'ignore, il sert à t'expliquer ton code.",[760,761,762],"tip",{},[37,763,764],{},"Ouvre les outils de développement de ton navigateur (touche F12), onglet « Éléments ». Tu vois les règles appliquées à chaque élément et tu peux les modifier en direct pour essayer.",[10,766,768],{"id":767},"où-écrire-son-css","Où écrire son CSS",[37,770,771],{},"Il existe trois emplacements possibles.",[773,774,775,784,794],"ol",{},[18,776,777,778,780,781,783],{},"Un fichier ",[22,779,24],{}," relié par ",[22,782,118],{}," : la bonne pratique, une feuille pour toutes les pages.",[18,785,786,787,790,791,793],{},"Une balise ",[22,788,789],{},"\u003Cstyle>"," dans le ",[22,792,46],{}," : pratique pour un test rapide.",[18,795,796,797,800],{},"L'attribut ",[22,798,799],{},"style"," sur une balise : à éviter, car il mélange fond et forme.",[802,803,804],"note",{},[37,805,806,807,809],{},"Une seule feuille ",[22,808,42],{}," peut servir à dix pages. Si tu changes la couleur d'un titre, elle change partout d'un coup. C'est tout l'intérêt de séparer le CSS du HTML.",[10,811,813],{"id":812},"à-retenir","À retenir",[15,815,816,824,830,841,852,858],{},[18,817,818,790,821,823],{},[22,819,820],{},"\u003Clink rel=\"stylesheet\" href=\"style.css\">",[22,822,46],{}," relie le CSS à la page.",[18,825,826,827,829],{},"Une règle est un sélecteur suivi de déclarations ",[22,828,257],{}," entre accolades.",[18,831,832,833,836,837,840],{},"La balise cible tous les éléments d'un type, la classe (",[22,834,835],{},".nom",") cible les éléments étiquetés, l'identifiant (",[22,838,839],{},"#nom",") cible un élément unique.",[18,842,843,844,846,847,846,849,851],{},"Les combinaisons (",[22,845,555],{},", ",[22,848,570],{},[22,850,539],{},") précisent où s'applique la règle.",[18,853,854,855,318],{},"Les couleurs s'écrivent par nom, en hexadécimal ou avec ",[22,856,857],{},"rgb()",[18,859,860],{},"Les outils de développement (F12) permettent de tester le CSS en direct.",[799,862,863],{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .sd6ml, html code.shiki .sd6ml{--shiki-light:#6E7781;--shiki-default:#8B949E;--shiki-dark:#8B949E}",{"title":55,"searchDepth":76,"depth":98,"links":865},[866,867,868,869,870,871,872,873,874,875],{"id":12,"depth":76,"text":13},{"id":34,"depth":76,"text":35},{"id":172,"depth":76,"text":173},{"id":270,"depth":76,"text":271},{"id":307,"depth":76,"text":308},{"id":460,"depth":76,"text":461},{"id":508,"depth":76,"text":509},{"id":627,"depth":76,"text":628},{"id":767,"depth":76,"text":768},{"id":812,"depth":76,"text":813},"Relier une feuille de style à une page HTML, écrire des règles avec sélecteurs et propriétés, et comprendre les premières couleurs.","md",{},[153,880,118,244,633,881,313,882,757],"feuille de style","déclaration","couleur","debutant","\u002Fcss\u002Fpremiers-pas",[886],"\u002Fhtml\u002Fune-page-web",[888,892,895],{"nom":889,"url":890,"type":891},"MDN, Premiers pas avec CSS","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FStyling_basics\u002FGetting_started","cours",{"nom":893,"url":894,"type":891},"MDN, Sélecteurs de base","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FStyling_basics\u002FBasic_selectors",{"nom":896,"url":897,"type":898},"Grafikart, Formation CSS","https:\u002F\u002Fgrafikart.fr\u002Fformations\u002Fcss","video",{"title":5,"description":876},[901],{"nom":902,"url":903},"MDN, Les bases du style","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FStyling_basics","css\u002F01.premiers-pas","GtUXiYIMAR-Iw6sIRJSrkaAF5TR5JyhJI3Yc5VzsNhI",[907,908,912,916,920,924,928],{"path":884,"title":5,"stem":904},{"path":909,"title":910,"stem":911},"\u002Fcss\u002Fcascade-et-specificite","Cascade et spécificité","css\u002F02.cascade-et-specificite",{"path":913,"title":914,"stem":915},"\u002Fcss\u002Fboites-et-texte","Boîtes, unités et texte","css\u002F03.boites-et-texte",{"path":917,"title":918,"stem":919},"\u002Fcss\u002Fflexbox","Flexbox","css\u002F04.flexbox",{"path":921,"title":922,"stem":923},"\u002Fcss\u002Fgrid-et-responsive","Grid et responsive","css\u002F05.grid-et-responsive",{"path":925,"title":926,"stem":927},"\u002Fcss\u002Fvariables-et-animations","Variables, transitions et animations","css\u002F06.variables-et-animations",{"path":929,"title":153,"stem":930},"\u002Fcss","css\u002Findex",[932,934],{"title":153,"path":929,"stem":930,"description":933,"children":-1},"Le mémo de CSS : sélecteurs, cascade, boîtes, unités, flexbox, grid, responsive, variables et animations.",{"title":910,"path":909,"stem":911,"description":935,"children":-1},"Comprendre pourquoi une règle CSS l'emporte sur une autre grâce à la spécificité, à l'ordre d'écriture et à l'héritage.",[937],{"path":886,"title":938,"ligne":54},"Qu'est-ce que HTML ?",[940,941,942,943,945,946,948],{"path":884,"title":5,"niveau":883,"stem":904},{"path":909,"title":910,"niveau":883,"stem":911},{"path":913,"title":914,"niveau":883,"stem":915},{"path":917,"title":918,"niveau":944,"stem":919},"intermediaire",{"path":921,"title":922,"niveau":944,"stem":923},{"path":925,"title":926,"niveau":947,"stem":927},"avance",{"path":929,"title":153,"niveau":949,"stem":930},"memo",1794583446650]