# CSS nima va uni ulash usullari

> CSS qoidasining selector, property va value qismlarini o'rganing; external, internal va inline CSS ulash usullarini jonli natijada taqqoslang.

Manba: https://learncode.uz/html-css/css-nima/
Sana: 2026-05-20

[HTML](https://learncode.uz/html-css/html-nima) mazmunning tuzilishi va ma'nosini belgilaydi.
CSS — *Cascading Style Sheets* — shu elementlarning rangi, o'lchami,
oralig'i va joylashuvini boshqaradi. HTML'ni o'zgartirmasdan bir xil mazmunga
turli dizayn berish mumkin.

## CSS qoidasi qanday o'qiladi?

```css
p {
  color: #334155;
  font-size: 18px;
}
```

- `p` — qaysi elementlar tanlanishini bildiradigan **selektor**;
- `{ ... }` — deklaratsiyalar bloki;
- `color` va `font-size` — **xususiyatlar**;
- `#334155` va `18px` — xususiyatlarning **qiymatlari**;
- har deklaratsiya odatda `;` bilan tugaydi.

Brauzer barcha `<p>` elementlarini topib, ularga blok ichidagi qoidalarni
qo'llaydi. CSS xatosi odatda butun sahifani buzmaydi: brauzer tushunmagan
deklaratsiyani tashlab, keyingisini o'qishda davom etadi.

## Jonli natija

```html
<article class="card">
  <p class="label">YANGI DARS</p>
  <h1>CSS bilan tanishuv</h1>
  <p>HTML tuzilishni, CSS esa ko'rinishni boshqaradi.</p>
  <a href="#">Darsni boshlash</a>
</article>
```

```css
body {
  background: #f8fafc;
}
.card {
  max-width: 480px;
  padding: 24px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: white;
}
.label {
  color: #4f46e5;
  font-size: 12px;
  font-weight: 700;
}
h1 { color: #0f172a; }
a { color: #4338ca; }
```

Natija HTML mazmuni o'sha-o'sha qolib, CSS orqali fon, chegara, bo'shliq va
ranglar o'zgarganini ko'rsatadi.

## CSS ulashning uch usuli

### Tashqi fayl — external CSS

CSS alohida `style.css` faylida saqlanadi va HTML `<head>` qismida ulanadi:

```html
<link rel="stylesheet" href="style.css">
```

```css
/* style.css */
body {
  font-family: Arial, sans-serif;
}
```

Bu asosiy va tavsiya etiladigan usul: bir fayl ko'p sahifaga ulanadi, brauzer
uni keshlashi mumkin va dizayn bir joydan boshqariladi.

### Sahifa ichida — internal CSS

Kichik tajriba yoki faqat bitta sahifaga tegishli qoida `<style>` ichida
yozilishi mumkin:

```html
<head>
  <style>
    h1 { color: navy; }
  </style>
</head>
```

### Element ichida — inline CSS

```html
<p style="color: crimson;">Ogohlantirish matni</p>
```

Inline uslub tez sinov uchun qulay, lekin HTML va dizaynni aralashtiradi,
takrorlanadi va qayta boshqarish qiyin. Asosiy loyiha uslublarini tashqi
faylda saqlang.

> **Nega Cascading deyiladi?**
>
> Bir elementga bir nechta qoida mos kelishi mumkin. Brauzer manba tartibi,
> selektor aniqligi va boshqa kaskad qoidalari asosida qaysi qiymat yutishini
> hisoblaydi. Keyingi darsda selektorlar bilan bu jarayonni amalda ko'ramiz.

## CSS fayl yo'li

HTML va CSS bir papkada bo'lsa `href="style.css"` yetarli. CSS `css` papkasida
bo'lsa:

```html
<link rel="stylesheet" href="css/style.css">
```

Ulanish ishlamasa, fayl nomi, kengaytmasi, katta-kichik harf va HTML fayliga
nisbatan yo'lni tekshiring. `<link>` elementi `<head>` ichida bo'ladi.

## Komment va formatlash

CSS kommenti `/*` va `*/` orasida yoziladi:

```css
/* Asosiy navigatsiya */
nav {
  background-color: #0f172a;
}
```

Har xususiyatni alohida qatorda yozish, ikki bo'sh joy indentatsiya va izchil
nomlash kodni o'qishni osonlashtiradi.

> **CSS ishlamasa nimani tekshirish kerak?**
>
> Selektor HTML'ga mosligini, xususiyat nomidagi xatoni, `:` va `;` belgilarini,
> qavslar yopilganini hamda stylesheet yo'lini tekshiring. DevTools `Styles`
> paneli qoidaning qo'llanganini yoki boshqa qoida bilan bosilganini ko'rsatadi.

## Amaliy mashq

`index.html` va `style.css` yarating. HTML'ga sarlavha, paragraf va havola
qo'shing; tashqi CSS orqali fon, matn rangi, ichki bo'shliq va chegara bering.
Keyin stylesheet href yo'lini vaqtincha buzib, muammoni DevTools orqali toping.

## Qisqacha xulosa

- CSS HTML elementlarining ko'rinishi va layoutini boshqaradi.
- Qoida selektor va `xususiyat: qiymat` deklaratsiyalaridan tuziladi.
- External CSS loyiha uchun asosiy usuldir.
- Internal uslub kichik sahifa yoki tajribaga, inline esa kamdan-kam holatga mos.
- Kaskad bir elementga mos kelgan qoidalar orasidan natijani hisoblaydi.

Keyingi darsda [CSS selektorlar](https://learncode.uz/html-css/selektorlar) bilan kerakli
elementni aniq tanlaymiz.