Chapter 6 — CSS Tipografiya

---

6.1 Font Xususiyatlari

Example

styles.css
CSSNusxalash
01h1 {
02  font-family: 'Inter', sans-serif;
03  font-size: 2.5rem;
04  font-weight: 700;
05  line-height: 1.2;
06  letter-spacing: -0.02em;
07}

6.2 Text Xususiyatlari

Example

styles.css
CSSNusxalash
01p {
02  text-align: justify;
03  text-transform: uppercase;
04  text-decoration: underline;
05  white-space: nowrap;
06  overflow: hidden;
07  text-overflow: ellipsis;
08}

⚠️ Common Mistake
line-heightga piksel qiymat berish (masalan line-height: 20px) — bu shrift hajmi o'zgarganda proportsional moslashmaydi, unitless qiymat afzalroq.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Sarlavha uchun font-size, font-weight, line-height belgilang, keyin paragraf uchun boshqacha qiymatlar bering.

🟡 Exercise 2 — Medium

Task: Karta sarlavhasini bitta qatorga cheklab, ortiqchasini "..." bilan ko'rsatadigan CSS yozing.

🔴 Exercise 3 — Hard

Task: To'liq responsive typography tizimi yarating: clamp() funksiyasidan foydalanib, sarlavha hajmi ekran kengligiga qarab silliq o'zgarsin.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.title { width: 200px; }

index.html
HTMLNusxalash
01<h2 class="title">Bu juda uzun sarlavha matni bo'lib, konteynerdan chiqib ketmoqda</h2>

Your Task: Matn nega konteynerdan tashqariga "toshib" chiqmoqda?

<details> <summary>Solution</summary> Uzun, bo'linmagan so'z yoki umuman `overflow-wrap`/`word-break` berilmagan bo'lishi mumkin. Yechim: `overflow-wrap: break-word;` yoki `word-break: break-word;` qo'shish, yoki `text-overflow: ellipsis` bilan bitta qatorga cheklash. </details>

---

📌 Chapter Summary

Tipografiya font-family, font-size, font-weight, line-height, letter-spacing va text-* xususiyatlari orqali boshqariladi. Fallback shriftlar va unitless line-height — best practice.

🎯 Key Takeaways

• Har doim fallback shrift zanjiri qo'shing
• line-height uchun birliksiz qiymatlar ishlatilsin
• Matn kesish uchun 3 xususiyat birgalikda kerak: white-space, overflow, text-overflow

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01font-family: 'Font', fallback;
02line-height: 1.5; /* unitless */
03white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

---