Kuchwizzy
JF-Expert Member
- Oct 1, 2019
- 1,204
- 2,640
Hello Tech Members, Hope mpo Good Wazee!
Leo tutajifunza moja kati ya Language muhimu sana katika Web development, yaani CSS.
Bila kupoteza mda niende moja kwa moja kwenye mada,
REQUIREMENT
INTRODUCTION TO CSS
CSS ni kifupi cha Cascading Style Sheet, ni language inayotumika kutengeneza layout au presentation ya web application,kama ilivyo HTML, CSS sio programing language
CSS haina logic yoyote kama zilivyo programming languages japokuwa kuna technology nyingine kama sass&less zinakuwezesha kubkutanua functionalities za css na kutumia vitu kama variables na conditions.
Kuanza, fungua new folder katika pc yako kisha lipe jina lolote lile, mimi la kwangu nitaliita CSStutorial
Baada ya kutengeneza folder yako,i-import kwenye text editor yako.
Simple way ya kufanya hivi, ni ku drag folder yako na ku i-drop kwenye app's icon ya text editor yako.
Text Editor yako itafunguka ikiwa na folder ndani yake(Eg.CSStutorial)
Kwa watumiaji wa Atom tutapata hii result
Ondoa tabs zote (Welcome,Welcome guide,n.k)zilizopo ubaki na blank page.
Katika Folder yako(Eg CSSTutorial) tengeneza file jipya na ulipe jina la index.html au jina lolote liwe sharti liwe na .html extension
Kisha katika window mpya iliyofunguka ya file lako(index.html) andika html + Tab,text editor(kama unatumia atom au
sublime) itakupa basic html codes by default
Kabla sijaenda mbali zaidi,tutambue kuwa kuna njia tatu kuu za kutumia CSS katika Web application yako
Inline css ni pale unaongeza 'style-attribute' ndani ya 'html-element'
Mfano 1
Ndani ya 'body-tags' ya html codes zetu(index.html' andika 'p-tags' yenye text yoyote
Mfano <p>Hello Jamiiforums!</p>
Ndani ya 'p-tags' ongeza 'style-attribute'
Mfano:
<p style="color:blue">Hello Jamiifroums!</p>
Kisha fungua folder yako katika browser yoyote unayoitumia
Hio ni njia moja yapo ya kutumia CSS kwenye Web application yako. Ushauri ni kuwa hii ni njia ya hovyo sana ya kutumia CSS, huwezi kukuta Professional Web developers anatumia hii njia katika project yake kwa sababu tutakazo ziona hapo mbele.
Usihofu kuhusu synatax ya css ulioiona hapo juu tutaelezea kila kitu tutakapo anza rasmi mada yetu
2.INTERNAL CSS
Leo tutajifunza moja kati ya Language muhimu sana katika Web development, yaani CSS.
Bila kupoteza mda niende moja kwa moja kwenye mada,
REQUIREMENT
- Basic knowledge ya HTML
- Pc/Desktop with window OS(or MAC)
- Text Editor,kama Atom,Visual studio,Sublime n.k
- Browser,mfano Chrome,Opera,n.k
INTRODUCTION TO CSS
CSS ni kifupi cha Cascading Style Sheet, ni language inayotumika kutengeneza layout au presentation ya web application,kama ilivyo HTML, CSS sio programing language
CSS haina logic yoyote kama zilivyo programming languages japokuwa kuna technology nyingine kama sass&less zinakuwezesha kubkutanua functionalities za css na kutumia vitu kama variables na conditions.
Kuanza, fungua new folder katika pc yako kisha lipe jina lolote lile, mimi la kwangu nitaliita CSStutorial
Baada ya kutengeneza folder yako,i-import kwenye text editor yako.
Simple way ya kufanya hivi, ni ku drag folder yako na ku i-drop kwenye app's icon ya text editor yako.
Text Editor yako itafunguka ikiwa na folder ndani yake(Eg.CSStutorial)
Kwa watumiaji wa Atom tutapata hii result
Ondoa tabs zote (Welcome,Welcome guide,n.k)zilizopo ubaki na blank page.
Katika Folder yako(Eg CSSTutorial) tengeneza file jipya na ulipe jina la index.html au jina lolote liwe sharti liwe na .html extension
Kisha katika window mpya iliyofunguka ya file lako(index.html) andika html + Tab,text editor(kama unatumia atom au
sublime) itakupa basic html codes by default
Kabla sijaenda mbali zaidi,tutambue kuwa kuna njia tatu kuu za kutumia CSS katika Web application yako
- INLINE CSS
- INTERNAL CSS
- EXTERNAL CSS
Inline css ni pale unaongeza 'style-attribute' ndani ya 'html-element'
Mfano 1
Ndani ya 'body-tags' ya html codes zetu(index.html' andika 'p-tags' yenye text yoyote
Mfano <p>Hello Jamiiforums!</p>
Ndani ya 'p-tags' ongeza 'style-attribute'
Mfano:
<p style="color:blue">Hello Jamiifroums!</p>
Kisha fungua folder yako katika browser yoyote unayoitumia
Hio ni njia moja yapo ya kutumia CSS kwenye Web application yako. Ushauri ni kuwa hii ni njia ya hovyo sana ya kutumia CSS, huwezi kukuta Professional Web developers anatumia hii njia katika project yake kwa sababu tutakazo ziona hapo mbele.
Usihofu kuhusu synatax ya css ulioiona hapo juu tutaelezea kila kitu tutakapo anza rasmi mada yetu
2.INTERNAL CSS