CSS ni alohida yozish

Oldingi darslarda CSS ni yozish uchun style="..." dan foydalandik.

Endi esa boshqacha yo'lni o'rganaylik.

Misol

<style>
    div {
        background-color: red;
        color: blue;
    }
</style>

<h4>Hayot</h4>
<div>Assalomu alaykum</div>
<span>Tinchlik</span>

Hayot

Assalomu alaykum
Tinchlik

Yuqoridagi misolda nima bo'lyapti? <style>...</style> unsurning ichida CSS ni yozdik. U yerda "barcha divlarda orqa rangi qizil va harflarining rangi ko'k bo'lishi kerak" deb yozdik. Etibor beringlar h4 va span unsurlarni bezagi o'zgarmadi, faqatgina divning.

Misolni sal o'zgartiramiz.

<style>
    div {
        background-color: red;
        color: blue;
    }

    h4 {        background-color: brown;        color: white;        padding-left: 30px;    }</style>

<h4>Hayot</h4>
<div>Assalomu alaykum</div>
<span>Tinchlik</span>

Hayot

Assalomu alaykum
Tinchlik

Yana misolni o'zgartiramiz.

<style>
    div {
        background-color: red;
        color: blue;
    }

    h4 {
        background-color: brown;
        color: white;
        padding-left: 30px;
    }
</style>

<h4>Hayot</h4>
<div>Yer</div><div>Assalomu alaykum</div>
<span>Tinchlik</span>
<div>Osmon</div>

Hayot

Yer
Assalomu alaykum
Tinchlik
Osmon

Ikkita yangi divni qo'shdik, va ularning orqa rangi qizil va harflar rangi ko'k bo'lib qoldi. Bu degani <style> unsurining ichidagi div { ... narsa sahifadagi barcha div larga tasir qiladi, va h4 { ... narsa sahifadagi barcha h4 larga tasir qiladi.

Atamalar

div {
    background-color: red;
    color: blue;
}

Yuqoridagi kodni CSS qoida deb ataymiz. Mazkur misolda div ni tanlovchi deb ataymiz.

Misol uchun quyidagi misolda ikkita qoida va ikkita tanlovchi bor.

div {
    background-color: red;
    color: blue;
}

h4 {
    background-color: brown;
    color: white;
    padding-left: 30px;
}