Chapter 0 — CSS Nima va Brauzer Qanday Render Qiladi

---

0.1 CSS nima va nima uchun kerak?

Simple Explanation

CSS (Cascading Style Sheets) — HTML elementlarining vizual ko'rinishini (rang, o'lcham, joylashuv) belgilovchi til.

Why Does It Exist?

HTML faqat MAZMUN va TUZILISHNI belgilaydi (sarlavha, paragraf, ro'yxat). CSS esa shu tuzilmani qanday KO'RINISHDA taqdim etishni belgilaydi — bu ikkovini ajratish "separation of concerns" tamoyiliga asoslanadi.

Example

index.html
HTMLNusxalash
01<link rel="stylesheet" href="styles.css">
02<style>/* internal CSS */</style>
03<p style="color: red;">Inline CSS</p>

0.2 Brauzer Render Pipeline

Mental Model

🧠 Brauzer HTML'ni DOM (Document Object Model) ga, CSS'ni esa CSSOM (CSS Object Model) ga aylantiradi. Ikkalasi birlashib Render Tree hosil qiladi, so'ngra Layout (joylashuvni hisoblash) va Paint (rangларни chizish) bosqichlari yuz beradi.

Example

code.text
TEXTNusxalash
01HTML → DOM
02CSS  → CSSOM
03DOM + CSSOM → Render Tree → Layout → Paint

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Bitta HTML faylida barcha uchta CSS ulash usulini (external, internal, inline) qo'llab ko'ring.

🟡 Exercise 2 — Medium

Task: Brauzer DevTools'ning "Rendering" panelida "Paint flashing"ni yoqib, sahifa qaysi qismlari qayta chizilishini kuzating.

🔴 Exercise 3 — Hard

Task: Katta ro'yxatga ega sahifa yarating va uning har bir elementiga tez-tez width o'zgartiruvchi JavaScript qo'shing — "layout thrashing" nima ekanini DevTools Performance panelida kuzating.

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<link rel="stylesheet" href="styles.css">
02<style>p { color: blue; }</style>

styles.css faylida p { color: red; } bor.

Your Task: Paragraf matni qaysi rangda ko'rinadi va nega?

<details> <summary>Solution</summary> Matn ko'k (blue) rangda ko'rinadi. Sabab: internal `<style>` tegi odatda HTML'da `<link>`dan KEYIN joylashadi (yoki source order'da keyinroq), shuning uchun cascade qoidasiga ko'ra keyingi qoida g'alaba qiladi (agar specificity bir xil bo'lsa). </details>

---

📌 Chapter Summary

CSS HTML'ning vizual ko'rinishini boshqaradi. Uni ulashning 3 usuli bor: external, internal, inline. Brauzer HTML va CSS'ni DOM/CSSOM'ga aylantirib, Render Tree orqali Layout va Paint bosqichlariga o'tadi.

🎯 Key Takeaways

• External CSS — eng tavsiya etiladigan, keshlanadigan usul
• Render pipeline: HTML→DOM, CSS→CSSOM, birlashib Render Tree, keyin Layout va Paint
• Source order (qaysi qoida keyinroq yozilgan) cascade'da muhim rol o'ynaydi

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01External: <link rel="stylesheet" href="style.css">
02Internal: <style>...</style>
03Inline:   style="color: red;"
04Pipeline: HTML→DOM, CSS→CSSOM → Render Tree → Layout → Paint

---