[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en":3,"cheatsheet:\u002Fcheatsheets\u002Fcss3-the-visual-guide":37},[4,11,17,24,30],{"id":5,"slug":6,"name":7,"colorHex":8,"iconName":9,"postCount":10},"0e2c1225-f78a-4c20-8c93-998ab9dc93b9","frontend","Frontend","#40484f",null,25,{"id":12,"slug":13,"name":14,"colorHex":15,"iconName":9,"postCount":16},"bc8df70e-b7fb-4d89-a80c-fd458d36d58c","code-development","Code & Development","#8b5cf6",23,{"id":18,"slug":19,"name":20,"colorHex":21,"iconName":22,"postCount":23},"550e8400-e29b-41d4-a716-446655440001","inteligencia-artificial","Artificial Intelligence","#6366f1","brain",14,{"id":25,"slug":26,"name":27,"colorHex":28,"iconName":9,"postCount":29},"ea63b69c-2eb4-4100-81f3-70ce52d33743","tech-news","Tech News","#e50606",4,{"id":31,"slug":32,"name":33,"colorHex":34,"iconName":35,"postCount":36},"550e8400-e29b-41d4-a716-446655440017","how-to-guides","How-To & Guides","#be123c","book-open",2,{"id":38,"slug":39,"title":40,"description":41,"category":6,"level":42,"codeLanguage":43,"views":36,"updatedAt":44,"tags":45,"sections":55,"snippetCount":1493},"ab6964e0-d0e7-4efd-bf70-e941ef20369b","css3-the-visual-guide","CSS3: The Visual Guide","Stop guessing display or position values. Master Flexbox, Grid and responsive layouts visually in seconds.","advanced","css","2026-04-11T03:55:25.395607+00:00",[43,6,46,47,48,49,50,51,52,53,54],"web-design","layout","responsividade","animações","flexbox","grid","variaveis-css","estilização","desenvolvimento-web",[56,157,282,407,532,663,806,929,1022,1145,1270,1391],{"id":57,"title":58,"description":59,"snippets":60},"901cd63a-e1a1-4df9-8ab3-879010930959","🎯 Basic Selectors","This section covers the fundamentals of selecting HTML elements using CSS, enabling you to apply styles to specific elements, groups of elements, or elements with unique identifiers.",[61,67,73,79,85,91,97,103,109,115,121,127,133,139,145,151],{"id":62,"title":63,"description":64,"code":65,"language":43,"filename":9,"whenToUse":9,"highlighted":66},"263de36c-c2e2-4b08-bd0b-623136576869","Element Selector: Paragraph","Selects all paragraph (\u003Cp>) elements in the HTML document and applies blue text color to them. This is the most fundamental type of selector, acting directly on the HTML tag name.","p { color: blue; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">blue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":68,"title":69,"description":70,"code":71,"language":43,"filename":9,"whenToUse":9,"highlighted":72},"391cc778-e360-49d3-886d-d414c0486720","Element Selector: H1 Heading","Selects all level 1 heading (\u003Ch1>) elements in the HTML document and sets the font size to 2 times the parent element's default font size. Useful for consistently styling all headings of a given level.","h1 { font-size: 2em; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">em\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":74,"title":75,"description":76,"code":77,"language":43,"filename":9,"whenToUse":9,"highlighted":78},"3152ed9f-e428-46ef-9814-c7452717a1fd","Element Selector: Division","Selects all divisions (\u003Cdiv>) in the HTML document and applies a 10-pixel margin on all four sides (top, right, bottom, left). Used for uniform external spacing of all div blocks.","div { margin: 10px; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":80,"title":81,"description":82,"code":83,"language":43,"filename":9,"whenToUse":9,"highlighted":84},"862bc3a1-1dcb-45b2-981b-8620d306d67a","Element Selector: Span","Selects all span (\u003Cspan>) elements and ensures they behave as inline elements, occupying only the space necessary for their content. Although `inline` is the default for `span`, this declaration can be used to reinforce or override inherited styles.","span { display: inline; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">inline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":86,"title":87,"description":88,"code":89,"language":43,"filename":9,"whenToUse":9,"highlighted":90},"7fabd8a7-b3c7-4278-a3f6-eb0e9ae25881","Generic Class Selector","Selects all HTML elements that have the `class=\"classe\"` attribute and sets the text color to red. Class selectors are ideal for applying styles to multiple unrelated elements or for style reuse.",".classe { color: red; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.classe\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">red\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":92,"title":93,"description":94,"code":95,"language":43,"filename":9,"whenToUse":9,"highlighted":96},"4ee33e7e-95c5-4385-8fa5-a2fb337fd720","Class Selector: Primary Button","Selects elements with the `btn-primary` class and sets the background color to blue. Commonly used to style primary buttons in user interfaces.",".btn-primary { background: blue; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.btn-primary\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">blue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":98,"title":99,"description":100,"code":101,"language":43,"filename":9,"whenToUse":9,"highlighted":102},"a37c84b7-9e50-4c2c-889b-72835f7470c6","Class Selector: Centered Text","Selects elements with the `text-center` class and centers the text within them. A common utility class for text alignment.",".text-center { text-align: center; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.text-center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">text-align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":104,"title":105,"description":106,"code":107,"language":43,"filename":9,"whenToUse":9,"highlighted":108},"d803665f-4c19-4f86-83ed-8798a5aace5b","Class Selector: Hidden Element","Selects elements with the `hidden` class and completely removes them from the document flow, making them invisible and non-interactive. Unlike `visibility: hidden;`, `display: none;` does not occupy space.",".hidden { display: none; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":110,"title":111,"description":112,"code":113,"language":43,"filename":9,"whenToUse":9,"highlighted":114},"0832fc7e-4067-45b9-8d4b-3e5433bb4b66","ID Selector: Header","Selects the HTML element with the `id=\"header\"` attribute and positions it fixed in the viewport. ID selectors should be used for unique elements on the page.","#header { position: fixed; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#header\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">fixed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":116,"title":117,"description":118,"code":119,"language":43,"filename":9,"whenToUse":9,"highlighted":120},"71462ee9-a9bf-49c3-8d81-43322f532c42","ID Selector: Main Content","Selects the element with the ID `main-content` and sets its maximum width to 1200 pixels. This ensures that the main content does not exceed a specific width, keeping it readable on large screens.","#main-content { max-width: 1200px; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#main-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">max-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1200\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":122,"title":123,"description":124,"code":125,"language":43,"filename":9,"whenToUse":9,"highlighted":126},"7524f317-f8a0-4892-b172-e85f01ee52d4","ID Selector: Sidebar","Selects the element with the ID `sidebar` and sets its width to 300 pixels. Used to define fixed dimensions for specific layout components.","#sidebar { width: 300px; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#sidebar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">300\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":128,"title":129,"description":130,"code":131,"language":43,"filename":9,"whenToUse":9,"highlighted":132},"8e171502-2441-4ad3-b1bb-68e2dd98228e","ID Selector: Footer","Selects the element with the ID `footer` and applies a top margin of 50 pixels. This creates spacing between the footer and the content above it.","#footer { margin-top: 50px; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#footer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">margin-top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":134,"title":135,"description":136,"code":137,"language":43,"filename":9,"whenToUse":9,"highlighted":138},"964722ed-9208-478b-99e5-470187181d26","Combined Selector: Div with Class","Selects only `div` elements that also have the `container` class, setting their width to 100%. This selector combines an element selector with a class selector for greater specificity.","div.container { width: 100%; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.container\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":140,"title":141,"description":142,"code":143,"language":43,"filename":9,"whenToUse":9,"highlighted":144},"fe150bbd-de76-4d9e-acdc-b67057a7e534","Combined Selector: List Item in Navigation","Selects all list items (\u003Cli>) that are descendants of an unordered list (\u003Cul>) with the `nav` class, making them behave as inline elements. Commonly used to create horizontal navigation menus.","ul.nav li { display: inline; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.nav\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\"> li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">inline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":146,"title":147,"description":148,"code":149,"language":43,"filename":9,"whenToUse":9,"highlighted":150},"5c241d10-d2e1-4871-a0c7-75de0a0f370b","Combined Selector: Element with Class inside ID","Selects the element with the `logo` class that is a descendant of an element with the `header` ID, making it float left. This is useful for positioning specific elements within an identified container.","#header .logo { float: left; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#header\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> .logo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">float\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":152,"title":153,"description":154,"code":155,"language":43,"filename":9,"whenToUse":9,"highlighted":156},"b3f9c21f-33a4-42db-bde8-82041d05ad76","Combined Selector: H2 Title in Article","Selects all level 2 headings (\u003Ch2>) that are descendants of an `\u003Carticle>` element with the `post` class, setting their color to a dark gray shade. Helps style headings within a specific content context.","article.post h2 { color: #333; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">article\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.post\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\"> h2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">#333\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":158,"title":159,"description":160,"snippets":161},"6c357c01-7c95-4ac6-b6aa-688d1356efa4","📦 Box Model","The Box Model is a fundamental CSS concept describing how HTML elements are rendered as rectangular boxes. Each box has content, padding, border, and margin, which together determine the total size and spacing of the element on the page.",[162,168,174,180,186,192,198,204,210,216,222,228,234,240,246,252,258,264,270,276],{"id":163,"title":164,"description":165,"code":166,"language":43,"filename":9,"whenToUse":9,"highlighted":167},"ce04f20d-8413-4a08-96b0-93a9f6c47be3","Element Width","Sets the explicit content width of the element to 300 pixels. This property controls the horizontal dimension of the element.","width: 300px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">width: 300px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":169,"title":170,"description":171,"code":172,"language":43,"filename":9,"whenToUse":9,"highlighted":173},"a5e4e733-876e-4b1f-bfbe-a4d7df04913b","Element Height","Sets the explicit content height of the element to 200 pixels. This property controls the vertical dimension of the element.","height: 200px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">height: 200px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":175,"title":176,"description":177,"code":178,"language":43,"filename":9,"whenToUse":9,"highlighted":179},"b85e5a9f-bc8c-41a8-b24f-14bef000db60","Maximum Width","Sets the maximum width an element can occupy to 100% of its parent container. This is crucial for making elements, such as images, responsive, ensuring they do not overflow on smaller screens.","max-width: 100%;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">max-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 100%;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":181,"title":182,"description":183,"code":184,"language":43,"filename":9,"whenToUse":9,"highlighted":185},"de56123f-51b2-499b-8d63-c66defc2cfb2","Minimum Height","Sets the minimum height of the element to 100% of the viewport height (visible height of the browser window). Ensures the element occupies at least the full screen height, useful for full-page layouts.","min-height: 100vh;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 100vh;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":187,"title":188,"description":189,"code":190,"language":43,"filename":9,"whenToUse":9,"highlighted":191},"18465c5f-27cd-49b5-aeea-27ac5ecbf22e","Box Sizing: Border-Box","Changes the default Box Model, making an element's width and height include padding and border, but not margin. This simplifies dimension calculation and layout, as the element's total size remains consistent regardless of added padding or border.","box-sizing: border-box;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">box-sizing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">border-box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":193,"title":194,"description":195,"code":196,"language":43,"filename":9,"whenToUse":9,"highlighted":197},"3ed0adae-a1d5-4cdb-920f-452098ad5f03","Margin on All Sides","Applies a 10-pixel margin on all four sides (top, right, bottom, left) of the element. Margin creates external space between the element and other adjacent elements.","margin: 10px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">margin: 10px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":199,"title":200,"description":201,"code":202,"language":43,"filename":9,"whenToUse":9,"highlighted":203},"7fee4158-8668-4cd7-8787-3e8b430ccc12","Vertical and Horizontal Margin","Applies a 10-pixel margin to the top and bottom, and 20 pixels to the left and right of the element. This is a shorthand syntax for setting vertical and horizontal margins differently.","margin: 10px 20px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">margin: 10px 20px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":205,"title":206,"description":207,"code":208,"language":43,"filename":9,"whenToUse":9,"highlighted":209},"cab0ef9a-09ec-4b79-b905-9b973a0d4a9f","Individual Side Margin","Sets specific margins for each side of the element, in order: top (10px), right (15px), bottom (20px), and left (25px). Allows granular control over external spacing.","margin: 10px 15px 20px 25px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">margin: 10px 15px 20px 25px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":211,"title":212,"description":213,"code":214,"language":43,"filename":9,"whenToUse":9,"highlighted":215},"3fe49ab1-2b0a-4034-8d5d-51853977e148","Margin Top Only","Applies a 20-pixel margin exclusively to the top of the element, without affecting other sides. Useful for creating specific vertical spacing.","margin-top: 20px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">margin-top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 20px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":217,"title":218,"description":219,"code":220,"language":43,"filename":9,"whenToUse":9,"highlighted":221},"4bd2a0f3-44f5-44ec-8bdd-494bf1ce4690","Center Horizontally","Sets the top and bottom margins to 0 and the side margins to \"auto\". For block elements with a defined width, this centers them horizontally within their parent container.","margin: 0 auto;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">margin: 0 auto;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":223,"title":224,"description":225,"code":226,"language":43,"filename":9,"whenToUse":9,"highlighted":227},"280e7b6e-7ff6-4540-89d2-81a491922872","Padding on All Sides","Applies a padding of 15 pixels to all four sides of the element's content. Padding creates internal space between the content and the element's border.","padding: 15px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">padding: 15px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":229,"title":230,"description":231,"code":232,"language":43,"filename":9,"whenToUse":9,"highlighted":233},"65308dd3-d124-4dcb-98ec-5345cc85594f","Vertical and Horizontal Padding","Applies 10 pixels of padding to the top and bottom, and 20 pixels to the left and right of the element. Shorthand syntax for setting vertical and horizontal padding differently.","padding: 10px 20px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">padding: 10px 20px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":235,"title":236,"description":237,"code":238,"language":43,"filename":9,"whenToUse":9,"highlighted":239},"eb964dfd-1b3b-4673-8056-d44b4cd3881d","Individual Padding per Side","Sets specific padding for each side of the element, in order: top (5px), right (10px), bottom (15px), and left (20px). Allows granular control over internal spacing.","padding: 5px 10px 15px 20px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">padding: 5px 10px 15px 20px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":241,"title":242,"description":243,"code":244,"language":43,"filename":9,"whenToUse":9,"highlighted":245},"96ba1dd1-fd5e-4bb0-b8e5-cb81ce729154","Padding Only on Left","Applies a 30-pixel padding exclusively to the left side of the element, without affecting other sides. Useful for creating specific internal spacing.","padding-left: 30px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">padding-left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 30px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":247,"title":248,"description":249,"code":250,"language":43,"filename":9,"whenToUse":9,"highlighted":251},"0ffe6fe8-1c8b-4bb3-aad5-f7316abac6e4","Padding with Relative Unit","Applies a 1 \"em\" padding on all sides. The `em` unit is relative to the element's own font size, making the spacing scalable with the text.","padding: 1em;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">padding: 1em;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":253,"title":254,"description":255,"code":256,"language":43,"filename":9,"whenToUse":9,"highlighted":257},"137d28cd-08e6-44cc-b954-bd2842150030","Full Border","Defines a 1-pixel wide, solid style, light gray (`#ccc`) border on all four sides of the element. This is a shorthand property for `border-width`, `border-style`, and `border-color`.","border: 1px solid #ccc;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">border: 1px solid \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">#ccc;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":259,"title":260,"description":261,"code":262,"language":43,"filename":9,"whenToUse":9,"highlighted":263},"ea3641ea-cc41-41d7-a5a4-e3cbe5fc72b6","Rounded Borders","Applies a 5-pixel radius to the element's corners, making them rounded. A larger value results in more rounded corners.","border-radius: 5px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 5px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":265,"title":266,"description":267,"code":268,"language":43,"filename":9,"whenToUse":9,"highlighted":269},"e02eed14-c7e5-4859-869b-425099a18ce5","Circular\u002FOval Shape","Applies a 50% radius to the element's corners. If the element is square, it will become a perfect circle; if rectangular, it will become an oval shape.","border-radius: 50%;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 50%;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":271,"title":272,"description":273,"code":274,"language":43,"filename":9,"whenToUse":9,"highlighted":275},"c9e2a87d-213c-4a31-947c-b4d63a083ed5","Styled Top Border","Defines a 2-pixel wide, dashed style, red border only on the top of the element. Allows individual borders to be styled independently.","border-top: 2px dashed red;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">border-top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 2px dashed red;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":277,"title":278,"description":279,"code":280,"language":43,"filename":9,"whenToUse":9,"highlighted":281},"56c32a4a-a523-4c5a-b586-aae113b0eb12","Remove Border","Completely removes any existing border from the element. It's a concise way to ensure an element has no borders.","border: none;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">border: none;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":283,"title":284,"description":285,"snippets":286},"49e453a6-76e5-4439-ae17-f077abde29e0","📝 Typography","This section details CSS properties used to control text and font appearance, including family, size, weight, style, decoration, alignment, and spacing. Essential for readability and aesthetics of text content.",[287,293,299,305,311,317,323,329,335,341,347,353,359,365,371,377,383,389,395,401],{"id":288,"title":289,"description":290,"code":291,"language":43,"filename":9,"whenToUse":9,"highlighted":292},"ef0c7c0e-64b4-4c4e-b2d0-a754571aa32b","Default Font Family","Defines the font family for the text. The browser will try to use \"Arial\" first; if not available, it will use any generic \"sans-serif\" font. It is good practice to provide fallback fonts.","font-family: Arial, sans-serif;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">font-family\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: Arial, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">sans-serif\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":294,"title":295,"description":296,"code":297,"language":43,"filename":9,"whenToUse":9,"highlighted":298},"1cfd7dce-e510-437d-a7bc-7f7356a0babc","Font Family with Spaces","Defines the font family, using quotes for font names that contain spaces, such as \"Helvetica Neue\". If the first is not available, \"Helvetica\" will be used as a fallback.","font-family: \"Helvetica Neue\", Helvetica;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">font-family\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \"Helvetica Neue\", Helvetica;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":300,"title":301,"description":302,"code":303,"language":43,"filename":9,"whenToUse":9,"highlighted":304},"162a7c2b-2478-43ef-9eaa-c7183610f4b6","Serif Font","Sets the font family to a serif font, such as \"Times New Roman\". Serif fonts are traditionally used for long texts in print.","font-family: \"Times New Roman\", serif;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">font-family\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \"Times New Roman\", serif;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":306,"title":307,"description":308,"code":309,"language":43,"filename":9,"whenToUse":9,"highlighted":310},"699fb6bb-1c45-4ae6-a158-0e4b5c9c5f8e","Monospaced Font","Sets the font family to a monospaced font, such as \"Courier New\". Monospaced fonts are those where all characters have the same width, ideal for code blocks or tabular data.","font-family: \"Courier New\", monospace;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">font-family\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \"Courier New\", monospace;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":312,"title":313,"description":314,"code":315,"language":43,"filename":9,"whenToUse":9,"highlighted":316},"ef2f32b9-4961-4f3e-ab31-e1b268c74d72","Fallback Fonts","Defines a sequence of fallback fonts. The browser will try \"Georgia\", then \"Times New Roman\", and finally any available generic \"serif\" font, ensuring compatibility.","font-family: Georgia, \"Times New Roman\", serif;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">font-family\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: Georgia, \"Times New Roman\", serif;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":318,"title":319,"description":320,"code":321,"language":43,"filename":9,"whenToUse":9,"highlighted":322},"75149e38-b897-40f5-b202-e90ead534c9b","Font Size in Pixels","Sets the font size to 16 pixels. Pixel units provide fixed and precise size control but can be less flexible for responsiveness.","font-size: 16px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 16px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":324,"title":325,"description":326,"code":327,"language":43,"filename":9,"whenToUse":9,"highlighted":328},"fbbc72d2-3ac2-4dac-880c-be235d6be174","Font Size Relative to Parent (em)","Sets the font size to 1 \"em\", which is equivalent to the parent element's font size. This allows text to adapt proportionally to its container.","font-size: 1em;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 1em;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":330,"title":331,"description":332,"code":333,"language":43,"filename":9,"whenToUse":9,"highlighted":334},"4a63cc98-4865-474e-a159-a83999b0d780","Font Size Relative to Root (rem)","Sets the font size to 1 \"rem\", which is equivalent to the font size of the root element (\u003Chtml>). `rem` is ideal for maintaining a consistent font scale throughout the document, facilitating responsiveness.","font-size: 1rem;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 1rem;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":336,"title":337,"description":338,"code":339,"language":43,"filename":9,"whenToUse":9,"highlighted":340},"3d87b037-63da-4159-a3cc-a8a08acece96","Font Weight: Bold","Sets the font weight to bold. Can be used to highlight important text. Other values include `normal`, `lighter`, `bolder`, or numeric values from 100 to 900.","font-weight: bold;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: bold;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":342,"title":343,"description":344,"code":345,"language":43,"filename":9,"whenToUse":9,"highlighted":346},"3a8580cf-ae98-4b68-affc-273d1c28f4a8","Numeric Font Weight","Sets the font weight using a numeric value (between 100 and 900, in multiples of 100). `300` usually corresponds to a \"light\" or \"thin\" font, if available in the font family.","font-weight: 300;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 300;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":348,"title":349,"description":350,"code":351,"language":43,"filename":9,"whenToUse":9,"highlighted":352},"0a77a03e-63ac-4ee7-8642-54ed80a4e555","Font Style: Italic","Sets the font style to italic. Used to emphasize text or for specific typographic styles. Other values include `normal` and `oblique`.","font-style: italic;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">font-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: italic;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":354,"title":355,"description":356,"code":357,"language":43,"filename":9,"whenToUse":9,"highlighted":358},"b4c81008-fd8d-49c9-bac5-8272b7809a22","Text Decoration: Underline","Applies a line below the text, i.e., underlines it. Commonly used for links, but can be applied to any text.","text-decoration: underline;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">text-decoration\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: underline;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":360,"title":361,"description":362,"code":363,"language":43,"filename":9,"whenToUse":9,"highlighted":364},"d2461fc5-ad05-4635-b2fe-3d644820545d","Remover Decoração de Texto","Remove qualquer decoração de texto padrão, como o sublinhado em links (\u003Ca>). Essencial para estilizar links de forma personalizada.","text-decoration: none;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">text-decoration\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: none;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":366,"title":367,"description":368,"code":369,"language":43,"filename":9,"whenToUse":9,"highlighted":370},"df5d1ef6-995b-418b-b9c6-7eade18cb9a0","Text Transform: Uppercase","Converts all text of the element to uppercase letters, without changing the original content in HTML. Useful for titles or visual emphasis.","text-transform: uppercase;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">text-transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: uppercase;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":372,"title":373,"description":374,"code":375,"language":43,"filename":9,"whenToUse":9,"highlighted":376},"45761de7-4d6c-4ce2-9dbc-2415f765b90f","Text Transform: Capitalize","Converts the first letter of each word in the element's text to uppercase. Useful for titles or proper nouns.","text-transform: capitalize;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">text-transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: capitalize;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":378,"title":379,"description":380,"code":381,"language":43,"filename":9,"whenToUse":9,"highlighted":382},"c1e75ca8-cf31-4ec1-950b-25d53da07ac7","Text Alignment: Centered","Horizontally centers the text within its container element. Applies to block elements or table cells.","text-align: center;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">text-align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: center;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":384,"title":385,"description":386,"code":387,"language":43,"filename":9,"whenToUse":9,"highlighted":388},"84b253d2-259a-4119-bc77-72c3dfe09fc2","Text Alignment: Justified","Distributes text evenly between the left and right margins, adding extra space between words as needed. Commonly used in long blocks of text for a formal appearance.","text-align: justify;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">text-align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: justify;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":390,"title":391,"description":392,"code":393,"language":43,"filename":9,"whenToUse":9,"highlighted":394},"2003e941-dc91-4125-b100-968d3fe9ae88","Line Height","Sets the line height to 1.5 times the element's font size. A unitless `line-height` is most recommended as it scales proportionally with `font-size`, improving readability.","line-height: 1.5;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">line-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 1.5;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":396,"title":397,"description":398,"code":399,"language":43,"filename":9,"whenToUse":9,"highlighted":400},"ac648e36-4976-48f4-934d-48a8cbe1ef17","Letter Spacing","Adds an extra 1-pixel spacing between text characters. Can be used to adjust the visual density of the text.","letter-spacing: 1px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">letter-spacing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 1px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":402,"title":403,"description":404,"code":405,"language":43,"filename":9,"whenToUse":9,"highlighted":406},"1f6a64bd-9b9d-4db2-88ed-f4c9d9c73611","Word Spacing","Adds an extra 2-pixel spacing between words in the text. Can be used to adjust the readability of phrases.","word-spacing: 2px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">word-spacing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 2px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":408,"title":409,"description":410,"snippets":411},"df79811c-b93c-4d42-846b-e88405f1aa4b","🎨 Colors and Backgrounds","This section explores CSS properties for setting text colors, background colors and images, as well as applying gradients and other visual effects. Crucial for the visual identity of any web page.",[412,418,424,430,436,442,448,454,460,466,472,478,484,490,496,502,508,514,520,526],{"id":413,"title":414,"description":415,"code":416,"language":43,"filename":9,"whenToUse":9,"highlighted":417},"67e2d2df-1c72-4554-a08a-b86fcdde3aca","Hexadecimal Color","Sets the text color using a 6-digit (or 3-digit) hexadecimal code, where each pair represents the Red, Green, and Blue (RGB) values. `#333333` is a dark gray shade.","color: #333333;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">color: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">#333333\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":419,"title":420,"description":421,"code":422,"language":43,"filename":9,"whenToUse":9,"highlighted":423},"102eeb8c-a136-4701-a27f-858d9dbc045f","RGB Color","Sets the text color using the RGB (Red, Green, Blue) model, with values from 0 to 255 for each component. `rgb(51, 51, 51)` is equivalent to `#333333`.","color: rgb(51, 51, 51);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">color: rgb(51, 51, 51);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":425,"title":426,"description":427,"code":428,"language":43,"filename":9,"whenToUse":9,"highlighted":429},"9124b2c9-f593-4053-bffd-d25b0b225f73","RGBA Color (with Transparency)","Defines the text color using the RGBA model, which includes an alpha channel (transparency) with a value from 0 (fully transparent) to 1 (fully opaque). `0.8` means 80% opacity.","color: rgba(51, 51, 51, 0.8);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">color: rgba(51, 51, 51, 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":431,"title":432,"description":433,"code":434,"language":43,"filename":9,"whenToUse":9,"highlighted":435},"9ab82a2b-d0b4-410c-98e2-67c340f367ea","HSL Color","Defines the text color using the HSL model (Hue, Saturation, Lightness). `Hue` is a degree on the color circle (0-360), `Saturation` is the color intensity (0-100%), and `Lightness` is the brightness (0-100%). `hsl(0, 0%, 20%)` is a dark gray.","color: hsl(0, 0%, 20%);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">color: hsl(0, 0%, 20%);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":437,"title":438,"description":439,"code":440,"language":43,"filename":9,"whenToUse":9,"highlighted":441},"3f785bd9-eb53-435c-a3b3-4465d3908214","Inherit Parent Color","Makes the element inherit the text color from its parent element. Useful for maintaining color consistency in nested elements.","color: inherit;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">color: inherit;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":443,"title":444,"description":445,"code":446,"language":43,"filename":9,"whenToUse":9,"highlighted":447},"9079a2c6-91c6-4002-b927-d37cf04b444f","Solid Background Color","Sets a solid background color for the element using a hexadecimal code. `#f5f5f5` is a very light gray tone, almost white.","background-color: #f5f5f5;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">background-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">#f5f5f5;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":449,"title":450,"description":451,"code":452,"language":43,"filename":9,"whenToUse":9,"highlighted":453},"0f8cbb01-c6d7-4a49-a819-c763d4d12a07","Linear Background Gradient","Applies a linear gradient as a background color, transitioning from one color to another in a specific direction. `to right` indicates the gradient goes from left to right, with colors `#ff7e5f` (reddish orange) and `#feb47b` (peach).","background: linear-gradient(to right, #ff7e5f, #feb47b);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">background: linear-gradient(to right, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#ff7e5f\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#feb47b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":455,"title":456,"description":457,"code":458,"language":43,"filename":9,"whenToUse":9,"highlighted":459},"a68a293f-1dec-4c27-b33b-014d11bd4de1","Radial Background Gradient","Applies a radial gradient as a background color, spreading from a central point. `circle` defines the gradient's shape, transitioning from `#ff7e5f` at the center to `#feb47b` at the edges.","background: radial-gradient(circle, #ff7e5f, #feb47b);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">background: radial-gradient(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">circle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#ff7e5f\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#feb47b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":461,"title":462,"description":463,"code":464,"language":43,"filename":9,"whenToUse":9,"highlighted":465},"3fa3cf76-6d54-4538-968d-01c76c21e742","Background Image","Sets an image as the element's background. The path to the image is specified within `url()`. By default, the image will repeat to cover the entire element.","background: url(\"image.jpg\");","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">background: url(\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">image\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.jpg\");\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":467,"title":468,"description":469,"code":470,"language":43,"filename":9,"whenToUse":9,"highlighted":471},"10b26b49-4d0b-49dd-a183-7cd16e0e101c","Background Image Size: Cover","Adjusts the background image size so that it completely covers the element's area, cropping any excess parts. Maintains the image's aspect ratio.","background-size: cover;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">background-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: cover;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":473,"title":474,"description":475,"code":476,"language":43,"filename":9,"whenToUse":9,"highlighted":477},"e0517560-4e35-438a-a369-a7aab9b8c313","Do Not Repeat Background Image","Prevents the background image from repeating. If the image is smaller than the element, it will appear only once.","background-repeat: no-repeat;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">background-repeat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">no-repeat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":479,"title":480,"description":481,"code":482,"language":43,"filename":9,"whenToUse":9,"highlighted":483},"58477fa8-a926-47a2-9d5b-feb864c9f68e","Background Image Position: Center","Positions the background image in the horizontal and vertical center of the element. Can be combined with `background-repeat: no-repeat;` to display a single centered image.","background-position: center center;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">background-position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> center;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":485,"title":486,"description":487,"code":488,"language":43,"filename":9,"whenToUse":9,"highlighted":489},"dbc1bca7-05ad-4599-bd1c-06ffbbacc262","Fixed Background on Scroll","Makes the background image remain fixed in the viewport while the rest of the page content scrolls. Creates a parallax effect.","background-attachment: fixed;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">background-attachment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: fixed;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":491,"title":492,"description":493,"code":494,"language":43,"filename":9,"whenToUse":9,"highlighted":495},"a88c8872-b366-4f4b-9ae9-1afa05e9c5d7","Background Blend Mode","Defines how an element's background images (or colors) should be blended with each other. `multiply` multiplies the background colors, resulting in darker colors.","background-blend-mode: multiply;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">background-blend-mode\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: multiply;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":497,"title":498,"description":499,"code":500,"language":43,"filename":9,"whenToUse":9,"highlighted":501},"a08d1a88-1715-4b4a-a1da-f572d9c9447c","Element Transparency","Sets the opacity (transparency) level of the entire element, including its content. A value of `0.8` means 80% opaque (20% transparent).","opacity: 0.8;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">opacity: 0.8;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":503,"title":504,"description":505,"code":506,"language":43,"filename":9,"whenToUse":9,"highlighted":507},"bf7b0791-6f08-4d9c-98f0-15783a245108","Current Element Color","Sets an element's color to the current value of the element's own `color` property. Useful for elements like borders or SVG fills that should match the text color.","color: currentColor;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">color: currentColor;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":509,"title":510,"description":511,"code":512,"language":43,"filename":9,"whenToUse":9,"highlighted":513},"742e368e-2473-43ab-a1cc-0a069fcfa13a","Fill Color (SVG)","Defines the fill color of an SVG shape. Applies to SVG elements like `\u003Cpath>`, `\u003Ccircle>`, `\u003Crect>`, etc., filling their interior with the specified color.","fill: #333;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">fill: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">#333\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":515,"title":516,"description":517,"code":518,"language":43,"filename":9,"whenToUse":9,"highlighted":519},"6a2d45a6-6777-43ae-8bed-0ea26a6166f9","Border Color (SVG)","Defines the color of the border (outline) of an SVG shape. Applies to SVG elements, drawing an outline with the specified color.","stroke: #666;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">stroke: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">#666\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":521,"title":522,"description":523,"code":524,"language":43,"filename":9,"whenToUse":9,"highlighted":525},"a3562af2-d0b5-4fb3-af40-31a8a52e1251","Filter: Brightness Adjustment","Applies a brightness filter to the element. A value of `1.2` (or 120%) increases brightness by 20%. `1` is the normal value, `0` is completely black.","filter: brightness(1.2);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: brightness(1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":527,"title":528,"description":529,"code":530,"language":43,"filename":9,"whenToUse":9,"highlighted":531},"eaf85558-5057-4d07-aaef-589ef56debb3","Filter: Saturation","Applies a saturation filter to the element. A value of `1.5` (or 150%) increases color saturation by 50%, making them more vibrant. `1` is the normal value, `0` is fully desaturated (grayscale).","filter: saturate(1.5);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: saturate(1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":533,"title":534,"description":535,"snippets":536},"f6c4dc60-d433-4fa3-9eb7-08330a7d08a7","📐 Layout and Positioning","This section covers essential CSS properties for controlling layout and positioning of elements on the page, including display type, relative\u002Fabsolute\u002Ffixed positioning, and float\u002Fclear techniques.",[537,543,549,555,561,567,573,579,585,591,597,603,609,615,621,627,633,639,645,651,657],{"id":538,"title":539,"description":540,"code":541,"language":43,"filename":9,"whenToUse":9,"highlighted":542},"f96cddb3-d044-4c50-a4a1-9eb965e2014e","Display: Block","Makes the element behave as a block-level element. It occupies the full available width, forces a line break before and after it, and allows the application of `width`, `height`, `margin`, and `padding`.","display: block;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">display: block;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":544,"title":545,"description":546,"code":547,"language":43,"filename":9,"whenToUse":9,"highlighted":548},"8c003d6f-b349-4d3a-92c0-bb0619fad78f","Display: Inline","Makes the element behave as an inline element. It occupies only the width required for its content, does not force line breaks, and ignores `width`, `height`, and `margin-top`\u002F`margin-bottom`.","display: inline;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">display: inline;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":550,"title":551,"description":552,"code":553,"language":43,"filename":9,"whenToUse":9,"highlighted":554},"e194813e-fc28-44cb-bfaf-69aaceaba8a1","Display: Inline-Block","Combines `inline` and `block` characteristics. The element behaves like `inline` (does not force a line break), but accepts `width`, `height`, `margin`, and `padding` like a `block` element.","display: inline-block;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">display: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">inline-block\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":556,"title":557,"description":558,"code":559,"language":43,"filename":9,"whenToUse":9,"highlighted":560},"423ccd36-a103-4cbd-a108-95549fa76a14","Display: Hide Element","Completely removes the element from the document flow. It is not rendered, does not occupy space, and is not interactive. Unlike `visibility: hidden;`, which only visually hides the element but maintains its space.","display: none;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">display: none;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":562,"title":563,"description":564,"code":565,"language":43,"filename":9,"whenToUse":9,"highlighted":566},"6d1edd57-1599-4785-be9a-44f04b62e938","Display: Flexbox Container","Transforms the element into a flexible container, activating the Flexbox context for its direct children. Allows for efficient and responsive creation of one-dimensional layouts (row or column).","display: flex;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">display: flex;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":568,"title":569,"description":570,"code":571,"language":43,"filename":9,"whenToUse":9,"highlighted":572},"95d53860-fcd7-400a-8ef7-1fe22a82b4aa","Display: Grid Container","Transforms the element into a grid container, activating the CSS Grid context for its direct children. Allows for the creation of complex and responsive two-dimensional layouts (rows and columns).","display: grid;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">display: grid;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":574,"title":575,"description":576,"code":577,"language":43,"filename":9,"whenToUse":9,"highlighted":578},"3ef65c37-a3ba-432f-ac2f-09de8f090389","Position: Static (Default)","This is the default value for all elements. Elements with `position: static;` are positioned according to the normal flow of the document, and the `top`, `right`, `bottom`, `left`, and `z-index` properties have no effect.","position: static;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">position: static;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":580,"title":581,"description":582,"code":583,"language":43,"filename":9,"whenToUse":9,"highlighted":584},"b1bff955-0384-46d1-a116-ef65a547bd23","Position: Relative","The element is positioned according to the normal flow of the document, but can be offset from its original position using `top`, `right`, `bottom`, and `left`. The element's original space is maintained in the layout.","position: relative;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">position: relative;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":586,"title":587,"description":588,"code":589,"language":43,"filename":9,"whenToUse":9,"highlighted":590},"4d0137e3-6a62-497f-afca-84e9dd5f60de","Position: Absolute","The element is removed from the normal document flow and positioned relative to its nearest positioned ancestor (non-`static`). If no positioned ancestor is found, it is positioned relative to the `\u003Chtml>`. The `top`, `right`, `bottom`, and `left` properties control its offset.","position: absolute;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">position: absolute;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":592,"title":593,"description":594,"code":595,"language":43,"filename":9,"whenToUse":9,"highlighted":596},"f0eff4b1-9fca-4d88-a6b6-893d1ed6b16b","Position: Fixed","The element is removed from the normal document flow and positioned relative to the viewport (browser window). It remains in the same position even when the page is scrolled, ideal for fixed headers or menus.","position: fixed;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">position: fixed;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":598,"title":599,"description":600,"code":601,"language":43,"filename":9,"whenToUse":9,"highlighted":602},"daefa669-50d1-4227-bbb7-bdb87d86ade2","Position: Sticky","The element is positioned relatively until its scroll position reaches a specified threshold (defined by `top`, `right`, `bottom`, or `left`), after which it becomes fixed on the screen. Useful for elements that \"stick\" when scrolling.","position: sticky;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">position: sticky;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":604,"title":605,"description":606,"code":607,"language":43,"filename":9,"whenToUse":9,"highlighted":608},"a228ebf6-8af5-4a0e-b694-9ff3bf249ce9","Coordinate: Distance from Top","Defines the element's distance from the top edge of its positioned container (for `absolute`, `fixed`, `relative`, `sticky`). `0` aligns it perfectly to the top.","top: 0;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">top: 0;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":610,"title":611,"description":612,"code":613,"language":43,"filename":9,"whenToUse":9,"highlighted":614},"883c296f-e8cb-4a29-8410-e4bc03f6ad92","Coordinate: Distance from Right","Defines the element's distance from the right edge of its positioned container. `0` aligns it perfectly to the right.","right: 0;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">right: 0;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":616,"title":617,"description":618,"code":619,"language":43,"filename":9,"whenToUse":9,"highlighted":620},"81c28746-4021-4ed1-8f28-71684204befd","Coordinate: Distance from Base","Defines the element's distance from the bottom edge of its positioned container. `0` aligns it perfectly to the base.","bottom: 0;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">bottom: 0;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":622,"title":623,"description":624,"code":625,"language":43,"filename":9,"whenToUse":9,"highlighted":626},"b6db8d4c-b190-44ce-8b37-d986ed722b01","Coordinate: Distance from Left","Defines the element's distance from the left edge of its positioned container. `0` aligns it perfectly to the left.","left: 0;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">left: 0;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":628,"title":629,"description":630,"code":631,"language":43,"filename":9,"whenToUse":9,"highlighted":632},"66ce90c7-daab-4a01-8a24-91bef1c566a4","Z-Index: Element Stacking","Controls the stacking order of positioned elements. Elements with a higher `z-index` will appear above elements with a lower `z-index`. Only works on elements with a `position` other than `static`.","z-index: 100;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">z-index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 100;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":634,"title":635,"description":636,"code":637,"language":43,"filename":9,"whenToUse":9,"highlighted":638},"ef5a5385-cc88-433f-a888-595852afae93","Float: Float Left","Removes the element from the normal document flow and positions it to the left of its container, allowing other content to flow around it. Historically used for multi-column layouts.","float: left;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">float: left;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":640,"title":641,"description":642,"code":643,"language":43,"filename":9,"whenToUse":9,"highlighted":644},"de192d2a-fe07-4759-b9ff-61fd99e6e775","Float: Float Right","Removes the element from the normal document flow and positions it to the right of its container, allowing other content to flow around it.","float: right;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">float: right;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":646,"title":647,"description":648,"code":649,"language":43,"filename":9,"whenToUse":9,"highlighted":650},"3dddc83e-e4d5-4897-a1cd-e8af990b6d11","Clear: Clear Floats (Both)","Prevents the element from being positioned next to previous floating elements, both left and right. It forces the element to start on a new line below all floating elements.","clear: both;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">clear: both;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":652,"title":653,"description":654,"code":655,"language":43,"filename":9,"whenToUse":9,"highlighted":656},"963acbd1-8cc4-4747-9a3a-6c827fa6d6de","Clear: Clear Float (Left)","Prevents the element from being positioned next to floating elements on the left. It forces the element to start on a new line below any floating element on the left.","clear: left;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">clear: left;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":658,"title":659,"description":660,"code":661,"language":43,"filename":9,"whenToUse":9,"highlighted":662},"b1830194-a0b3-4043-acfa-9a78e7ef024e","Overflow: Hidden (Clearfix)","When applied to a parent container, this property can \"contain\" floating elements within it, preventing the container from collapsing. It's a common \"clearfix\" technique to ensure the parent correctly wraps its floating children.","overflow: hidden;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">overflow: hidden;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":664,"title":665,"description":666,"snippets":667},"16e330a9-4947-4389-aee9-e17da8775fff","🔧 Flexbox","Flexbox is a one-dimensional CSS layout module designed to distribute space between items in a container and align those items. Extremely effective for creating flexible and responsive layouts in a single row or column.",[668,672,678,684,690,696,702,708,714,718,724,730,736,742,748,754,758,764,770,776,782,788,794,800],{"id":669,"title":670,"description":671,"code":565,"language":43,"filename":9,"whenToUse":9,"highlighted":566},"a4511a11-3f4e-4274-887f-137e487d365f","Create Flex Container","Transforms the element into a flexible container, activating the Flexbox context for its direct children (flex items). Flex items will arrange themselves in a single row by default.",{"id":673,"title":674,"description":675,"code":676,"language":43,"filename":9,"whenToUse":9,"highlighted":677},"91628c27-5c06-4acc-a38b-edc588050734","Item Direction: Row (Default)","Sets the main direction of flex items to horizontal (left-to-right in LTR languages). This is the default behavior of Flexbox.","flex-direction: row;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: row;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":679,"title":680,"description":681,"code":682,"language":43,"filename":9,"whenToUse":9,"highlighted":683},"33fe4b7e-c460-4dde-9f42-a68b40ea322e","Item Direction: Column","Sets the main direction of flex items to vertical (top to bottom). Items will be stacked one below the other.","flex-direction: column;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: column;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":685,"title":686,"description":687,"code":688,"language":43,"filename":9,"whenToUse":9,"highlighted":689},"dec4f523-3a01-42b4-85b7-dd47587ee695","Allow Wrapping","Allows flex items to wrap to the next line (or column, depending on `flex-direction`) if there isn't enough space in the container. The default is `nowrap`, which tries to keep all items on a single line\u002Fcolumn.","flex-wrap: wrap;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">flex-wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: wrap;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":691,"title":692,"description":693,"code":694,"language":43,"filename":9,"whenToUse":9,"highlighted":695},"5aa970b9-b169-4856-88f7-24aeb159024a","Horizontal Alignment (Main Axis)","Aligns flex items along the main axis (horizontal by default) of the flex container. `center` centers the items. Other options include `flex-start`, `flex-end`, `space-between`, `space-around`, `space-evenly`.","justify-content: center;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: center;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":697,"title":698,"description":699,"code":700,"language":43,"filename":9,"whenToUse":9,"highlighted":701},"8957e760-08c5-4112-afb2-3632798960d1","Vertical Alignment (Cross Axis)","Aligns flex items along the cross axis (vertical by default) of the flex container. `center` vertically centers the items. Other options include `flex-start`, `flex-end`, `stretch`, `baseline`.","align-items: center;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: center;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":703,"title":704,"description":705,"code":706,"language":43,"filename":9,"whenToUse":9,"highlighted":707},"f39c7c40-3e93-4bbc-9a78-929ae95a0121","Justify Content: Align to Start","Aligns flex items to the start of the flex container's main axis. In `row`, items align to the left.","justify-content: flex-start;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">flex-start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":709,"title":710,"description":711,"code":712,"language":43,"filename":9,"whenToUse":9,"highlighted":713},"12448d5a-0d82-4c51-b662-ab4d72de42e1","Justify Content: Align to End","Aligns flex items to the end of the flex container's main axis. In `row`, items align to the right.","justify-content: flex-end;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">flex-end\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":715,"title":716,"description":717,"code":694,"language":43,"filename":9,"whenToUse":9,"highlighted":695},"01f503c4-1349-4655-83d6-db7e2f43c6ff","Justify Content: Center","Centers flex items along the main axis of the flex container.",{"id":719,"title":720,"description":721,"code":722,"language":43,"filename":9,"whenToUse":9,"highlighted":723},"b26788ca-b62b-467a-a96b-a483f09e5ed8","Justify Content: Space Between Items","Distributes extra space evenly between flex items. The first item is aligned to the start and the last to the end of the container.","justify-content: space-between;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">space-between\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":725,"title":726,"description":727,"code":728,"language":43,"filename":9,"whenToUse":9,"highlighted":729},"c15f8086-f544-4ad1-b0c5-36373307732d","Justify Content: Space Around Items","Distributes extra space evenly around flex items, resulting in half the space at the container's ends and full space between items.","justify-content: space-around;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">space-around\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":731,"title":732,"description":733,"code":734,"language":43,"filename":9,"whenToUse":9,"highlighted":735},"49e7a359-7a95-4a9c-94c6-462a42834f99","Justify Content: Equal Spacing","Distributes extra space so that the space between each pair of items and the space between items and container edges are equal.","justify-content: space-evenly;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">space-evenly\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":737,"title":738,"description":739,"code":740,"language":43,"filename":9,"whenToUse":9,"highlighted":741},"642be56b-dd3a-4859-9954-3f3165d2fc3a","Align Items: Stretch to Fill","Stretches flex items to fill the full height of the flex container along the cross-axis, provided they don't have an explicit height defined. This is the default behavior.","align-items: stretch;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: stretch;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":743,"title":744,"description":745,"code":746,"language":43,"filename":9,"whenToUse":9,"highlighted":747},"12286f15-69b3-44ce-87ee-586e3e215c65","Align Items: Align to Top","Aligns flex items to the start of the flex container's cross-axis. In `row`, items align to the top.","align-items: flex-start;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">flex-start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":749,"title":750,"description":751,"code":752,"language":43,"filename":9,"whenToUse":9,"highlighted":753},"70257ae6-05a1-4529-9822-2309e1cb2259","Align Items: Align to End","Aligns flex items to the end of the flex container's cross axis. In `row`, items align to the bottom.","align-items: flex-end;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">flex-end\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":755,"title":756,"description":757,"code":700,"language":43,"filename":9,"whenToUse":9,"highlighted":701},"d5c1bf07-dad4-4337-859f-0653796d58bf","Align Items: Vertically Center","Centers flex items along the flex container's cross axis. In `row`, items center vertically.",{"id":759,"title":760,"description":761,"code":762,"language":43,"filename":9,"whenToUse":9,"highlighted":763},"3e33eae8-3e9c-46ba-b0e0-8530f9aa324b","Align Items: Align to Baseline","Aligns flex items so that their text baselines are aligned along the cross axis.","align-items: baseline;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: baseline;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":765,"title":766,"description":767,"code":768,"language":43,"filename":9,"whenToUse":9,"highlighted":769},"d4cb3163-2fab-4992-a720-17ce091234a7","Align Content: Align Lines (with Wrap)","When there are multiple lines of flex items (due to `flex-wrap: wrap;`), this property aligns these lines as a group within the flex container. `center` vertically centers all lines. Similar to `justify-content` but for the cross-axis and multiple lines.","align-content: center;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">align-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: center;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":771,"title":772,"description":773,"code":774,"language":43,"filename":9,"whenToUse":9,"highlighted":775},"fe63503e-5186-4e5d-8066-1f56ec9165b5","Flex Item: Equal Growth","Shorthand property for `flex-grow: 1; flex-shrink: 1; flex-basis: 0%;`. Makes the flex item grow and shrink to fill available space equally among other flex items. Each item with `flex: 1;` will have the same relative size.","flex: 1;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">flex: 1;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":777,"title":778,"description":779,"code":780,"language":43,"filename":9,"whenToUse":9,"highlighted":781},"3e9f784d-8e7e-4814-8eb6-fb2a152ba764","Flex Item: Proportional Growth","Shorthand property that makes the flex item grow twice as much as items with `flex: 1;`. `flex-grow: 2; flex-shrink: 1; flex-basis: 0%;`.","flex: 2;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">flex: 2;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":783,"title":784,"description":785,"code":786,"language":43,"filename":9,"whenToUse":9,"highlighted":787},"94ce8c9d-816e-42ab-b4ef-a72fd3c793da","Grow Capability","Defines the flex item's ability to grow to occupy available extra space in the container. A value of `1` means it will occupy a proportional part of the extra space.","flex-grow: 1;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">flex-grow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 1;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":789,"title":790,"description":791,"code":792,"language":43,"filename":9,"whenToUse":9,"highlighted":793},"28095216-1056-4ed3-a201-3bfbbc199c79","No Shrink","Defines the flex item's ability to shrink when there isn't enough space in the container. A value of `0` prevents the item from shrinking below its `flex-basis` (or minimum content).","flex-shrink: 0;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">flex-shrink\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 0;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":795,"title":796,"description":797,"code":798,"language":43,"filename":9,"whenToUse":9,"highlighted":799},"e01de9f5-06fb-48cb-a2d1-7a6e28829a13","Item Base Size","Defines the initial size of a flex item before any extra space is distributed. It can be a fixed value like `200px` or a percentage.","flex-basis: 200px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">flex-basis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 200px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":801,"title":802,"description":803,"code":804,"language":43,"filename":9,"whenToUse":9,"highlighted":805},"903ad295-0f0b-4cf3-a6fa-d39835f7549c","Individual Item Alignment","Allows overriding the `align-items` property of the flex container for an individual flex item. `center` vertically centers this specific item, regardless of how other items are aligned.","align-self: center;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">align-self\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: center;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":807,"title":808,"description":809,"snippets":810},"1ce02b35-f911-4db2-bbc5-3f926cb0f96c","🔲 CSS Grid","CSS Grid Layout is a two-dimensional layout system that allows organizing elements in rows and columns, offering robust control over positioning and sizing. Ideal for creating complex page layouts efficiently.",[811,815,821,827,833,839,845,851,857,863,869,875,881,887,893,899,905,911,915,919,923],{"id":812,"title":813,"description":814,"code":571,"language":43,"filename":9,"whenToUse":9,"highlighted":572},"21c04f14-fb01-4b54-854f-3dd7f6c68be6","Create Grid Container","Transforms the element into a grid container, activating the CSS Grid context for its direct children (grid items). Allows defining explicit rows and columns for the layout.",{"id":816,"title":817,"description":818,"code":819,"language":43,"filename":9,"whenToUse":9,"highlighted":820},"2c8a1b33-b234-4e19-8e73-edd486f7d9c5","Define 3 Equal Columns","Defines three columns in the grid, where `1fr` means a fraction of the available space. Each column will occupy an equal part of the container's remaining space.","grid-template-columns: 1fr 1fr 1fr;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 1fr 1fr 1fr;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":822,"title":823,"description":824,"code":825,"language":43,"filename":9,"whenToUse":9,"highlighted":826},"06719ea2-80f8-42ea-ac89-5186784b43cb","Fixed and Flexible Columns","Defines two columns: the first with a fixed width of 200 pixels and the second occupying the remaining available space (`1fr`).","grid-template-columns: 200px 1fr;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 200px 1fr;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":828,"title":829,"description":830,"code":831,"language":43,"filename":9,"whenToUse":9,"highlighted":832},"c5b6a7e6-5a58-4fdb-b7ce-2214f03a7359","Repeat Columns","A shorthand function that creates three columns, each occupying an equal fraction of the available space. Equivalent to `1fr 1fr 1fr`.","grid-template-columns: repeat(3, 1fr);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: repeat(3, 1fr);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":834,"title":835,"description":836,"code":837,"language":43,"filename":9,"whenToUse":9,"highlighted":838},"f2f80017-651d-43dc-9043-49741536d061","Define Grid Rows","Defines three rows in the grid: the first and last rows automatically adjust to content (`auto`), and the middle row occupies the remaining available space (`1fr`).","grid-template-rows: auto 1fr auto;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">grid-template-rows\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: auto 1fr auto;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":840,"title":841,"description":842,"code":843,"language":43,"filename":9,"whenToUse":9,"highlighted":844},"aeb0a775-5237-4390-8573-64f32de15dd4","Spacing Between Items (Gap)","Sets the spacing (gutter) of 20 pixels between grid rows and columns. It is a shorthand property for `grid-row-gap` and `grid-column-gap`.","gap: 20px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">gap: 20px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":846,"title":847,"description":848,"code":849,"language":43,"filename":9,"whenToUse":9,"highlighted":850},"6820d4cd-b653-4e4f-b653-33dff6946c7d","Define Grid Areas","Starts defining named areas within the grid layout. Allows creating visual layouts intuitively by assigning names to cell blocks.","grid-template-areas:","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">grid-template-areas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":852,"title":853,"description":854,"code":855,"language":43,"filename":9,"whenToUse":9,"highlighted":856},"1e65f0ca-1f41-4eba-9af2-0d88a03d7da9","Grid Area: First Row (Header)","Defines the first grid row as an area named \"header\" that spans three columns. The quotes indicate a row, and the names within them represent the cells.","  \"header header header\"","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  \"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">header\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\"> header\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> header\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":858,"title":859,"description":860,"code":861,"language":43,"filename":9,"whenToUse":9,"highlighted":862},"0316a272-2da8-4efa-8dff-8068e46bc081","Grid Area: Second Row (Sidebar and Main)","Defines the second grid row with three cells: the first is a \"sidebar\" and the next two are \"main\".","  \"sidebar main main\"","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  \"sidebar \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">main\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> main\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":864,"title":865,"description":866,"code":867,"language":43,"filename":9,"whenToUse":9,"highlighted":868},"0e9a5249-a801-4e96-8523-00f11d145933","Grid Area: Third Row (Footer)","Defines the third and last grid row as an area named \"footer\" that spans three columns. The semicolon terminates the `grid-template-areas` declaration.","  \"footer footer footer\";","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  \"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">footer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\"> footer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> footer\";\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":870,"title":871,"description":872,"code":873,"language":43,"filename":9,"whenToUse":9,"highlighted":874},"e95c4cc0-18fe-4839-80e4-61bbdbdab6bb","Assign Element to an Area","Assigns a grid item to a named area previously defined in `grid-template-areas`. The element with this property will occupy all cells of the \"header\" area.","grid-area: header;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">grid-area\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: header;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":876,"title":877,"description":878,"code":879,"language":43,"filename":9,"whenToUse":9,"highlighted":880},"317400f8-b1a2-4182-979f-4079a9184686","Occupy Specific Columns","Makes a grid item start at grid line 1 and end at grid line 3, thus occupying columns 1 and 2. The number after the slash is exclusive.","grid-column: 1 \u002F 3;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">grid-column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 1 \u002F 3;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":882,"title":883,"description":884,"code":885,"language":43,"filename":9,"whenToUse":9,"highlighted":886},"91923047-c845-453c-b95c-83bdfe95423d","Occupy Specific Rows","Makes a grid item start at grid line 2 and end at grid line 4, thus occupying rows 2 and 3.","grid-row: 2 \u002F 4;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">grid-row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 2 \u002F 4;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":888,"title":889,"description":890,"code":891,"language":43,"filename":9,"whenToUse":9,"highlighted":892},"4785050d-ec40-4644-a481-4d3e50c01d10","Occupy Multiple Columns","Makes a grid item occupy two columns from its starting position. `span` is useful when the starting position is not fixed.","grid-column: span 2;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">grid-column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> 2;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":894,"title":895,"description":896,"code":897,"language":43,"filename":9,"whenToUse":9,"highlighted":898},"fbc43959-227a-40c0-a610-4a38637fa38d","Occupy Multiple Rows","Makes a grid item occupy three rows from its starting position.","grid-row: span 3;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">grid-row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> 3;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":900,"title":901,"description":902,"code":903,"language":43,"filename":9,"whenToUse":9,"highlighted":904},"6f5ad7a5-4859-44ee-829b-0807fada5e79","Full Item Position","Shorthand property to define a grid item's position using `grid-row-start`, `grid-column-start`, `grid-row-end`, and `grid-column-end`. In this case, the item starts at row 1, column 1, and extends up to row 3 (exclusive) and column 4 (exclusive).","grid-area: 1 \u002F 1 \u002F 3 \u002F 4;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">grid-area\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 1 \u002F 1 \u002F 3 \u002F 4;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":906,"title":907,"description":908,"code":909,"language":43,"filename":9,"whenToUse":9,"highlighted":910},"67b337f8-5309-4cb1-8db5-5e50d73e8e12","Justify Items Horizontally","Aligns the content of each grid item individually along the row axis (horizontal) within its own grid cell. `center` horizontally centers the content.","justify-items: center;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">justify-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: center;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":912,"title":913,"description":914,"code":700,"language":43,"filename":9,"whenToUse":9,"highlighted":701},"38846d3e-fde8-4b14-8ca7-39e7ef977c15","Align Items Vertically","Aligns the content of each grid item individually along the column axis (vertical) within its own grid cell. `center` vertically centers the content.",{"id":916,"title":917,"description":918,"code":694,"language":43,"filename":9,"whenToUse":9,"highlighted":695},"e6e4de86-d96d-487b-af46-61d5d999fac1","Align Grid Horizontally","Aligns the entire grid (the column tracks) along the row axis (horizontal) within the grid container, when there is extra space. `center` centers the grid.",{"id":920,"title":921,"description":922,"code":768,"language":43,"filename":9,"whenToUse":9,"highlighted":769},"972631c6-4305-43a7-bb33-c10d95ab8e44","Align Grid Vertically","Aligns the entire grid (the row tracks) along the column axis (vertical) within the grid container, when there is extra space. `center` centers the grid.",{"id":924,"title":925,"description":926,"code":927,"language":43,"filename":9,"whenToUse":9,"highlighted":928},"5cccf38c-c501-49e9-98f1-6d0a09676396","Align Items and Content (Both)","Shorthand property that sets `justify-items` and `align-items` simultaneously. `center` centers the content of each grid item both horizontally and vertically within its cell.","place-items: center;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">place-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: center;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":930,"title":931,"description":932,"snippets":933},"4b08b9f8-7f5b-4ab8-991c-5ddb323c07a4","📱 Responsiveness","This section focuses on CSS techniques and properties for creating layouts that adapt to different screen sizes and devices. Responsiveness is crucial for a consistent and accessible user experience across all platforms.",[934,940,946,952,958,964,966,970,976,982,988,994,1000,1004,1010,1016],{"id":935,"title":936,"description":937,"code":938,"language":43,"filename":9,"whenToUse":9,"highlighted":939},"82cad054-a4bf-48b8-bcc6-89c0dc9bf5f5","Media Query: Mobile Devices","Initiates a style block that will be applied only when the viewport width is equal to or less than 768 pixels. This is commonly used to target specific styles for tablets and smartphones.","@media (max-width: 768px) {","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">@media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">max-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">768\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":941,"title":942,"description":943,"code":944,"language":43,"filename":9,"whenToUse":9,"highlighted":945},"318225e0-2316-4939-88f1-db0832dea43f","Mobile Adjustment","Within a media query for mobile devices, sets the width of an element with the `container` class to 100%. This ensures the container occupies the full available width on smaller screens.","  .container { width: 100%; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  .container\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":947,"title":948,"description":949,"code":950,"language":43,"filename":9,"whenToUse":9,"highlighted":951},"c8287891-a3ed-43de-b78d-4244751d4728","Close Media Query","Closes the media query style block, indicating the end of conditional CSS rules.","}","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":953,"title":954,"description":955,"code":956,"language":43,"filename":9,"whenToUse":9,"highlighted":957},"d886af96-7da6-4c89-8ce1-46d48fa8a5b8","Media Query: Larger Devices","Starts a style block that will be applied only when the viewport width is equal to or greater than 769 pixels. This is commonly used to target specific styles for desktops and larger screens.","@media (min-width: 769px) {","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">@media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">769\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":959,"title":960,"description":961,"code":962,"language":43,"filename":9,"whenToUse":9,"highlighted":963},"9d09e398-8bfc-44d5-94b3-8d72c5d2d40a","Desktop Adjustment","Within a media query for larger devices, sets the width of an element with the `container` class to 750 pixels. This can be used to limit content width on large screens.","  .container { width: 750px; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  .container\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">750\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":965,"title":948,"description":949,"code":950,"language":43,"filename":9,"whenToUse":9,"highlighted":951},"b42b5686-0708-41cd-a4f6-6b588d1d3840",{"id":967,"title":968,"description":969,"code":178,"language":43,"filename":9,"whenToUse":9,"highlighted":179},"daf45d0b-7ca2-423d-b87c-ae5c50b1a338","Responsive Image","Sets the maximum width of an image to 100% of its container. Combined with `height: auto;`, this ensures the image never exceeds its parent's width and maintains its original aspect ratio when resizing.",{"id":971,"title":972,"description":973,"code":974,"language":43,"filename":9,"whenToUse":9,"highlighted":975},"c2788472-a645-44b3-94c3-9eb99722709e","Maintain Image Aspect Ratio","Sets an element's height (usually an image) to adjust automatically, maintaining its original aspect ratio relative to its width. Essential for responsive images.","height: auto;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">height: auto;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":977,"title":978,"description":979,"code":980,"language":43,"filename":9,"whenToUse":9,"highlighted":981},"76ea7aa0-9afd-4c19-a58b-5cacb811e793","Fluid Font (calc + vw)","Sets the font size using the `calc()` function to create a fluid size. The base size is 16 pixels, and `0.5vw` (0.5% of the viewport width) is added, causing the font to slightly increase or decrease with screen size.","font-size: calc(16px + 0.5vw);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: calc(16px \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.5vw\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":983,"title":984,"description":985,"code":986,"language":43,"filename":9,"whenToUse":9,"highlighted":987},"9a8885eb-5378-4342-9593-9b6946be5cc5","Viewport Width","Sets the element's width to 100% of the viewport width (visible browser window). Useful for elements that should occupy the entire screen width.","width: 100vw;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">width: 100vw;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":989,"title":990,"description":991,"code":992,"language":43,"filename":9,"whenToUse":9,"highlighted":993},"0ad1f87a-285b-4702-b8bf-412391e9f65c","Viewport Height","Sets the element's height to 100% of the viewport height (browser's visible window). Useful for creating full-page sections or \"hero\" layouts.","height: 100vh;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">height: 100vh;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":995,"title":996,"description":997,"code":998,"language":43,"filename":9,"whenToUse":9,"highlighted":999},"f70c2da2-2a94-4c93-a47b-638a02621fc5","Viewport Relative Width","Sets the element's width to 50% of the viewport width. `vw` and `vh` units are ideal for creating elements that scale directly with screen size.","width: 50vw;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">width: 50vw;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1001,"title":1002,"description":1003,"code":992,"language":43,"filename":9,"whenToUse":9,"highlighted":993},"b202851f-b124-4a65-b282-12f7f8c097a5","Viewport Relative Height","Sets the element's height to 100% of the viewport height. Ensures the element occupies the full screen height.",{"id":1005,"title":1006,"description":1007,"code":1008,"language":43,"filename":9,"whenToUse":9,"highlighted":1009},"b0d61947-225c-4986-97b3-41cfe144d560","Viewport Relative Font Size","Sets the font size to 4% of the viewport width. This makes the text fluidly increase or decrease in size as the screen width changes.","font-size: 4vw;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 4vw;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1011,"title":1012,"description":1013,"code":1014,"language":43,"filename":9,"whenToUse":9,"highlighted":1015},"db30c723-d026-4011-b797-b9a0ea92286d","Viewport Relative Margin","Defines a margin of 2% of the viewport height on all sides of the element. Allows vertical spacing to adapt to screen size.","margin: 2vh;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">margin: 2vh;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1017,"title":1018,"description":1019,"code":1020,"language":43,"filename":9,"whenToUse":9,"highlighted":1021},"084197ac-41e7-425c-9e9c-0099d425bb6a","Minimum Width","Defines the minimum width an element can have, even if the viewport is smaller. This prevents content from becoming unreadable on very small screens, forcing horizontal scrolling if necessary.","min-width: 320px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 320px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1023,"title":1024,"description":1025,"snippets":1026},"b0db4623-f778-4d1d-a891-b8298834addc","✨ Animations and Transitions","This section explores powerful CSS tools for adding motion and interactivity to elements, including smooth transitions, 2D and 3D transforms, and complex keyframe-based animations. Essential for dynamic user experiences.",[1027,1033,1039,1045,1051,1057,1063,1069,1075,1081,1087,1093,1099,1105,1111,1117,1123,1129,1135,1139],{"id":1028,"title":1029,"description":1030,"code":1031,"language":43,"filename":9,"whenToUse":9,"highlighted":1032},"2f6f59b8-5b28-44bb-885c-8f7561f6f051","Smooth Transition (Shorthand)","Applies a smooth transition to all CSS properties that change value. The transition will last 0.3 seconds and use the `ease` timing function (starts and ends slowly).","transition: all 0.3s ease;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">transition: all 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.3s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> ease;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1034,"title":1035,"description":1036,"code":1037,"language":43,"filename":9,"whenToUse":9,"highlighted":1038},"9e7d696b-230c-4104-b3fc-ddd875240491","Specific Property Transition","Applies a 0.5-second transition with `linear` timing (constant speed) only to the `color` property. Other properties will change instantly.","transition: color 0.5s linear;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">transition: color 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.5s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> linear;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1040,"title":1041,"description":1042,"code":1043,"language":43,"filename":9,"whenToUse":9,"highlighted":1044},"186535b6-4e18-4340-9c7a-0d8d9e96361e","Transition with Custom Animation Curve","Applies a transition to the `transform` property with a duration of 0.3 seconds and a custom `cubic-bezier` timing function. `cubic-bezier` allows creating complex acceleration and deceleration curves for more expressive transitions.","transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">transition: transform 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.3s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> cubic-bezier(0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, 0, 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, 1);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1046,"title":1047,"description":1048,"code":1049,"language":43,"filename":9,"whenToUse":9,"highlighted":1050},"50750c1d-d75b-4e8a-9196-d85c5f5ba21b","Transition Delay","Sets a delay of 0.2 seconds before the transition starts executing. The element will remain in its initial state for this period.","transition-delay: 0.2s;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">transition-delay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 0.2s;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1052,"title":1053,"description":1054,"code":1055,"language":43,"filename":9,"whenToUse":9,"highlighted":1056},"a0b16de1-4714-4ba5-a956-0773ee6526dd","Transition Duration","Sets the total transition duration to 0.5 seconds. Controls the time it takes for the property to change from its initial to its final state.","transition-duration: 0.5s;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">transition-duration\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 0.5s;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1058,"title":1059,"description":1060,"code":1061,"language":43,"filename":9,"whenToUse":9,"highlighted":1062},"27588016-2863-41d2-9c6c-053b1dfd4e3a","2D Transform: Move Horizontally","Moves the element 50 pixels to the right along the X-axis. Negative values move to the left.","transform: translateX(50px);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">transform: translateX(50px);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1064,"title":1065,"description":1066,"code":1067,"language":43,"filename":9,"whenToUse":9,"highlighted":1068},"1f40ed13-93a2-460d-8b4c-f6bf72a6cc29","2D Transform: Move Vertically","Moves the element 20 pixels down along the Y-axis. Negative values move upwards.","transform: translateY(20px);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">transform: translateY(20px);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1070,"title":1071,"description":1072,"code":1073,"language":43,"filename":9,"whenToUse":9,"highlighted":1074},"41df873f-346a-4e5e-a4db-32edbde77c83","2D Transform: Rotate","Rotates the element 45 degrees clockwise around its origin point (center by default). Negative values rotate counter-clockwise.","transform: rotate(45deg);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">transform: rotate(45deg);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1076,"title":1077,"description":1078,"code":1079,"language":43,"filename":9,"whenToUse":9,"highlighted":1080},"24eb3294-2850-47d2-8ff9-a9219d34fce0","2D Transform: Scale (Increase Size)","Increases the size of the element by 20% (1.2 times its original size) on both the X and Y axes. `scale(x, y)` allows for different scaling on each axis.","transform: scale(1.2);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">transform: scale(1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1082,"title":1083,"description":1084,"code":1085,"language":43,"filename":9,"whenToUse":9,"highlighted":1086},"72c93cc5-46fb-4dc5-b309-2780e765baec","2D Transform: Skew Horizontally","Skews the element 15 degrees along the X-axis, creating a distortion effect. `skewY()` skews vertically.","transform: skewX(15deg);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">transform: skewX(15deg);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1088,"title":1089,"description":1090,"code":1091,"language":43,"filename":9,"whenToUse":9,"highlighted":1092},"80676d89-f732-4cf6-8832-38fe241cc590","3D Transform: Rotate on X-Axis","Rotates the element 45 degrees around the X-axis (horizontal), creating a forward or backward tilt effect.","transform: rotateX(45deg);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">transform: rotateX(45deg);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1094,"title":1095,"description":1096,"code":1097,"language":43,"filename":9,"whenToUse":9,"highlighted":1098},"b9d879fe-34ef-418d-96f3-409bd67cd728","3D Transform: Rotate on Y-Axis","Rotates the element 45 degrees around the Y-axis (vertical), creating a side-turning effect.","transform: rotateY(45deg);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">transform: rotateY(45deg);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1100,"title":1101,"description":1102,"code":1103,"language":43,"filename":9,"whenToUse":9,"highlighted":1104},"85633900-c252-479e-bbf9-6e93dbb0e058","3D Transform: Rotate on Z-Axis","Rotates the element 45 degrees around the Z-axis (depth), which is equivalent to `rotate(45deg)` in 2D.","transform: rotateZ(45deg);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">transform: rotateZ(45deg);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1106,"title":1107,"description":1108,"code":1109,"language":43,"filename":9,"whenToUse":9,"highlighted":1110},"a62eb8fb-796c-46d6-8efe-866346e83e1d","Combined 3D Perspective","Applies a 1000-pixel perspective to the element before rotating it 45 degrees on the X-axis. The `perspective` property (applied to the parent or as a `transform` function) is crucial for creating the illusion of depth in 3D transformations.","transform: perspective(1000px) rotateX(45deg);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">transform: perspective(1000px) rotateX(45deg);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1112,"title":1113,"description":1114,"code":1115,"language":43,"filename":9,"whenToUse":9,"highlighted":1116},"aa1c7462-8f87-41a2-afb7-c1b26541e23a","Preserve 3D Context","Applied to a parent element, this property ensures that the element's 3D children are positioned in the same 3D space, rather than being flattened onto the 2D plane. Essential for creating complex 3D scenes with multiple elements.","transform-style: preserve-3d;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">transform-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">preserve-3d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1118,"title":1119,"description":1120,"code":1121,"language":43,"filename":9,"whenToUse":9,"highlighted":1122},"8927feda-3a54-40d3-b5c5-11726af91edc","Define Keyframe Animation","Starts the definition of a CSS animation named `slideIn`. Within this block, you define the animation stages (keyframes) using percentages or the keywords `from` (0%) and `to` (100%).","@keyframes slideIn {","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">@keyframes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\"> slideIn\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1124,"title":1125,"description":1126,"code":1127,"language":43,"filename":9,"whenToUse":9,"highlighted":1128},"93338d92-a430-44a3-9380-dcbfc2677eba","Initial Animation State","Defines the initial state of the animation (0%). In this case, the element starts 100% of its width off-screen to the left.","  from { transform: translateX(-100%); }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  from { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">translateX\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">-100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">); }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1130,"title":1131,"description":1132,"code":1133,"language":43,"filename":9,"whenToUse":9,"highlighted":1134},"e5a9bb2e-181c-41e4-afb1-072e42fe12f3","Animation End State","Defines the animation's end state (100%). In this case, the element ends in its original position (no horizontal displacement).","  to { transform: translateX(0); }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  to { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">translateX\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">); }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1136,"title":1137,"description":1138,"code":950,"language":43,"filename":9,"whenToUse":9,"highlighted":951},"aaac739d-38ee-4612-863a-6d82e88b348c","Close Keyframe","Closes the `@keyframes` animation definition block.",{"id":1140,"title":1141,"description":1142,"code":1143,"language":43,"filename":9,"whenToUse":9,"highlighted":1144},"7aaff294-cb0e-40dc-82f4-5436a9da0f9d","Apply Animation","Applies the `slideIn` animation to the element. The animation will have a duration of 0.5 seconds and use the `ease-in-out` timing function (starts and ends slowly, accelerates in the middle). This is a shorthand property that includes `animation-name`, `animation-duration`, `animation-timing-function`, among others.","animation: slideIn 0.5s ease-in-out;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">animation: slideIn 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.5s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\"> ease-in-out\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1146,"title":1147,"description":1148,"snippets":1149},"6f946119-0862-4a17-8222-cfb154000fb4","🔍 Pseudo-classes and Pseudo-elements","This section explores pseudo-classes and pseudo-elements, which allow styling elements in specific states or parts of elements not represented by explicit HTML tags. Powerful tools for adding interactivity and visual refinement.",[1150,1156,1162,1168,1174,1180,1186,1192,1198,1204,1210,1216,1222,1228,1234,1240,1246,1252,1258,1264],{"id":1151,"title":1152,"description":1153,"code":1154,"language":43,"filename":9,"whenToUse":9,"highlighted":1155},"7ec01c23-5872-41e7-b14e-0f2e2db1bb39","Pseudo-class: Hover","Applies styles when the mouse cursor is over the element. In this example, the text color changes to blue on hover.",":hover { color: blue; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">blue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1157,"title":1158,"description":1159,"code":1160,"language":43,"filename":9,"whenToUse":9,"highlighted":1161},"91dd395d-b3bb-47c5-a2e0-4cdf67616e8a","Pseudo-class: Active","Applies styles when the element is being activated (e.g., clicked by a mouse or touched on a touchscreen device). In this example, the element slightly shrinks when activated.",":active { transform: scale(0.95); }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">scale\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0.95\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">); }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1163,"title":1164,"description":1165,"code":1166,"language":43,"filename":9,"whenToUse":9,"highlighted":1167},"ecdb3865-dbbc-450c-b0f1-2400744f06ff","Pseudo-class: Focus","Applies styles when the element (usually a form field or link) receives focus, either by tabbing or clicking. In this example, a blue border is added to indicate focus.",":focus { outline: 2px solid blue; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:focus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> blue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1169,"title":1170,"description":1171,"code":1172,"language":43,"filename":9,"whenToUse":9,"highlighted":1173},"0cac4f9f-693d-48a1-94e6-bf33a15887dd","Pseudo-classe: Visited","Aplica estilos a links (\u003Ca>) que já foram visitados pelo usuário. Por razões de privacidade, as propriedades que podem ser alteradas são limitadas (principalmente `color`).",":visited { color: purple; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:visited\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">purple\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1175,"title":1176,"description":1177,"code":1178,"language":43,"filename":9,"whenToUse":9,"highlighted":1179},"764760e7-ac10-46d1-a6ec-e332fa2ff339","Pseudo-class: Link","Applies styles to links (\u003Ca>) that have not yet been visited by the user. It is the initial state of a link.",":link { color: blue; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:link\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">blue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1181,"title":1182,"description":1183,"code":1184,"language":43,"filename":9,"whenToUse":9,"highlighted":1185},"eeef5f96-cc7e-422f-883d-39b4828794d2","Structural Pseudo-class: First Child","Selects the first child element of its parent. In this example, the first child of any parent element will have bold text.",":first-child { font-weight: bold; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:first-child\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">bold\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1187,"title":1188,"description":1189,"code":1190,"language":43,"filename":9,"whenToUse":9,"highlighted":1191},"3f1a386e-5f56-43d9-8423-52036d370b8d","Structural Pseudo-class: Last Child","Selects the last child element of its parent. Useful for removing unnecessary margins or paddings at the end of a list or group of elements.",":last-child { margin-bottom: 0; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:last-child\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">margin-bottom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1193,"title":1194,"description":1195,"code":1196,"language":43,"filename":9,"whenToUse":9,"highlighted":1197},"96cb460b-4bde-4fb9-a0ad-2c11542163ac","Structural Pseudo-class: Odd Children","Selects all child elements that are in odd positions (1st, 3rd, 5th, etc.) of their parent. Commonly used to create stripes in tables or lists (zebra-striping).",":nth-child(odd) { background: #f0f0f0; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:nth-child\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">odd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">#f0f0f0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1199,"title":1200,"description":1201,"code":1202,"language":43,"filename":9,"whenToUse":9,"highlighted":1203},"d22e6ed4-d100-43f2-80d7-7b4f91873169","Structural Pseudo-class: Even Children","Selects all child elements that are in even positions (2nd, 4th, 6th, etc.) of their parent. Complements zebra-striping style.",":nth-child(even) { background: #fff; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:nth-child\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">even\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">#fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1205,"title":1206,"description":1207,"code":1208,"language":43,"filename":9,"whenToUse":9,"highlighted":1209},"ff245a5f-3a17-4828-8719-891b3ee2aa86","Structural Pseudo-class: Third Child","Selects the third child element of its parent. The number inside the parentheses specifies the exact position of the child to be selected.",":nth-child(3) { color: red; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:nth-child\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">red\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1211,"title":1212,"description":1213,"code":1214,"language":43,"filename":9,"whenToUse":9,"highlighted":1215},"2cb82c89-a7d6-4943-83ba-fb96ea53408a","Form Pseudo-class: Checked","Applies styles to radio or checkbox input elements when they are checked (selected). In this example, the element increases in size when checked.",":checked { transform: scale(1.2); }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:checked\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">scale\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">); }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1217,"title":1218,"description":1219,"code":1220,"language":43,"filename":9,"whenToUse":9,"highlighted":1221},"0c446cac-5d96-4e49-97cd-7f8c04ea6262","Form Pseudo-class: Disabled","Applies styles to form elements that are disabled (with the `disabled` attribute). In this example, the element becomes semi-transparent to indicate it cannot be interacted with.",":disabled { opacity: 0.5; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1223,"title":1224,"description":1225,"code":1226,"language":43,"filename":9,"whenToUse":9,"highlighted":1227},"79a1944a-19f6-4138-9551-2a0e8d7d9f8a","Form Pseudo-class: Enabled","Applies styles to form elements that are enabled (without the `disabled` attribute). In this example, the cursor changes to a pointer to indicate the element is interactive.",":enabled { cursor: pointer; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:enabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1229,"title":1230,"description":1231,"code":1232,"language":43,"filename":9,"whenToUse":9,"highlighted":1233},"49be13ee-c7ad-4f3c-a05a-f91be444acd2","Form Pseudo-class: Required","Applies styles to form fields that have the `required` attribute, indicating they are mandatory. In this example, a red border is added.",":required { border: 2px solid red; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:required\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> red\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1235,"title":1236,"description":1237,"code":1238,"language":43,"filename":9,"whenToUse":9,"highlighted":1239},"a0d29f75-7aa9-40dd-bdd3-2e8166a27bc7","Form Pseudo-class: Valid","Applies styles to form fields whose content is considered valid according to their validation rules (e.g., a well-formatted email in a `type=\"email\"` field).",":valid { border-color: green; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:valid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">border-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">green\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1241,"title":1242,"description":1243,"code":1244,"language":43,"filename":9,"whenToUse":9,"highlighted":1245},"37e0ce9c-df06-4da4-ab61-bad3f7acce77","Pseudo-element: Before Content","Inserts CSS-generated content before the actual content of an element. The `content` property value is mandatory. Commonly used for icons, quotes, or decorative markers.","::before { content: \"→\"; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">::before\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"→\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1247,"title":1248,"description":1249,"code":1250,"language":43,"filename":9,"whenToUse":9,"highlighted":1251},"ccc3231d-3211-4f24-950e-2072ea4f9cfc","Pseudo-element: After Content","Inserts CSS-generated content after the actual content of an element. Similar to `::before`, but positions the content at the end.","::after { content: \"←\"; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">::after\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"←\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1253,"title":1254,"description":1255,"code":1256,"language":43,"filename":9,"whenToUse":9,"highlighted":1257},"0564ff28-de86-4929-a68e-844ef4ebf7d7","Pseudo-element: First Line","Applies styles to the first line of text of a block element. The \"first line\" is determined by the element's width, not by the HTML. In this example, the first line is bold.","::first-line { font-weight: bold; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">::first-line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">bold\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1259,"title":1260,"description":1261,"code":1262,"language":43,"filename":9,"whenToUse":9,"highlighted":1263},"d77cdd80-43e2-4360-b771-3014b8b8a2ea","Pseudo-element: First Letter","Applies styles to the first letter of a block element's text. Commonly used to create \"drop cap\" effects or initial caps, increasing the size of the first letter.","::first-letter { font-size: 2em; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">::first-letter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">em\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1265,"title":1266,"description":1267,"code":1268,"language":43,"filename":9,"whenToUse":9,"highlighted":1269},"d29b8cea-12c5-4c96-9dd8-7a710da2a668","Pseudo-element: Selected Text","Applies styles to text that the user has selected (highlighted) in a document. In this example, the background of the selected text will be yellow. The properties that can be changed are limited.","::selection { background: yellow; }","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">::selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">yellow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1271,"title":1272,"description":1273,"snippets":1274},"2afa6a9e-9e70-4121-b71f-6bf9d31cc85e","🚀 Advanced Properties","This section explores advanced CSS properties for creating sophisticated visual effects like image filters, shadows, complex gradients, and element clipping. Ideal for adding a modern and creative touch to interfaces.",[1275,1281,1285,1291,1297,1303,1309,1315,1321,1327,1333,1339,1345,1349,1355,1361,1367,1373,1379,1385],{"id":1276,"title":1277,"description":1278,"code":1279,"language":43,"filename":9,"whenToUse":9,"highlighted":1280},"893233ea-d853-4a03-a307-af467e3ba8e1","Filter: Blur","Applies a Gaussian blur effect to the element. A value of `5px` indicates that pixels will be blurred within a 5-pixel radius. Larger values result in more blur.","filter: blur(5px);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: blur(5px);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1282,"title":1283,"description":1284,"code":524,"language":43,"filename":9,"whenToUse":9,"highlighted":525},"30e53740-8dcc-47e3-a3a5-70e732bbed03","Filter: Brightness","Adjusts the brightness of the element. A value of `1.2` (or 120%) increases brightness by 20%. `1` is normal brightness, `0` makes the element completely black.",{"id":1286,"title":1287,"description":1288,"code":1289,"language":43,"filename":9,"whenToUse":9,"highlighted":1290},"52d27e6a-8c80-49c0-9f36-a6901ff0c083","Filter: Contrast","Adjusts the contrast of the element. A value of `1.5` (or 150%) increases the contrast by 50%. `1` is normal contrast, `0` makes the element grayscale.","filter: contrast(1.5);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: contrast(1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1292,"title":1293,"description":1294,"code":1295,"language":43,"filename":9,"whenToUse":9,"highlighted":1296},"553bd378-b70e-40f4-ac32-4a3441dde56d","Filter: Grayscale","Converts the element's colors to a grayscale. A value of `100%` completely removes color saturation, making it black and white. `0%` keeps the original colors.","filter: grayscale(100%);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: grayscale(100%);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1298,"title":1299,"description":1300,"code":1301,"language":43,"filename":9,"whenToUse":9,"highlighted":1302},"fa7e4601-9c26-40a3-90e7-786d814a2d07","Filter: Sepia Effect","Applies a sepia effect to the element, giving it an old reddish-brown tone. A value of `50%` applies half of the total effect.","filter: sepia(50%);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: sepia(50%);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1304,"title":1305,"description":1306,"code":1307,"language":43,"filename":9,"whenToUse":9,"highlighted":1308},"b7d107b5-f076-4ed5-a5d3-0c8d680a5339","Filter: Hue Rotation","Rotates the element's colors around the color wheel. `90deg` shifts the hue by 90 degrees, dramatically changing the colors. `0deg` or `360deg` has no effect.","filter: hue-rotate(90deg);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: hue-rotate(90deg);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1310,"title":1311,"description":1312,"code":1313,"language":43,"filename":9,"whenToUse":9,"highlighted":1314},"73288945-8a3d-4ba9-9767-c05362b144aa","Soft Box Shadow","Applies a soft shadow around the element's box. The values are: X-offset (0), Y-offset (2px), blur radius (4px), and color (`rgba(0,0,0,0.1)` - black with 10% opacity).","box-shadow: 0 2px 4px rgba(0,0,0,0.1);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 0 2px 4px rgba(0,0,0,0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1316,"title":1317,"description":1318,"code":1319,"language":43,"filename":9,"whenToUse":9,"highlighted":1320},"ede97243-d2a9-4625-970d-2956f5a48d35","Medium Box Shadow","Applies a medium intensity shadow to the element's box, with greater Y-offset and blur radius, and 20% opacity.","box-shadow: 0 4px 8px rgba(0,0,0,0.2);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 0 4px 8px rgba(0,0,0,0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1322,"title":1323,"description":1324,"code":1325,"language":43,"filename":9,"whenToUse":9,"highlighted":1326},"03e7e985-0a9c-4526-ab0f-80f0cdab7f7a","Strong Box Shadow","Applies a more prominent shadow to the element's box, with greater offset, blur, and 30% opacity, creating a more pronounced elevation effect.","box-shadow: 0 8px 16px rgba(0,0,0,0.3);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 0 8px 16px rgba(0,0,0,0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1328,"title":1329,"description":1330,"code":1331,"language":43,"filename":9,"whenToUse":9,"highlighted":1332},"ffb5cf27-ef9c-489c-9974-e22bcd81b254","Text Shadow","Applies a shadow to the element's text. The values are: X offset (2px), Y offset (2px), blur radius (4px), and color (`rgba(0,0,0,0.3)`).","text-shadow: 2px 2px 4px rgba(0,0,0,0.3);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">text-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 2px 2px 4px rgba(0,0,0,0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1334,"title":1335,"description":1336,"code":1337,"language":43,"filename":9,"whenToUse":9,"highlighted":1338},"5751efc3-230e-490f-a590-329afd319540","Inner Box Shadow","Applies an inner (inset) shadow to the element's box, creating a depth effect or a \"pressed\" element effect. The term `inset` is added before other values.","box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: inset 0 2px 4px rgba(0,0,0,0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1340,"title":1341,"description":1342,"code":1343,"language":43,"filename":9,"whenToUse":9,"highlighted":1344},"d0efddd4-120e-42ad-98d7-c49c7961d6db","Diagonal Linear Gradient","Applies a linear gradient that extends at a 45-degree angle, transitioning from color `#ff7e5f` to `#feb47b`. The angle can be specified in `deg`, `grad`, `rad`, or `turn`.","background: linear-gradient(45deg, #ff7e5f, #feb47b);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">background: linear-gradient(45deg, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#ff7e5f\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#feb47b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1346,"title":1347,"description":1348,"code":458,"language":43,"filename":9,"whenToUse":9,"highlighted":459},"0fbf2249-b773-4247-a900-0d82741de021","Basic Radial Gradient","Applies a radial gradient with a circle shape, starting with color `#ff7e5f` at the center and transitioning to `#feb47b` at the edges.",{"id":1350,"title":1351,"description":1352,"code":1353,"language":43,"filename":9,"whenToUse":9,"highlighted":1354},"ebde91ac-7229-48a4-aca3-35e0c068490d","Conic Gradient","Applies a conic gradient that rotates around a central point, creating a \"pizza slice\" effect. `from 0deg` defines the rotation's starting point. Colors are distributed angularly.","background: conic-gradient(from 0deg, #ff7e5f, #feb47b, #ff7e5f);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">background: conic-gradient(from 0deg, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#ff7e5f\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#feb47b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#ff7e5f\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1356,"title":1357,"description":1358,"code":1359,"language":43,"filename":9,"whenToUse":9,"highlighted":1360},"33806393-f257-4dc5-b3af-22e0a236a879","Repeating Linear Gradient","Creates a repeating linear gradient pattern. In this example, it creates 10px stripes of `#ff7e5f` and 10px of `#feb47b`, repeating at a 45-degree angle.","background: repeating-linear-gradient(45deg, #ff7e5f, #ff7e5f 10px, #feb47b 10px, #feb47b 20px);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">background: repeating-linear-gradient(45deg, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#ff7e5f\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#ff7e5f\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> 10px, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#feb47b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> 10px, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#feb47b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> 20px);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1362,"title":1363,"description":1364,"code":1365,"language":43,"filename":9,"whenToUse":9,"highlighted":1366},"299f6a53-1760-4ab8-81c8-5a7193bd58c3","Clip Path: Circular Clip","Clips the element into a circular shape. `circle(50%)` creates a circle with a radius of 50% of the element's smaller side, centered. Content outside the clip path is invisible.","clip-path: circle(50%);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">clip-path\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: circle(50%);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1368,"title":1369,"description":1370,"code":1371,"language":43,"filename":9,"whenToUse":9,"highlighted":1372},"8f4bee95-e9e6-4edb-8e67-4cebf784b5a8","Clip Path: Polygonal Clip","Clips the element into a polygonal shape defined by a list of point coordinates. In this example, it creates a diamond shape.","clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">clip-path\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1374,"title":1375,"description":1376,"code":1377,"language":43,"filename":9,"whenToUse":9,"highlighted":1378},"9f67e434-9f3d-4bdc-a9f6-d3e89787fc5b","Clip Path: Elliptical Clip","Clips the element into an elliptical shape. `ellipse(rx ry at x y)` defines the horizontal and vertical radii and the center position of the ellipse.","clip-path: ellipse(50% 40% at 50% 50%);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">clip-path\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: ellipse(50% 40% at 50% 50%);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1380,"title":1381,"description":1382,"code":1383,"language":43,"filename":9,"whenToUse":9,"highlighted":1384},"22017395-fbd2-480f-974c-f375d97680d5","Image Mask","Applies an image as a mask to the element. The mask image (usually a PNG with transparency or SVG) defines which parts of the element are visible and which are transparent.","mask-image: url(\"mask.png\");","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">mask-image\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: url(\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">mask\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.png\");\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1386,"title":1387,"description":1388,"code":1389,"language":43,"filename":9,"whenToUse":9,"highlighted":1390},"6fa9e780-19d9-47be-aaf3-095e601d9bb5","Backdrop Filter: Background Blur","Applies a filter effect to the background area *behind* the element. In this example, content visible through the element will be blurred by 5 pixels, creating a frosted glass effect. Requires browser support and is usually used with a semi-transparent background on the element.","backdrop-filter: blur(5px);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">backdrop-filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: blur(5px);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1392,"title":1393,"description":1394,"snippets":1395},"d2e5c9ed-adc6-4236-9cb8-9563759ff1f6","🎨 CSS Custom Properties (Variables)","CSS Custom Properties, also known as CSS variables, allow defining reusable values in a stylesheet. They facilitate maintenance, promote design consistency, and enable dynamic theming.",[1396,1402,1408,1414,1420,1426,1430,1436,1442,1448,1454,1460,1466,1472,1478,1484,1490],{"id":1397,"title":1398,"description":1399,"code":1400,"language":43,"filename":9,"whenToUse":9,"highlighted":1401},"39ff26d6-4512-4c54-909e-4783a4b74aad","Start of Global Variable Declaration","The `:root` selector represents the document's root element (the `\u003Chtml>` element). Declaring variables here makes them globally accessible throughout the CSS document.",":root {","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1403,"title":1404,"description":1405,"code":1406,"language":43,"filename":9,"whenToUse":9,"highlighted":1407},"bf1411e2-6173-4757-a89b-d1726d56cc27","Variable Declaration: Primary Color","Declares a CSS variable named `--primary-color` and assigns it the hexadecimal value `#3498db` (a shade of blue). CSS variable names start with two hyphens (`--`).","  --primary-color: #3498db;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  --primary-color: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">#3498db\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1409,"title":1410,"description":1411,"code":1412,"language":43,"filename":9,"whenToUse":9,"highlighted":1413},"50392156-a58b-4dec-8d6e-53af172669a9","Variable Declaration: Secondary Color","Declares a CSS variable named `--secondary-color` and assigns it the value `#2ecc71` (a shade of green).","  --secondary-color: #2ecc71;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  --secondary-color: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">#2ecc71\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1415,"title":1416,"description":1417,"code":1418,"language":43,"filename":9,"whenToUse":9,"highlighted":1419},"532a1a1a-1d4f-486b-90f3-be417720ae18","Variable Declaration: Base Font Size","Declares a CSS variable to define the base font size, facilitating typographic consistency throughout the project.","  --font-size-base: 16px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  --font-size-base: 16px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1421,"title":1422,"description":1423,"code":1424,"language":43,"filename":9,"whenToUse":9,"highlighted":1425},"82b885e1-e853-4f78-9d9f-2d8d7b8fe4d2","Variable Declaration: Spacing Unit","Declares a CSS variable to define a spacing unit, useful for creating a consistent, grid-based spacing system.","  --spacing-unit: 8px;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  --spacing-unit: 8px;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1427,"title":1428,"description":1429,"code":950,"language":43,"filename":9,"whenToUse":9,"highlighted":951},"7e8baaad-dc54-40c6-93c4-3f6dd048f178","End of Variable Declaration","Closes the CSS variable declaration block within the `:root` selector.",{"id":1431,"title":1432,"description":1433,"code":1434,"language":43,"filename":9,"whenToUse":9,"highlighted":1435},"24481bed-db2e-47cf-8825-bdb76b552464","Using Variable for Color","Applies the value of the `--primary-color` variable to the `color` property. The `var()` function is used to access the value of a custom property.","color: var(--primary-color);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">color: var(--primary-color);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1437,"title":1438,"description":1439,"code":1440,"language":43,"filename":9,"whenToUse":9,"highlighted":1441},"33ae11fa-513a-4c80-b69c-6aaf40617757","Using Variable for Font Size","Applies the value of the `--font-size-base` variable to the `font-size` property, ensuring the text uses the defined base size.","font-size: var(--font-size-base);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: var(--font-size-base);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1443,"title":1444,"description":1445,"code":1446,"language":43,"filename":9,"whenToUse":9,"highlighted":1447},"f6ff6449-69da-495a-97d0-ee60a56c138e","Using Variable for Margin","Applies the value of the `--spacing-unit` variable to the `margin` property, using the consistent spacing unit.","margin: var(--spacing-unit);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">margin: var(--spacing-unit);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1449,"title":1450,"description":1451,"code":1452,"language":43,"filename":9,"whenToUse":9,"highlighted":1453},"a6d3a06f-7a8b-4885-a39c-cdfbec7bd53d","Calculation with Variable","Uses the `calc()` function to perform mathematical operations with CSS variables. In this case, padding is set to double the value of `--spacing-unit`, resulting in `16px`.","padding: calc(var(--spacing-unit) * 2);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">padding: calc(var(--spacing-unit) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> 2);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1455,"title":1456,"description":1457,"code":1458,"language":43,"filename":9,"whenToUse":9,"highlighted":1459},"6966702b-6303-49cf-bb58-9be4457a8816","Variable with Default Value (Fallback)","Uses the `--primary-color` variable. If the variable is not defined, the fallback value `#333` (dark gray) will be used. This increases the robustness of the CSS.","color: var(--primary-color, #333);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">color: var(--primary-color, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">#333\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1461,"title":1462,"description":1463,"code":1464,"language":43,"filename":9,"whenToUse":9,"highlighted":1465},"48ad9634-3782-419c-af37-c1fe035d0d54","Variable with Explicit Fallback","Uses the `--font-size-base` variable with a fallback value of `16px` if the variable is not found or is undefined.","font-size: var(--font-size-base, 16px);","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: var(--font-size-base, 16px);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1467,"title":1468,"description":1469,"code":1470,"language":43,"filename":9,"whenToUse":9,"highlighted":1471},"8c771285-5365-40f1-986c-e0adc43655a3","Nested Variable Fallback","Demonstrates the use of nested fallbacks. Tries to use `--bg-color`. If not defined, tries `--white`. If `--white` is also not defined, uses the final value `#fff`.","background: var(--bg-color, var(--white, #fff));","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">background: var(--bg-color, var(--white, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">));\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1473,"title":1474,"description":1475,"code":1476,"language":43,"filename":9,"whenToUse":9,"highlighted":1477},"a4a00822-cede-48d0-963c-a5f490341aa4","Media Query para Modo Escuro","Inicia um bloco de estilos que será aplicado se o sistema operacional do usuário estiver configurado para o modo escuro. Permite criar temas dinâmicos que se adaptam às preferências do usuário.","@media (prefers-color-scheme: dark) {","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">@media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (prefers-color-scheme: dark) {\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1479,"title":1480,"description":1481,"code":1482,"language":43,"filename":9,"whenToUse":9,"highlighted":1483},"c78d363e-817d-4dda-93ed-92843d742096","Color Variable for Dark Mode","Within the dark mode media query, redefines the value of the `--primary-color` variable to a lighter shade of blue, suitable for dark backgrounds.","  --primary-color: #5dade2;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  --primary-color: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">#5dade2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1485,"title":1486,"description":1487,"code":1488,"language":43,"filename":9,"whenToUse":9,"highlighted":1489},"56120e60-93bb-4eff-b0c3-b42c383f9e0a","Background Variable for Dark Mode","Defines a `--bg-color` variable for a very dark gray shade, which will be used as the background color in dark mode.","  --bg-color: #1a1a1a;","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  --bg-color: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">#1a1a1a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1491,"title":948,"description":1492,"code":950,"language":43,"filename":9,"whenToUse":9,"highlighted":951},"035b00e5-8863-4d81-bed2-190e5115841f","Closes the media query style block, ending the conditional rules for dark mode.",235]