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.
Pseudo-classes na pseudo-elements ni sehemu muhimu ya CSS ambazo hukuwezesha kubadilisha mwonekano wa elementi kulingana na hali fulani au kuongeza content ya ziada bila kubadilisha HTML. Ni zana muhimu sana kwenye ubunifu wa kipekee na mwingiliano bora wa mtumiaji.
:hoverInatumika kubadilisha style ya element unapoelekezewa pointer ya mouse.
button:hover {
background-color: green;
color: white;
}
💡 Inafaa sana kwa vitufe (buttons), links, na menyu.
:first-childHuchagua elementi ya kwanza ndani ya mzazi wake.
p:first-child {
font-weight: bold;
}
:last-childHuchagua elementi ya mwisho ndani ya mzazi wake.
li:last-child {
color: red;
}
::beforeHuchomeka content kabla ya element kuonekana.
p::before {
content: "👉 ";
}
::afterHuchomeka content baada ya element.
p::after {
content: " ✅";
}
💡 Zinafaa sana kwa kuongeza icons au alama bila kubadilisha HTML.
::selectionHubadilisha mwonekano wa maandishi yanapochaguliwa (highlighted).
::selection {
background: yellow;
color: black;
}
<p>Hii ni paragraph ya mfano.</p>
p:hover {
color: blue;
}
p:first-child {
text-transform: uppercase;
}
p::before {
content: "💡 ";
}
p::after {
content: " 📘";
}
Pseudo-classes na pseudo-elements huongeza nguvu ya CSS bila kuingilia HTML. Zinaruhusu kufanya mabadiliko ya hali (state), kuchagua elementi maalum, na kuongeza content ya ziada kwa ubunifu. Ni nyenzo muhimu sana kwenye urembo na usability ya tovuti.
Tutajifunza jinsi ya kuleta miondoko (motion) kwa kutumia transition, transform, na animation kwenye CSS.
:hover hutumika lini?
a) Wakati wa kubonyeza tu
b) Wakati element inaonekana tu
c) Wakati pointer ya mouse iko juu ya element
d) Wakati element iko mwisho wa HTML
::before hufanya nini?
a) Kubadilisha background ya element
b) Kuongeza content kabla ya element
c) Kuficha element
d) Kuweka margin mpya
Ili kuchagua element ya mwisho ndani ya mzazi, utatumia:
a) :hover
b) :nth-child(1)
c) :last-child
d) ::after
::selection hutumika wapi?
a) Kwenye picha pekee
b) Kubadilisha style ya content inayo-highlightiwa
c) Kubadilisha background tu
d) Kuweka icon
Kipi kati ya vifuatavyo ni pseudo-class?
a) ::after
b) :hover
c) ::selection
d) ::before
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
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...Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.
Soma Zaidi...Katika somo hili utakwenda kujifunza sheria za uandish wa css yaani syntax za css
Soma Zaidi...Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.
Soma Zaidi...Katika somo hili tutajifunza kuhusu CSS frameworks mbalimbali zinazosaidia kuharakisha uundaji wa mitindo kwenye tovuti. Tutazungumzia frameworks maarufu kama W3.CSS, Bootstrap, Google Fonts, na nyinginezo, faida, matumizi, na tofauti zao.
Soma Zaidi...Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.
Soma Zaidi...Katika somo hili, tutajifunza kuhusu CSS Specificity — yaani mfumo wa kipaumbele unaotumiwa na kivinjari kuchagua ni mtindo (style) upi utumike iwapo kuna migongano kati ya selectors mbalimbali. Utaelewa jinsi ya kupanga selectors zako vizuri ili kuzuia matatizo ya mitindo kutofanya kazi kama ulivyotarajia.
Soma Zaidi...Katika somo hili tutajifunza kuhusu z-index, ambayo hutumika kudhibiti ni elementi ipi ionekane juu au chini wakati kuna elementi nyingi zinazofunika sehemu moja. Pia tutajifunza kuhusu stacking context, yaani jinsi vivinjari vinavyopanga
Soma Zaidi...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...Katika somo hili, utajifunza misingi ya CSS Grid Layout, mfumo wenye nguvu wa kupanga vipengele katika safu (rows) na nguzo (columns). Tutachambua display: grid, pamoja na grid-template-columns, grid-template-rows, gap, grid-column, na grid-row.
Soma Zaidi...