picha

CSS - SOMO LA 7: Kutumia Fonti (Fonts) kwenye CSS

Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.

📌 1. font-family

Inatumika kuchagua aina ya fonti ya maandishi.

p {
  font-family: Arial, sans-serif;
}

📌 2. font-size

Inadhibiti ukubwa wa maandishi.

h1 {
  font-size: 30px;
}

📌 3. font-weight

Inaonyesha unene wa maandishi (boldness).

strong {
  font-weight: bold;
}

📌 4. font-style

Inatumika kubadilisha mtindo wa maandishi, kwa mfano italiki.

em {
  font-style: italic;
}

Chaguzi:


📌 5. line-height

Inadhibiti nafasi kati ya mstari na mstari (msitari mmoja hadi mwingine).

p {
  line-height: 1.6;
}

Inasaidia maandishi yasibane sana au kuwa na nafasi nzuri ya kusomeka.


📌 6. text-transform

Inatumika kubadilisha he">...

Jiunge nasi WhatsApp kupata update zetu

Zoezi la Maswali

help_outlineZoezi la Maswali

info Jaza maswali yote au baadhi kisha bofya kitufe cha kutuma majibu hapo chini.
1 Katika shorthand ya font, ipi kati ya hizi si lazima?
2 Ukitaka kuandika maneno kwa herufi kubwa zote, utatumia ipi?
3 Font-style: italic; inaathiri nini?
4 Ili kuweka maandishi kuwa bold, unatumia ipi?
5 Property ipi hutumika kuchagua aina ya fonti?

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 2025-06-23 Topic: CSS Main: ICT File: Download PDF Views 605

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 Simulizi za Hadithi Audio    👉2 Sira ya Mtume Muhammad (s.a.w)    👉3 web hosting    👉4 Kitau cha Fiqh    👉5 ai web app    👉6 Tafasiri ya Riyadh Swalihina   

Post zinazofanana:

CSS - SOMO LA 24: CSS Variables (Custom Properties)

Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia.

Soma Zaidi...
CSS - SOMO LA 19: Pseudo-classes na Pseudo-elements

Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.

Soma Zaidi...
CSS - SOMO LA 15: Float na Clear katika CSS

Katika somo hili utajifunza jinsi ya kutumia float ili kupanga elementi upande wa kushoto (left) au kulia (right). Pia utajifunza jinsi ya kutumia clear kuondoa athari za float na kuhakikisha layout yako inabaki thabiti.

Soma Zaidi...
CSS - somo la 4: Aina za css selecto

Katika somo hili uatkwenda kujifunza aina za css selectors

Soma Zaidi...
CSS - SOMO LA 20: Media Queries na Responsive Design

Katika somo hili, utajifunza jinsi ya kutumia media queries kwa ajili ya kutengeneza tovuti zinazojibadilisha kulingana na ukubwa wa skrini. Tutazungumzia @media rules, breakpoints, na dhana ya mobile-first design.

Soma Zaidi...
Drone: Nyuki Dume na Majukumu Yake

Simulizi hii inaelezea maisha ya nyuki dume, zinazojulikana kama drone. Inafafanua majukumu yao, maisha yao ya kila siku ndani ya kiwanda cha nyuki, na hatima yao baada ya kufanikisha kuzaliana na kifalme cha nyuki. Simulizi pia inaangazia tofauti zao na nyuki wa kike, na umuhimu wao katika uzazi wa kifalme.

Soma Zaidi...
Jinsi ya kumsaidia Mtoto mdogo aliyekabwa na kitu kooni

Mfano wa kitu kinachoweza kumaba mtoto kooni ni kama chagula kigumu, pesa ya sarafu, kijiwe na mengineyo. Endapo hili litataokea msaada wa haraka unahitajika kwa ulazima.

Soma Zaidi...
CSS - SOMO LA 32: Custom Fonts na @font-face

Katika somo hili tutajifunza jinsi ya kutumia fonts za kipekee (custom fonts) katika tovuti kwa kutumia njia mbili kuu: Google Fonts na @font-face. Tutajifunza pia sababu za kutumia fonts maalum, faida zake, na jinsi ya kuzidhibiti kwenye CSS.

Soma Zaidi...
CSS - SOMO LA 27: Kutumia @import Katika CSS

Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.

Soma Zaidi...
CSS - SOMO LA 10: Box Model katika CSS

Katika somo hili utajifunza muundo wa boksi (Box Model) katika CSS. Box model ni mfumo wa msingi wa kupanga vipengele katika ukurasa wa HTML, ukiwa na sehemu kuu nne: content, padding, border, na margin.

Soma Zaidi...