Bu modul kursga kirish: CSS nima, u qanday muammoni hal qiladi va kurs qanday quriladi.

CSS nima va nega alohida til

HTML sahifaning strukturasini beradi, lekin ko’rinishni boshqarishga qodir emas. CSS (Cascading Style Sheets) aynan shu ish uchun yaratilgan: rang, shrift, o’lcham, joylashuv — hammasi CSS’ning zimmasida.

Struktura bilan ko’rinishning ajratilishi katta afzallik beradi: bitta HTML’ga turli CSS ulab, saytning butunlay boshqa qiyofasini olish mumkin — HTML’ga tegmasdan.

h1 {
  color: darkgreen;
  font-size: 36px;
}

Natija: sahifadagi barcha birinchi darajali sarlavhalar to’q yashil va 36 piksel bo’ladi.

CSS qoidasi uch qismdan iborat: selektor (kimga), xususiyat (nimani) va qiymat (qanday). Shu uch so’z kursning oxirigacha ishlatiladi.

Kurs qanday quriladi

Bu kurs "loyiha bilan birga" formatida: deyarli har bo’lim oxirida "loyihani yaxshilash" darsi bor — yangi o’rganilgan xossalar darhol bitta doimiy loyihaga qo’llanadi. Shuning uchun darslarni tartib bilan ko’ring: har keyingi dars oldingi loyiha holatidan davom etadi.

O’rganish usuli haqida ikki maslahat:

1. Videoni ko’rib bo’lgach, kodni o’zingiz yozing — nusxalash o’rgatmaydi.
2. Brauzerning DevTools vositasini (F12) erta o’rganing: istalgan element ustida o’ng tugma → Inspect — unga qaysi CSS qoidalari tegayotganini jonli ko’rasiz va o’zgartirib sinaysiz.

Tipik xato. CSS’ni "yodlab" o’rganishga urinish. Xossalar yuzlab; ularni yodlash emas, qidirib topish va DevTools’da sinash ko’nikmasi muhim. Kurs eng ko’p ishlatiladigan o’zagini beradi — qolgani ish jarayonida keladi.

Amaliyot

1. HTML kursidagi biror sahifangizga style.css ulang va h1ga rang bering.
2. DevTools’ni ochib, o’zingiz yozgan qoidani toping; qiymatini brauzerda vaqtincha o’zgartirib ko’ring.
3. Istalgan katta saytni Inspect qilib, bitta tugmasiga qanday CSS berilganini ko’rib chiqing.

Modul testini ishlang — keyingi modul CSS’ning eng muhim mavzusidan boshlanadi: selektorlar.