Chapter 2CSS Tutorial~1 min read
CSS कसे काम करते?
CSS + DOM — How Browser Renders Styles
CSS म्हणजे HTML elements ला visual properties — colors, fonts, margins, layouts — देणे. पण browser हे नक्की कसे apply करतो? हे समजणे CSS mastery साठी important आहे.
CSS Rule चे 3 Parts
CSS Rule Structure
css
h1 {
color: navy;
font-size: 28px;
}
/* Selector → h1 (कोणाला style द्यायचे)
Property → color, font-size (काय बदलायचे)
Value → navy, 28px (कसे बदलायचे) */- ▸Selector: HTML elements target करतो — h1, .class-name, #id-name
- ▸Property: कोणता style attribute बदलायचा — color, font-size, margin
- ▸Value: त्या property ची setting — blue, 24px, 10px
Browser CSS कसे Apply करतो — Step by Step
- ▸Step 1: User URL enter करतो, browser server ला request पाठवतो
- ▸Step 2: Server HTML file पाठवतो
- ▸Step 3: HTML → DOM (Document Object Model) मध्ये convert होते — प्रत्येक tag एक node बनतो
- ▸Step 4: Browser CSS files, fonts, images fetch करतो
- ▸Step 5: CSS parse होते — selectors नुसार group होते
- ▸Step 6: CSS DOM च्या respective nodes ला attach होते — Render Tree बनते
- ▸Step 7: Render Tree screen वर display होते — "Painting"
DOM म्हणजे काय?
DOM म्हणजे Document Object Model — webpage च्या सगळ्या tags आणि elements चे tree-like representation. HTML चे प्रत्येक tag एक node बनतो. Parent-child relationship तयार होते. CSS या DOM nodes ला target करून styles apply करते.
Marathi Analogy
🌳 Analogy: DOM म्हणजे family tree सारखे आहे. <html> हे great-grandparent, <body> हे grandparent, <div> हे parent, <p> हे child. CSS म्हणजे प्रत्येक family member ला त्यांचे कपडे (styles) देणे.
✅ Key Points — लक्षात ठेवा
- ▸CSS Rule = Selector + Property + Value
- ▸Browser: HTML → DOM → CSS attach → Render Tree → Paint
- ▸DOM = webpage चे tree structure representation
- ▸CSS DOM nodes ला target करून styles apply करते
0/16 chapters पूर्ण