Xulayaasha CSS

Casharkaan, waxaan baran doonaa sida loo xusho curiyayaasha HTML-ka ah si CSS loogu dabaqo. Xulayaashu (selectors) waxay kuu ogolaanayaan inaad sheegto qaybaha bogga aad rabto inaad qurxiso.

1. Xulaha Unugyada (Element Selector)

Wuxuu xushaa dhammaan curiyayaasha leh summadaas.

p {
    color: green;
}

h2 {
    font-size: 24px;
}

Tani waxay midab cagaaran ka dhigaysaa dhammaan cutubyada <p>, waxayna cabbirka ka dhigaysaa 24px dhammaan cinwaannada <h2>.

2. Xulaha Class-ka (Class Selector)

Class-ku waa sifo aad ku darsato summada HTML-ka. Dhowr curiye ayaa wadaagi kara isku class. Waxaa lagu gartaa dhibic (.) CSS-da.

HTML:

<p class="qoraal-muhiim">Qoraalkan waa muhiim.</p>
<p>Tani waa qoraal caadi ah.</p>

CSS:

.qoraal-muhiim {
    color: red;
    font-weight: bold;
}

3. Xulaha ID-ga (ID Selector)

ID-ku waa sifo gaar ah oo curiye keliya leeyahay. Waxaa lagu gartaa calaamadda # CSS-da.

HTML:

<h1 id="cinwaanka-guud">Ku soo dhawaada mareegtayda</h1>

CSS:

#cinwaanka-guud {
    color: navy;
    text-align: center;
}

Xusuusnow: ID-gu waa inuu noqdaa mid gaar ah (hal mar oo kaliya bogga).

4. Farqiga u dhexeeya Class iyo ID

Class	ID
Isticmaal dhibic (`.`)	Isticmaal calaamadda (`#`)
Waa la isku wadaagi karaa	Waa gaar (hal mar oo kaliya)
`class="magac"`	`id="magac"`

5. Xulaha Isku-dhafka ah (Combined/Grouped Selectors)

Waxaad isku dari kartaa xulayaal badan:

/* Dhowr curiye oo isku midab ah */
h1, h2, h3 {
    font-family: Arial, sans-serif;
}

/* Curiye gudaha curiye kale */
article p {
    line-height: 1.6;
}

Layli (Practice)

Abuur class highlight oo ka dhigaya qoraalka midab huruud ah iyo font-weight: bold.
Ku dar ID hero-text oo ka dhigaya qoraalka weyn (28px) oo dhex-marnaan (centered).
Isticmaal xulaha element-ka si aad u beddesho dhammaan liisaska (<li>) midab guduudan.

Sii wadashada: Casharka xigta, waxaan baran doonaa midabada iyo gadaasha (backgrounds)!