# CSS qanday qo'shiladi ## CSSni ulashning 3 xil usuli CSS ni qo'shishni 3 xil usuli mavjud: * External CSS (Tashqi CSS) * Internal CSS (Ichki CSS) * Inline CSS (Bir qatordagi CSS) ### External CSS (Tashqi CSS) Tashqi stillar yordamida butun sayt dizaynini bitta faylning o'zida o'zgartira olasiz! Har bir HTML sahifasining head qismida tashqi CSS fayl `` tegi orqali ulangan bo'lishi kerak. {% tabs %} {% tab title="HTML" %} Tashqi stillar `` tegining ichida `` elementi bilan HTML sahifaga ulanadi: ```html

This is a heading

This is a paragraph.

``` {% embed url="" %} {% endtab %} {% endtabs %} Tashqi CSS fayllar har qanday matn tahrirlovchi dastur orqali yozilishi va ***.css*** kengaytmasi bilan saqlanishi mumkin. Tashqi CSS fayllar o'zida hech qanday HTML teglarini saqlamaydi. Quyida "**mystyle.css**" fayli qanday ko'rinishi keltirilgan: {% tabs %} {% tab title="CSS" %} {% code title="mystyle.css" %} ```css body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } ``` {% endcode %} {% endtab %} {% endtabs %} {% hint style="danger" %} **Eslatma**: Xususiyat qiymati (20) va qisqarma (px) o'rtasida bo'sh joy qo'shmang: Xato (bo'sh joy): `margin-left: 20 px;` To'g'ri (bo'sh joysiz): `margin-left: 20px;` {% endhint %} ## Internal CSS (Ichki CSS) Internal CSS (Ichki CSS) bitta HTML sahifasigagina bezak berish kerak bo'lganda ishlatiladi Ichki CSS \

This is a heading

This is a paragraph.

``` {% embed url="" %} {% endtab %} {% endtabs %} ## Inline CSS (Bir qatordagi CSS) Inline CSS bitta elementga unikal still berish uchun ishlatiladi. Inline CSSdan foydalanish uchun kerakli elementga `style` attributini qo'shing. Style atributi har qanday CSS xususiyatini o'z ichiga olishi mumkin. {% tabs %} {% tab title="HTML" %} Inline stillar tegishli elementning `style` atributida yoziladi: ```html

This is a heading

This is a paragraph.

``` {% embed url="" %} {% endtab %} {% endtabs %} {% hint style="warning" %} **Maslahat:** Inline css stylesheetning ko'pgina afzalliklarini yo'qotadi. Ushbu usuldan kamdan kam holatda foydalaning. {% endhint %} ## Bir nechta stylesheetlar Agar bitta selektor (element) uchun ba'zi xususiyatlar turli stylesheetlarda berilgan bo'lsa, oxirgi o'qilgan stylesheetdagi qiymatdan foydalaniladi. {% code title="Tasavvur qiling, quyidagi kod

elementi uchun tashqi CSS faylida yozilgan:" %} ```css h1 { color: navy; } ``` {% endcode %} {% code title="Keyin, tasavvur qiling quyidagi kod ichki CSS orqali

uchun yozilgan:" %} ```css h1 { color: orange; } ``` {% endcode %} {% tabs %} {% tab title="HTML" %} Agarda Internal CSS, External CSS ulanishdian keyin yozilgan bo'lsa, unda `

`"olovrang" bo'lib qoladi: ```html ``` {% embed url="" %} {% endtab %} {% endtabs %} {% tabs %} {% tab title="HTML" %} Agarda Internal CSS `` tegidan oldin yozilgan bo'lsa unda External CSS ning qiymatlari hisobga olinib `

` elementlari "ko'k rang" bo'lib qoladi: ```html ``` {% embed url="" %} {% endtab %} {% endtabs %} ## Kaskadlash tartibi HTML element uchun bir nechta stil qiymatlari berilsa qaysi biri ishlatiladi ? Barcha sahifadagi stillar quyidagi ketma-ketlikda ishlaydi: 1. Inline stil (HTML elementining ichidagi CSS qiymatlari) 2. External va Inline CSS (Head bo'limidagi) 3. Browser ni defolt holatidagi Shunday qilib, inline still yuqori ustuvorlikka ega va tashqi va ichki stillarini hamda brauzerning standart sozlamalarini bekor qiladi. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://cyberacademyuz.gitbook.io/w3schools/css/css-qollanma/css-qanday-qoshiladi.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.