CSS është e mbushur me elemente që mund të përdorni për të dizajnuar uebfaqen tuaj. Jemi munduar që të shënojmë disa nga ato më të rëndësishmet me shpresën se do të hulumtoni edhe tipare të tjera në faqen e W3School.

Disa nga tiparet më të përdorura të CSS-së janë:

• background-color: lightblue;

  • Për të ndryshuar ngjyrën e prapavijës së komplet faqes mund të përdorim këtë tipar. Por, gjithashtu mund të përdoret për të ndryshuar prapavijën e ndonjë elementi të veçantë të HTML-së, psh “<title>” për të ndryshuar prapavijën e titullit. Në shembullin tonë ngjyrën e kemi shënuar “lightblue” por pa dyshim se ka shumë ngjyra tjera që mund të përdoren, si psh në faqen e W3School.

• background-image: url(“city.jpg”);

  • Por, gjithashtu mund të vendosim edhe ndonjë foto në prapavijë duke përdorur këtë tiparin tjetër. Në rastin tonë fotoja gjendet në follderin e njëjtë me fajllat e HTML-së. Por, nëse fotoja merret nga interneti apo ndonjë follder tjetër atëherë duhet të shënohet lokacioni i saj i saktë.

• border-style: dotted;

  • Me këtë mund të caktojmë kufirin e një elementi dhe ta vizatojmë atë. Në shembullin e “dotted” kufiri do të vizatohet me pika, por mund të përdorim edhe “dashed, solid, double, groove, ridge, inset, outset, none, hidden”.

• margin-bottom: 200px;

  • Në disa raste është e nevojshme që të largojmë elementet nga njëra tjetra. Kjo mund të bëhet duke vendosur tiparin “margin” dhe duke shënuar anën se ku dëshirojmë të vendosim largesën nga elementi tjetër, psh “bottom, top, right, left”. Por, mund që të përdorim vetëm tiparin “margin” dhe ti ndryshojmë të gjitha anët sëbashku, psh margin:100px 150px 100px 80px;

• width: 100%; or height: 100px

  • Tiparet “width” (gjërësia) dhe “height” (lartësia) përdoren shumë. Vlerat e tyre mund të jenë në përqindje apo me piksela. Ato e caktojnë gjërësinë dhe lartësinë e një elementi.

• color: #00ff00;

  • Ndryshimi i ngjyrës së tekstit të ndonjë elementi mund të bëhet me “color”. Mund që të shkruajmë disa nga ngjyrat që i përmendëm më herët dhe që janë më të përdorura si psh “black, blue, green, red, yellow” etj. Por, gjithashtu mund të përdorim ndonjë ngjyrë më specifike duke e shënuar kodin e saj të veçantë si psh #E9967A apo #4B0082, etj.

• text-align: center;

  • Formatimi i tekstit mund të bëhet në disa forma si psh “center, left, right ose justify”.

• font-family: “Times New Roman”, Times, serif;

  • Mund të ndryshojmë edhe fontin duke përdorur disa nga ato fonte që janë të sugjeruara për uebfaqe si psh në faqen e W3School

• font-style: italic;

  • Fonti gjithashtu mund të ketë stile tjera si psh “italic, normal, oblique”.

• font-size: 2.5em;

  • Edhe madhësia e fontit mund të ndryshohet.

• display: inline;

  • Për të mbajtur elementet sëbashku në një rresht e përdorim këtë tipar.

• float: left;

  • Ndonjëherë dëshirojmë që ndonjë element apo më tepër të qëndrojnë majtas apo djathtas. Ne mund të përdorim këtë tipar për të siguruar se disa elemente do rradhiten njëra pas tjetrës nga ana e majtë. Gjithashtu mund të përdorim edhe stile tjera si “none, right, initial, inherit”.

• padding: 0.8em;

  • Për dallim nga “margin” e cila vendos hapsirën ndërmjet dy elementeve, ky tipar nuk del jashtë kufirit të elementit, por përmbajtjen e elementit e largon nga kufiri duke e futur më afër qendrës së tij. Do e sqarojmë më tutje dallimin e tyre.

• opacity: 0.7;

  • Nëse dëshirojmë që ndonjë element mos të duket shumë, atëherë mund që të përdorim këtë tiparë që të duket edhe elementi poshtë tij. Psh, mund të kemi një fotografi në prapavijë dhe të vendosim disa butona me “opacity” të cilat nuk do e mbulojnë fotografinë por do jenë më të zbehta.

Edhe pse mund të duken tepër të koklavitura, nëpërmjet përdorimit të tyre do e shihni se sa lehtë mund ti përdorim dhe si duken në realitet. Në vazhdim do të ndryshojmë uebfaqen tonë duke përdorur disa nga tiparet që i cekëm këtu.

Gjithashtu është shumë e rëndësishme të kuptojmë se dizajnin e CSS-së mund ta përdorim në tre mënyra:

• ID

  • Mund të krijojmë ndonjë emër të veçantë apo ID që dëshirojmë ne si psh “mylogo“, “footer“, “header“, etj. Emrat mund të jenë edhe në gjuhën shqipe apo ndonjë gjuhë tjetër. ID përdorim në rastet kur dëshirojmë që një element i caktuar të ketë një dizajn më specifik se elementet e tjera. Por, ID nuk duhet të përsëritet më shumë se një herë në faqen e njëjtë.

  • Shembull se si mund ta përdorim është që te pjesa e HTML kodit duhet të shënojmë id=”emri i ID”

  • Psh nëse do dëshirojmë të ndryshojmë stilin e një paragrafi të caktuar atëherë duhet të shënojmë <p id=”stilindryshe”>

  • Pastaj, ky ndryshim në CSS bëhet më ndryshe duke e përdorur:

    • #stilindryshe    { color: blue; }

• Class

  • Kjo dallon nga ID përshkak se mund të përdorem sa herë që dëshirojmë ne. Prandaj, nëse dëshirojmë që ndonjë stil të caktuar ta përdorim për më tepër elemente, mund të përdoret class, e cila gjithashtu mund të ketë emra të ndryshëm sipas dëshirës.

  • Nëse dëshirojmë ta përdorim një class për ta përdorur më shpesh atëherë e vendosim në HTML kështu class=”emri i klases”

  • Psh, nëse do dëshirojmë të ndryshojmë stilin e paragrafit atëherë do e bëjmë kështu <p class=”stiliekstra”>

  • Pastaj në CSS do e shënojmë kështu:

    • .stiliekstra { color: red; }

• Element

  • Nëse një ndryshim dëshirojmë ta bëjmë vetëm për një grup elementesh me emrin e njëjtë, atëherë e shënojmë elementin.

  • Në HTML nuk duhet të bëjmë asnjë ndryshim sepse çdo element e ka emrin e vet.

  • Por, nëse do e ndryshonim stilin e të gjitha paragrafeve atëherë në CSS ky dizajn do të dukej kështu:

    • p { color: green; }