𝐍𝐚𝐬𝐬𝐢𝐫𝐜𝐞𝐨

Mafunzo ya Msingi ya CSS - Sehemu ya Kwanza

Karibu katika mafunzo yetu ya msingi ya CSS! Katika sehemu hii ya kwanza, tutajifunza mambo muhimu ya kuanzia na CSS.

CSS ni nini?

CSS (Cascading Style Sheets) ni lugha inayotumika kubainisha muonekano na mwonekano wa nyaraka za HTML. Kwa kutumia CSS, tunaweza kubadilisha rangi, fonti, ukubwa, na misingi mingine ya muonekano wa tovuti yetu.

Jinsi ya Kuunganisha CSS na HTML

Kuna njia tatu za kuunganisha CSS na HTML:

1. Inline CSS - Kuandika style ndani ya tag ya HTML
2. Internal CSS - Kuandika style ndani ya tag ya <style> kichwani kwa HTML
3. External CSS - Kuunda faili tofauti ya CSS na kuiunganisha kwa HTML

<!-- Inline CSS -->
<p style="color: blue;">Nakala ya bluu</p>

<!-- Internal CSS -->
<style>
  p { color: blue; }
</style>

<!-- External CSS -->
<link rel="stylesheet" href="style.css">

Syntax ya CSS

Syntax ya CSS ina sehemu kuu tatu:

1. Kichaguzi (Selector) - Inabainisha elementi ya HTML unayotaka kubadilisha
2. Sifa (Property) - Sifa unayotaka kubadilisha (kama rangi, ukubwa, nk)
3. Thamani (Value) - Thamani ya sifa unayoweka

p {
  color: blue;
  font-size: 16px;
}

Michango ya Kichaguzi (Selectors)

Kichaguzi hutumika kubainisha elementi ya HTML unayotaka kubadilisha. Hapa kuna baadhi ya michango ya kichaguzi:

/* Kuchagua kwa jina la tag */
p { color: blue; }

/* Kuchagua kwa class */
.class-name { color: red; }

/* Kuchagua kwa id */
#id-name { color: green; }

/* Kuchagua kwa sifa */
a[target="_blank"] { color: purple; }

Mifano ya Vitendo

Hapa chini kuna mifano ya vitendo ya baadhi ya sifa za CSS:

Hii ni mfano wa kisanduku kilichobadilishwa kwa CSS

Badilisha Rangi ya Mazingira

Nakala

Click kubadili Rangi

Kidokezo: Katika sehemu inayofuata, tutazungumzia kuhusu box model, positioning, na zaidi!

©𝐍𝐚𝐬𝐬𝐢𝐫 𝐜𝐞𝐨 2025 Mafunzo ya CSS | Sehemu ya Kwanza