Introduction to CSS Styling

Waa maxay CSS?

CSS (Cascading Style Sheets) waa luuqad loo isticmaalo in lagu qurxiyo laguna habeeyo bogagga shabakadda HTML. Waxay qeexdaa sida walxaha HTML loo soo bandhigayo, sida midabka, farta, cabbirka, booska, iyo waxyaabo kale oo badan.

Muhiimadda CSS

  • Kala Saaridda Qaabka iyo Qaabdhismeedka: CSS waxay ka soocdaa qaabka bogga (sida uu u egyahay) qaabdhismeedka (HTML), taasoo fududeyneysa maareynta iyo cusbooneysiinta.
  • Isku-eekaanshaha: CSS waxay xaqiijisaa in bogagga shabakadda ay u egyihiin si isku mid ah dhammaan biraawsarrada iyo qalabka kala duwan.
  • Dib-u-isticmaalidda: Waxaad qori kartaa xeerar CSS ah oo aad dib ugu isticmaali kartaa bogag badan, taasoo yareyneysa qoraalka code-ka.
  • Fududeynta Maareynta: Markaad rabto inaad wax ka beddesho qaabka bogga, waxaad kaliya wax ka beddeshaa faylka CSS, adigoon wax ka beddelin faylasha HTML.

Qaabka CSS

Xeerarka CSS waxay ka kooban yihiin xul (selector) iyo qeexid (declaration). Xulku wuxuu tilmaamayaa walxaha HTML ee la habeeynayo, qeexidda waxay qeexdaa qaabka loo habeeynayo.


selector {
  property: value;
}

Tusaale:


h1 {
  color: blue;
  font-size: 24px;
}

Tusaalahan, h1 waa xulka, color iyo font-size waa qeexidaha. Qoraalkan wuxuu ka dhigayaa dhammaan cinwaanada <h1> midab buluug ah iyo cabbir 24 pixels.

Tusaale Fudud

Halkan waxaa ah tusaale fudud oo muujinaya sida loo isticmaalo CSS si loo habeeyo qoraalka:


<!DOCTYPE html>
<html>
<head>
  <title>Tusaale CSS</title>
  <style>
    p {
      color: green;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <p>Kani waa qoraal la habeeyay iyadoo la isticmaalayo CSS.</p>
</body>
</html>

Tusaalahan, waxaan ku dhex qornay CSS-ta qaybta <style> ee <head>. Waxaan habeeynay dhammaan walxaha <p> si ay u noqdaan midab cagaaran iyo farta Arial.