CSS24 min readCSS How It Works
Understand how CSS connects with HTML, how browsers read CSS rules, and why styles sometimes apply and sometimes don’t.
CSS works by **selecting HTML elements** and applying styles to them. A CSS rule has three parts: 1. selector 2. property 3. value ## Basic rule structure ```css h1 { color: red; } ``` - h1 → selector - color → property - red → value ## How browser reads CSS 1. Browser loads HTML 2. Browser loads CSS 3. Browser matches selectors 4. Browser paints the page ## Example Try it yourself! Edit the HTML and CSS below: ```html <h1>Welcome</h1> <p>This is a website</p> ``` ```css h1 { color: green; } p { color: gray; } ``` Result: - heading is green - paragraph is gray Try changing the colors in the CSS tab to see the changes instantly! ## Common beginner confusion “Why my CSS not applying?” Usually because: - wrong selector - typo in class name - CSS file not linked ## Remember - CSS does not change HTML - CSS only changes appearance - Browser applies rules step by step