> For the complete documentation index, see [llms.txt](https://cyberacademyuz.gitbook.io/w3schools/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cyberacademyuz.gitbook.io/w3schools/html/boshlash/css.md). # CSS ![](/files/25q8Fttj6mVugz8LM9oU) ## CSS nima ? CSS veb-sahifa dizaynini o'zgartirish uchun ishlatiladi. CSS yordamida rangni, shriftni, matn o'lchamini, elementlar orasidagi masofani, elementlar qanday joylashishini, orqa fondagi rasmi yoki orqa fon ranglari qanday bo'lishi, turli qurilmalar va ekran o'lchamlari uchun qanday ko'rinishini boshqarishingiz mumkin. {% hint style="warning" %} **Maslahat: Kaskad** so'zi ota elementga berilgan stillar uning ichidagi barcha bola elementlariga ham tasir qilishini anglatadi. Agar siz bodyning matn rangini "ko'k" rang qilsangiz, sahifadagi barcha sarlavhalar, paragraflar va body ichidagi boshqa matn elementlari ham bir xil rangda bo'ladi (boshqa rang bermaguningizgacha)! {% endhint %} ## CSSdan foydalanish CSSni HTMLsahifaga 3 xil yo'l bilan qo'shiladi: * Inline - HTML elementlari ichida `style` attributidan foydalanib * Internal - `` qismda `

This is a heading

This is a paragraph.

``` {% embed url="" %} {% endtab %} {% endtabs %} ## External CSS Bir qancha HTML sahifalarga stil berish uchun external CSSdan foydalaniladi. Tashqi stillardan foydalanish uchun har bir HTML sahifning `` qismiga havola qoʻshing: {% tabs %} {% tab title="HTML" %} ```html

This is a heading

This is a paragraph.

``` {% embed url="" %} {% endtab %} {% endtabs %} Tashqi stillar istalgan matn muharririda yozilishi mumkin. Stillar yoziladigan faylda hech qanday HTML kod bo'lmaydi va .css kengaytmasi bilan saqlanishi kerak. "styles.css" fayli quyidagicha ko'rinadi: ```css body { background-color: powderblue; } h1 { color: blue; } p { color: red; } ``` {% hint style="warning" %} **Maslahat:** Tashqi stillar yordamida bitta faylni o'zgartirish orqali butun veb-sayt ko'rinishini o'zgartirishingiz mumkin! {% endhint %} ## CSS ranglar, shriftlar va o'lchamlar Bu qismda tez-tez ishlatiladigan ba'zi CSS xususiyatlarini ko'rsatamiz. Keyinchalik esa ular haqida ko'proq bilib olasiz. CSSning `color` xususiyati matn rangi qanday bo'lishi kerakligini belgilaydi. CSSning `font-family` xususiyati matn shrifti qanday bo'lishi kerakligini belgilaydi. CSSning `font-size` xususiyati matn o'lchami qanday bo'lishi kerakligini belgilaydi. {% tabs %} {% tab title="HTML" %} CSSning color, font-family va font-size xususiyatlaridan foydalaning ```html

This is a heading

This is a paragraph.

``` {% embed url="" %} {% endtab %} {% endtabs %} ## CSS Border CSSning `border` xususiyati HTML elementining atrofidagi chegarasini ifodalaydi. **Maslahat**: Deyarli barcha HTML elementlari uchun chegara belgilashingiz mumkin. {% tabs %} {% tab title="HTML" %} CSSning border xususiyatidan foydalaning: ```css p { border: 2px solid powderblue; } ``` {% embed url="" %} {% endtab %} {% endtabs %} ## CSS Padding CSSning `padding` xususiyati matn va uning chegara o'rtasidagi bo'sh joyni bildiradi. {% tabs %} {% tab title="HTML" %} CSSning border va padding xususiyatidan foydalanish ```css p { border: 2px solid powderblue; padding: 30px; } ``` {% embed url="" %} {% endtab %} {% endtabs %} ## CSS Margin CSSning `margin` xususiyati chegaraning tashqi tomonidagi bo'sh joyni bildiradi. {% tabs %} {% tab title="HTML" %} CSSning border va margin xususiyatidan foydalaning: ```css p { border: 2px solid powderblue; margin: 50px; } ``` {% embed url="" %} {% endtab %} {% endtabs %} ## Tashqi CSS faylni ulash Tashqi stillarni, uning to'liq URL manzili yoki veb-sahifa fayliga nisbatan ichki joylashuv yo'li bilan ulash mumkin. {% tabs %} {% tab title="HTML" %} Bu misolda CSS faylning to'liq URLini ulashdan foydalanilgan: ```html ``` {% embed url="" %} {% endtab %} {% endtabs %} {% tabs %} {% tab title="HTML" %} Ushbu misolda joriy veb-saytdagi html papkasida joylashgan CSS fayl ulangan: ```html ``` {% embed url="" %} {% endtab %} {% endtabs %} {% tabs %} {% tab title="HTML" %} Ushbu misolda joriy sahifa bilan bir xil papkada joylashgan CSS fayl ulangan: ```html ``` {% embed url="" %} {% endtab %} {% endtabs %} ## Bo'lim xulosasi * Inline stillar uchun HTMLda `style` attributidan foydalaniladi * Internal CSS uchun HTMLda `