Katika somo hili utajifunza kuhusu property muhimu ya CSS inayoitwa display, ambayo huamua jinsi element inavyoonyeshwa kwenye ukurasa. Tutachambua aina kuu za display: block, inline, inline-block, na none.
Katika HTML kila element ina tabia yake ya asili ya kuonyeshwa kwenye ukurasa. Kwa mfano, div huonyesha kama block, wakati span huonyesha kama inline. Lakini kwa kutumia display property kwenye CSS, unaweza kubadilisha tabia hiyo ili upate mpangilio unaotaka.
Uelewa wa display ni muhimu sana katika kupanga layout na kuficha au kuonyesha element kwa njia sahihi.
display: blockElement huanza kwenye mstari mpya.
Huchukua upana wote wa mzazi wake kwa default.
Mfano wa element za block: div, p, h1-h6, section, article
div {
display: block;
}
💡 Matokeo: kila element huonekana kwenye mstari wake, kama vichwa vya habari au aya.
display: inlineElement haianzi mstari mpya.
Huchukua nafasi sawa na content yake.
Huwezi kuweka width, height, margin-top/bottom kwa ufanisi.
span {
display: inline;
}
💡 Mfano mzuri: maneno yaliyopo ndani ya span au viungo vya a.
display: inline-blockHuchukua tabia ya block na inline kwa pamoja.
Huweza kuwa kwenye mstari mmoja kama inline.
Lakini pia unaweza kudhibiti width, height, margin, padding kama block.
img {
display: inline-block;
width: 150px;
height: 100px;
}
💡 Hii ni nzuri kwa element ndogo zinazohitaji ukubwa wa kudhibitiwa kama button au picha.
display: noneHuficha kabisa element kutoka kwenye ukurasa.
Element haionekani wala haichukui nafasi yoyote.
div {
display: none;
}
💡 Tofauti na visibility: hidden, ambapo element haionekani lakini nafasi yake inabaki.
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
Katika somo hili tutajifunza kuhusu CSS Filters — mitindo inayotumika kuhariri mwonekano wa picha, video, au elementi nyingine kwa kuongeza athari kama blur, brightness, contrast, grayscale, na nyinginezo. Hii huifanya tovuti kuwa ya kisasa, ya kuvutia, na yenye mwingiliano mzuri.
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...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...Katika somo hili, utajifunza jinsi ya kudhibiti upana (width) na urefu (height) wa elementi katika CSS. Pia utaelewa tofauti kati ya max-width, min-width, na jinsi overflow inavyodhibiti tabia ya content inayoizidi element.
Soma Zaidi...Katika somo hili, tutajifunza kipengele kipya kinachoitwa if() function ndani ya CSS, kilichoanza kupatikana kwenye toleo la Chrome 137. Kipengele hiki kinaturuhusu kuandika mantiki ya masharti moja kwa moja kwenye property ya CSS, bila kutumia JavaScript wala media query zilizotawanyika. Tutajifunza pia aina za queries: media(), supports(), na style() pamoja na matumizi yao ya kivitendo kwenye tovuti. Mwisho, tutaeleza kwa kina kuhusu pointer na any-pointer.
Soma Zaidi...Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css
Soma Zaidi...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...Katika somo hili utajifunza kuhusu property ya position katika CSS, ambayo hutumika kuamua jinsi element inavyowekwa ndani ya ukurasa. Tutajifunza aina tano kuu za position: static, relative, absolute, fixed, na sticky.
Soma Zaidi...Katika somo hili tutajifunza kwa kina kuhusu CSS Shorthand Properties — ni nini, jinsi zinavyofanya kazi, faida zake, na mifano mbalimbali ya kutumia shorthand kuandika CSS kwa njia fupi na bora zaidi.
Soma Zaidi...Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.
Soma Zaidi...