Përpara se të vazhdojmë me pjesën e CSS-së do të duhet të bëjmë edhe disa punë tjera. Pasiqë e keni vendosur se çfar teme do të shqyrtoni gjatë përpunimit të uebfaqes, tani mund të ndryshoni tekstin dhe përmbjatjen e faqes për ta përshtatur me temën tuaj. Në fillim, kërkoni ndonjë foto në Google dhe ruajeni si “bg.jpg”. Këto fotografi do jenë në prapavijën e faqeve që i krijuam më herët. Prandaj, kërkoni katër fotografi dhe ruani ato në follderin e njejtë me fajllat e tjerë, me emrat “bg.jpg“, “bg2.jpg“, “bg3.jpg” dhe “bg4.jpg“.

Gjithashtu do na nevojitet një logo e cila prezanton më mirë idenë tuaj. Mund të përdorni cilindo program të dëshironi për të krijuar logon, apo të përdorni linkun e faqes Onlinelogomaker. Kini kujdes, logon tuaj ta ruani si “logo.png“. Nëse logoja juaj nuk është “png” por “jpg“, atëherë ruajeni “logo.jpg” por edhe në kodin e HTML-së më poshtë duhet të ndryshoni pjesën ku shkruan “logo.png” dhe bëjeni “logo.jpg“.

Në vazhdim do e shënojmë kodin e CSS-së që duhet ta kopjoni ju duke krijuar një dokument të ri në Notepad++ nëpërmjet File->New.

Pasiqë të përfundoni me kopjimin e kodit atëherë ruajeni fajllin si “style.css” në follderin e njëjtë ku i keni ruajtur faqet e HTML-së.  Por, nuk do mund të shohim asnjë ndryshim përderisa nuk e kemi vendosur kodin në HTML. Prandaj, duhet që ky fajll të thirret në HTML dhe atëherë do të shohim ndryshimin e duhur. Përpara se të bëjmë këtë, do të duhet të sqarojmë çdo pjesë të kodit që të mund ta kuptoni më mirë.

Kjo pjesa e yllit “*” thotë që çdo element brenda dokumentit të ketë tiparin që do e shënojmë brenda kllapave. Në rastin tonë, ne kemi ndryshuar fontin e dokumentit. Por, mund që të japim edhe ndryshime të tjera që do të dëshironim ti shihnim në çdo element. Kjo metodë nuk përdoret shumë shpesh por në rastin tonë mund ta përdorim për fontin.

Ne kemi shënuar një ID që e kemi quajtur “header” dhe atë e kemi mbushur me stilin “text-align: right;“. Por, pasiqë është ID atëherë duhet të shënohet “#header“. Më pastaj kemi një ID tjetër me emrin “mylogo” ku kemi shënuar disa stile tjera. Psh, ne kemi vendosur që logoja të ketë gjërësinë dhe lartësinë 100px, pastaj e kemi shtyrë të qëndrojë majtas me “float: left;“, dhe më në fund logon e kemi futur më brenda vetes duke u larguar 25px majtas dhe 25px nga lartë që dmth se logoja nuk do qëndrojë ngjitur me kufirin e faqes. Si dhe kemi ID me emrin “#nav” që do e përdorim për pjesën e lartme ku qëndron menuja. Këtu kemi ndryshuar ngjyrën e prapavijës, kemi caktuar lartësinë 50px dhe margin e kemi bërë 0 që të mos ketë hapsirë anash.

Kemi vazhduar me disa ID tjera si “#mybg” ku kemi shënuar stilin që të vendoset një foto në prapavijë me lokacionin në “url(“bg.jpg”)“. Aty ku do e përdorim ID #mybg do të vendoset kjo prapavijë që e kemi caktuar ne. Për çdo faqe kemi caktuar fotografi të ndryshme si dhe ID-në e kemi ndryshuar për secilën nga ato. Ndërsa class me emrin “.bg” kemi krijuar me stilin që prapavija të jetë cover që dmth të përmbushë tërë faqen. Si dhe lartësinë të ketë 490px. Dallimi është se ID-në do e përdorim vetëm njëherë, ndërsa class-ën do e përdorim më shpesh.

Në vazhdim kemi vendosur disa stile pa mos shënuar ID apo Class, por kësaj rradhe ndryshimin do e bëjmë sa herë që të përdoren këto elemente ul dhe li. Sa i përket <ul> ne do e shtyjmë djathtas, do ja ndryshojmë ngjyrën e prapavijës dhe do e largojmë shenjën që qëndron para listës. Gjithashtu margin dhe padding i kemi bërë 0 që të shfrytëzojë tërë hapsirën. Këtë element do e shfrytëzojmë kur të ndërtojmë menunë tonë. Problemi qëndron në atë se nëse këtë element e përdorim përsëri në ndonjë pjesë tjetër të faqes atëherë ndryshimi do shihet edhe aty.

Ndërsa për pjesën e <li> kemi shënuar më tepër ndryshime. Njëherë e kemi bërë që të shtyhet majtas, me qëllim që të gjitha elementet e menusë të radhiten majtas njëra pas tjetrës. Ndërsa në rastin e “li a” do të shohim ndryshim për të gjithë rastet ku <li> dhe <a> janë përdorur bashkë, ndërsa stili “display: block” do e bëjë që çdo <li> të jetë në hapsirë të veçantë. Ngjyrën e fontit e kemi ndryshuar me color , tekstin e kemi formatuar në qendër, i kemi shënuar padding dhe e kemi larguar shenjën apo numrin që qëndron përpara li.

Pastaj kemi bërë që kur të mos jetë aktiv ky li atëherë nëse përdoruesi e lëviz shenjën e miut mbi atë li , stili do të ndryshojë. Ngjyra e prapavijës do të ndryshojë, lartësia do të jetë 22px, si dhe ngjyra e fontit do ndryshojë.

Në fund, kemi bërë një stil të veçantë për atë li që do të jetë aktive në momentin kur do jemi te ajo faqe. Ngjyra e fontit do të ndryshojë, prapavijës do i ndryshojë ngjyra si dhe lartësia do të ngelet e njëjtë.

Përsëri përdorim ID tjera, e para është “content” ku kemi caktuar që nga pjesa e poshtme të largohet për 300px , teksti të formatohet në mes, ndërsa padding të ketë në të gjitha anët për 20px. E dyta është “footer“, dhe këtu kemi një ndryshim të ngjyrës së prapavijës, padding prej 0.5em, dhe teksti përsëri formatohet në mes.

Me këtë përfunduam sqarimin e të gjitha stileve që i përdorëm në dizajnin e CSS.

Sa i përket pjesës së HTML dokumentit, mund të shihni se ku i kemi përdorur stilet që i përmendëm më lartë sa i përket CSS. Duhet të hapim dokumentin “index.html” dhe të shënojmë kodin si më poshtë: