[{"data":1,"prerenderedAt":164},["ShallowReactive",2],{"term-c\u002Fcss":3,"related-c\u002Fcss":143},{"id":4,"title":5,"acronym":6,"body":7,"category":120,"description":121,"difficulty":122,"extension":123,"letter":124,"meta":125,"navigation":126,"path":127,"related":128,"seo":136,"sitemap":137,"stem":140,"subcategory":141,"__hash__":142},"terms\u002Fterms\u002Fc\u002Fcss.md","CSS","Cascading Style Sheets",{"type":8,"value":9,"toc":114},"minimark",[10,15,19,23,26,30,103,107,110],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"CSS is the makeup and wardrobe for your HTML skeleton. It decides what color everything is, how big things are, and where stuff goes on the page. Without CSS every website would look like a Word document from 1998.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"CSS is a stylesheet language used to describe the presentation of an HTML document. It controls layout, colors, fonts, spacing, animations, and responsiveness. The 'cascading' refers to how rules are applied in priority order based on specificity and inheritance.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","h1 {\n  color: hotpink;\n  font-size: 2rem;\n  margin-bottom: 1rem;\n}\n","css","",[38,39,40,53,70,84,97],"code",{"__ignoreMap":36},[41,42,45,49],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sBMFI","h1",[41,50,52],{"class":51},"sMK4o"," {\n",[41,54,56,60,63,67],{"class":43,"line":55},2,[41,57,59],{"class":58},"sqsOY","  color",[41,61,62],{"class":51},":",[41,64,66],{"class":65},"sTEyZ"," hotpink",[41,68,69],{"class":51},";\n",[41,71,73,76,78,82],{"class":43,"line":72},3,[41,74,75],{"class":58},"  font-size",[41,77,62],{"class":51},[41,79,81],{"class":80},"sbssI"," 2rem",[41,83,69],{"class":51},[41,85,87,90,92,95],{"class":43,"line":86},4,[41,88,89],{"class":58},"  margin-bottom",[41,91,62],{"class":51},[41,93,94],{"class":80}," 1rem",[41,96,69],{"class":51},[41,98,100],{"class":43,"line":99},5,[41,101,102],{"class":51},"}\n",[11,104,106],{"id":105},"when-youll-hear-this","When You'll Hear This",[16,108,109],{},"\"Just fix the CSS so the button doesn't overlap the navbar.\" \u002F \"CSS specificity is why your styles aren't applying.\"",[111,112,113],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":55,"depth":55,"links":115},[116,117,118,119],{"id":13,"depth":55,"text":14},{"id":21,"depth":55,"text":22},{"id":28,"depth":55,"text":29},{"id":105,"depth":55,"text":106},"frontend","CSS is the makeup and wardrobe for your HTML skeleton. It decides what color everything is, how big things are, and where stuff goes on the page.","beginner","md","c",{},true,"\u002Fterms\u002Fc\u002Fcss",[129,130,131,132,133,134,135],"HTML","Sass","SCSS","Tailwind","CSS Variables","Flexbox","CSS Grid",{"title":5,"description":121},{"changefreq":138,"priority":139},"weekly",0.7,"terms\u002Fc\u002Fcss",null,"vgAl4AV0lCHvpG2JCfw0v_sN3suT3uHZiCBnVdeixR0",[144,148,151,154,158,161],{"title":135,"path":145,"acronym":141,"category":120,"difficulty":146,"description":147},"\u002Fterms\u002Fc\u002Fcss-grid","intermediate","CSS Grid is the two-dimensional layout system — rows AND columns at the same time. Think of it like a spreadsheet you can put your whole website into.",{"title":133,"path":149,"acronym":141,"category":120,"difficulty":122,"description":150},"\u002Fterms\u002Fc\u002Fcss-variables","CSS Variables (officially called Custom Properties) let you store values in CSS and reuse them everywhere.",{"title":134,"path":152,"acronym":141,"category":120,"difficulty":122,"description":153},"\u002Fterms\u002Ff\u002Fflexbox","Flexbox is a CSS layout system that makes positioning elements in a row or column stupidly easy.",{"title":129,"path":155,"acronym":156,"category":120,"difficulty":122,"description":157},"\u002Fterms\u002Fh\u002Fhtml","HyperText Markup Language","HTML is like the skeleton of a webpage. You write tags like \u003Ch1> and \u003Cp> and the browser builds the bones of your site from them.",{"title":130,"path":159,"acronym":141,"category":120,"difficulty":146,"description":160},"\u002Fterms\u002Fs\u002Fsass","Sass is CSS with superpowers — variables, nesting, mixins, and functions that vanilla CSS didn't have for years.",{"title":131,"path":162,"acronym":141,"category":120,"difficulty":146,"description":163},"\u002Fterms\u002Fs\u002Fscss","SCSS is the syntax of Sass that looks like regular CSS but with superpowers added.",1776518262986]