Introduction to CSS Styling

Hababka Ku Darsiga CSS

CSS waxaa lagu dari karaa dokumentiga HTML saddex hab oo kala duwan:

  • Inline CSS: Isticmaalka sifooyinka style ee gudaha tagyada HTML.
  • Internal CSS: Isticmaalka tagga <style> ee qaybta <head> ee dokumentiga HTML.
  • External CSS: Isticmaalka faylka CSS oo gooni ah (oo leh fidinta .css) oo lagu xidhiidhiyo dokumentiga HTML iyadoo la isticmaalayo tagga <link>.

Inline CSS

Inline CSS waxaa loo isticmaalaa in lagu daro qaab gaar ah hal tag oo HTML ah.

<p style="color: blue; text-align: center;">Qoraalkan waa buluug wuxuuna ku yaalaa bartamaha.</p>

Faa'iidada: Si dhakhso ah ayaa loo isticmaali karaa haddii aad u baahan tahay inaad hal tag oo keliya qaabayso.

Qasaaraha: Ma habboona haddii aad u baahan tahay inaad qaabab badan ku celceliso. Waxay sidoo kale adkeyneysaa dayactirka koodhka.

Internal CSS

Internal CSS waxaa loo isticmaalaa in lagu daro qaabab dokumentiga HTML oo dhan. Waxaa lagu qoraa gudaha tagga <style> ee qaybta <head>.

<head>
 <style>
  p { color: green; }
  h1 { text-align: center; }
 </style>
</head>

Faa'iidada: Waxay ku habboon tahay haddii aad u baahan tahay inaad qaabayso hal bog oo keliya.

Qasaaraha: Ma habboona haddii aad u baahan tahay inaad qaabab badan ku celceliso bogag badan. Waxay sidoo kale adkeyneysaa dayactirka koodhka marka mashruucu weynaado.

External CSS

External CSS waxaa loo isticmaalaa in lagu daro qaabab bogag badan oo HTML ah. Waxaa lagu qoraa faylka CSS oo gooni ah (tusaale, styles.css) waxaana lagu xidhiidhiyaa dokumentiga HTML iyadoo la isticmaalayo tagga <link>.

Tusaale ahaan, faylka HTML:

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

Faylka CSS (styles.css):

body { background-color: lightblue; }
h1 { color: navy; }

Faa'iidada: Waxay ku habboon tahay haddii aad u baahan tahay inaad qaabayso bogag badan. Waxay fududeyneysaa dayactirka koodhka waxayna ka dhigaysaa koodhka mid nadiif ah oo habaysan.

Qasaaraha: Waxaa laga yaabaa inay u baahato dejin dheeraad ah marka hore si loo hubiyo in faylka CSS si sax ah loo xidhiidhiyay.