Hordhaca CSS — Waa Maxay iyo Sida Loogu Xiro HTML

Ku soo dhawoow koorsada Aasaaska CSS. Haddii HTML uu yahay lafaha dhismaha guriga, CSS waa rinjiga, naqshadda, iyo qurxinta guud. Casharkaan wuxuu kuu sahlayaa inaad qaaddo tillaabadaada koowaad ee qaabaynta bogagga internetka.

Waa Maxay CSS?

CSS waxay u taagan tahay Cascading Style Sheets — Xaashiyaha Qaabaynta ee Is-daba-dhaca.

Style Sheets (Xaashiyaha Qaabaynta): Xeerar qoran oo qeexaya sida loo soo bandhigayo curiyayaasha HTML-ka.
Cascading (Is-daba-dhac): Xeerar kala duwan ayaa wada shaqayn kara isla markaana is-baddali kara; xeerka ugu awoodda dhow ama ugu dambeeyay ayaa guulaysta.

CSS waxay kuu sahlaysaa inaad maamusho oo aad xakamayso qaybaha soo socda:

Meelaha aad xakamayn karto	Sifada CSS (Property)
Midabka qoraalka	`color`
Asalka dambe (Gadaal)	`background-color`
Cabbirka farta	`font-size`
Kala-fogaanshaha unugyada	`margin`, `padding`
Qaabaynta boosaska	`display`, `flexbox`, `grid`
Dhaqdhaqaaqa iyo Gudubka	`animation`, `transition`

Sababta CSS Loogu Baahan Yahay

Haddii aan CSS la isticmaali lahayn, dhammaan mareegaha internetku waxay u ekaan lahaayeen kuwo madhan oo aan naqshadaysnayn:

<!-- HTML oo aan lahayn CSS — waa caddaan iyo qoraal kaliya -->
<h1>Ereyle</h1>
<p>Baro CSS maanta</p>
<button>Gujiso</button>

Marka CSS lagu daro, isla koodkaas kor ku xusan wuxuu isu beddeli karaa:

Cinwaan cagaaran, weyn, oo dhexda ku yaal.
Badhan geesaha ka wareegsan, midab buluug ah leh, oo isbeddelaya marka tilmaamuhu dul dego (hover).
Bog qaabaysan oo leh muuqaal soo jiidasho leh.

Saddexda Hab ee CSS Loogu Xiro HTML-ka

1. Habka Tooska ah (Inline CSS)

CSS-ta waxaa si toos ah loogu dhex qoraa sifo-bixiyaha style ee ku dhex jira curiyaha HTML-ka:

<h1 style="color: #00d97e; font-size: 2rem;">Ereyle Learning</h1>
<p style="color: #555; line-height: 1.8;">Baro CSS si fudud.</p>

Faa’iidada: Waa hab degdeg ah oo ku habboon tijaabada koodka gaaban.
Caqabadda: Way adag tahay in la maamulo marka koodku bato, mana ogola dib-u-isticmaalka koodka.

2. Habka Gudaha Bogga (Internal CSS)

CSS-ta waxaa lagu dhex qoraa astaanta <style> ee ku dhex jirta qaybta <head> ee bogga:

<!DOCTYPE html>
<html lang="so">
<head>
  <style>
    h1 { color: #00d97e; font-size: 2rem; }
    p  { color: #555;    line-height: 1.8; }
  </style>
</head>
<body>
  <h1>Ereyle Learning</h1>
  <p>Baro CSS si fudud.</p>
</body>
</html>

Faa’iidada: Wuxuu ku fiican yahay qaabaynta hal bog oo kaliya.
Caqabadda: Koodka laguma wadaagi karo bogagga kale ee mareegta.

3. Habka Faylka Dibadda (External CSS) ✓ Habka Ugu Habboon

CSS-ta waxaa lagu qoraa fayl gaar ah oo leh kordhiyaha .css, ka dibna waxaa lagu xiraa isticmaalka astaanta <link>:

qaabka.css:

h1 { color: #00d97e; font-size: 2rem; }
p  { color: #555;    line-height: 1.8; }

index.html:

<head>
  <link rel="stylesheet" href="qaabka.css">
</head>

Faa’iidada: Waxaa wadaagi kara bogag badan, aad bayna u fududahay in la maamulo; haddii aad hal meel wax ka beddesho, dhammaan bogagga ayay ka muuqanaysaa.

Qaab-dhismeedka Xeerka CSS

Xeer kasta oo CSS ah wuxuu ka kooban yahay qaybahan aasaasiga ah:

xulaa {
  sifo: qiime;
  sifo: qiime;
}

Tusaale faahfaahsan:

h1 {
  color: #0a0a0a;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
}

p {
  color: #555;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.badhanka {
  background-color: #00d97e;
  color: #0a0a0a;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

Sharaxaadda Qaybaha:

Xulaa (Selector): Sida h1, p, ama .badhanka — wuxuu tilmaamayaa curiyaha HTML ee la rabo in la qaabeeyo.
Sifo (Property): Sida color ama font-size — waa sifo gaar ah oo ka mid ah muuqaalka curiyaha oo aad rabto inaad wax ka beddesho.
Qiime (Value): Sida #0a0a0a ama 2.5rem — waa cabbirka ama nuuca qaabaynta aad siinayso sifada.
Xeerka (Declaration block): Waa sifooyinka iyo qiimayaasha ku dhex jira labada qaanso { }.

Is-daba-dhaca CSS (Cascading) — Mudnaanta Xeerarka

“Cascading” macneheedu waa marka ay jiraan xeerar badan oo isku dhow oo isku mar wada shaqaynaya, waxaa guulaysanaya xeerka leh mudnaanta ugu sarreysa:

/* Xeerka 1 — Xeerka Guud */
p { color: black; }

/* Xeerka 2 — Xeerka Gaarka ah (Kani wuu guulaysanayaa) */
p.muhiim { color: red; }

<p>Qoraalkan wuxuu noqonayaa madow</p>
<p class="muhiim">Qoraalkan wuxuu noqonayaa gaduud — waayo xeerka gaarka ah ayaa guulaystay</p>

Saddexda qodob ee go’aamiya mudnaanta xeerka:

Gaar-ahaanshaha (Specificity): Xeerka sida gaarka ah u tilmaamaya shayga ayaa ka awood badan midka guud.
Sida ay u kala horreeyaan koodka (Source order): Haddii laba xeer ay isku awood yihihiin, kii ugu dambeeyay ee la qoro ayaa la fuliyaa.
Mudanaha Sare (!important): Waxay xoog ku muujisaa xeer kasta, laakiin iska ilaali isticmaalkeeda badan si aanuu koodkaagu u qasan.

Faylasha La Raba In La Abuuro

Abuur gal (folder) cusub oo ku dhex kaydi labada fayl ee soo socda:

mashruuca/
├── index.html
└── qaabka.css