CSS nima?

CSS (Kaskadli uslublar jadvallari) — bu HTML hujjatlari ko‘rinishini boshqarish uchun ishlatiladigan uslubiy til. U orqali veb-sahifadagi elementlarning fon rangi, shrift turi, o‘lchami, joylashuvi, bo‘shliqlari, animatsiyalari kabi ko‘rinishlarini belgilash mumkin.

🔹 Umumiy ma’lumot:

To‘liq nomi: Cascading Style Sheets (Kaskadli uslublar jadvallari)
Muallifi: Håkon Wium Lie (Norvegiyalik dasturchi)
Yaratilgan yili: 1996
Standartlashtiruvchi tashkilot: W3C (World Wide Web Consortium)
HTML bilan birga ishlatiladi

💡 CSS nima uchun kerak?

Veb-sahifani go‘zallashtirish uchun
Matn, fon, bo‘shliqlar, chegaralar dizaynini boshqarish
Responsiv dizayn yaratish (mobilga moslashtirish)
Animatsiya va harakatlantirish imkoniyatlarini qo‘shish
Sahifadagi elementlarni joylashuviga qarab boshqarish

🧠 CSS tarixiy rivojlanishi:

Versiya	Yil	Xususiyatlari
CSS1	1996	Asosiy uslublar: shrift, rang, bo‘shliq
CSS2	1998	Pozitsiyalash, media turlari, z-index
CSS2.1	2004	Tuzatishlar va yaxshilanishlar
CSS3	2012	Modullik, Flexbox, Grid, animatsiyalar
CSS4	(ishlab chiqilmoqda)	Kengaytirilgan selektorlar va dizayn imkoniyatlari

🧩 CSS sintaksisi (qurilishi):

selektor {
  xossasi: qiymati;
}

Misol:

p {
  color: red;
  font-size: 18px;
}

Bu kod sahifadagi barcha <p> (paragraf) teglarini qizil rangda va 18px o‘lchamda chiqaradi.

🧰 CSSning turlari:

Turi	Tavsifi	Misol
Inline CSS	HTML teg ichida `style` atributi orqali	`<h1 style="color:blue;">`
Internal CSS	HTML faylning `<head>` qismida `<style>` orqali	`<style> h1 { color:blue; } </style>`
External CSS	CSS alohida `.css` fayl sifatida ulanadi	`<link rel="stylesheet" href="style.css">`

🖥️ Amaliy misol:

HTML:

<h1 class="sarlavha">Salom dunyo!</h1>

CSS:

.sarlavha {
  color: green;
  text-align: center;
  font-size: 30px;
}

🔥 Zamonaviy CSS xususiyatlari:

Flexbox — elementlarni bir yo‘nalishda moslashtirish
CSS Grid — ikki o‘lchamli (qator va ustunli) dizaynlar
Media queries — turli qurilmalarga moslashtirish
O‘zgaruvchilar (--asosiy-rang: #333;)
Animatsiya — transition, @keyframes
Maxsus shriftlar — @font-face yoki Google Fonts orqali
Qorong‘i rejim (dark mode) — prefers-color-scheme bilan

✅ CSS afzalliklari:

Dizaynni kontentdan ajratadi
Kodni tartibli va qayta ishlatish mumkin qiladi
Sahifa tezligi oshadi
Turli qurilmalarda moslashuvchan ishlaydi
Murakkab dizaynlarni soddalik bilan yaratish mumkin