Ky do të jetë një mësim pak më i rëndë dhe më i gjatë se të tjerët por që ka një rëndësi të madhe në sqarimin e pjesëve të CSS.
Në fillim do të sqarojmë dallimin ndërmjet “Margin, Border, Padding dhe Content” që të mund të kuptoni se si funksionon CSS:

• Content – Përmbajtja e hapsirës ku qëndron teksti apo fotoja.

• Padding – Pastron hapsirën rreth përmbajtjes, por duke mos kaluar kufirin e elementit.

• Border – Një kufi që e përshkon “padding”-un dhe “content”-in.

• Margin – Pastron hapsirën jashtë kufirit, duke vendos largësi ndaj ndonjë elementi tjetër që është afër.

Fotoja më poshtë më së miri e sqaron se si rradhiten të gjitha këto elemente. Në fillim kemi përmbajtjen si pjesa më kryesore e elementit, pastaj ajo mund të ketë hapsirë boshe deri tek kufiri, dhe pas kufirit gjithashtu mund të vendosim një hapsirë tjetër për ta larguar nga elementet e tjera përreth.

Në uebfaqe është shumë e natyrshme që të përdoren linqe të cilat të lidhin me ndonjë uebfaqe tjetër apo me ndonjë faqe tjetër brenda uebfaqes tënde. Gjithashtu linqet mund të na lidhin me ndonjë element që ndodhet në të njëjtën faqe.

4 gjendjet e ndryshme që mund të përdoren me linqet janë:
● a:link – link normal i pavizitiuar më parë.
● a:visited – një link që e ka vizituar më parë përdoruesi.
● a:hover – kur përdoruesi vendos shenjën e miut (mouse, mausit) mbi link
● a:active – linku që është aktiv për momentin

Ne mund të përdorim këto 4 gjendje të ndryshme për të krijuar uebfaqe interesante me dizajn të bukur. Mund të vendosim ngjyra të ndryshme për çdo gjendje që pastaj linku i njëjtë të ndryshojë ngjyrën në varësi me gjendjen. Psh, shembulli më poshtë e ndryshon tiparin e linkut që është aktiv duke ja ndryshuar ngjyrën e fontit në të kuqe si dhe ngjyrën e prapavijës. Por, në momentin që ne e afrojmë shenjën e miut mbi atë link atëherë ngjyra e fontit të tij do bëhet e kaltërt si dhe madhsia do të ritet për 150%.

a:active {
color: red;
background-color: #66ff66;
}
a:hover{
color: blue;
Font-size: 150%;
}

Elementet mund të kenë më tepër gjendje të pozitës së tyre në një faqe. Ata mund të kenë vlerat:

• Static

  • Pozicionohet sipas rrjedhës normale të faqes duke u vendosur pas elementit paraprak.

• Relative

  • Mund të pozicionohet majtas, djathtas, poshtë apo lartë, por duke qëndruar në rradhitje pas elementit që vjen.

• Absolute

  • Ky pozicion ndryshon nga “relative” sepse nuk mvaret nga elementet e tjerë. Ky mund të ketë çfardo pozicioni.

•  Fixed

  • Mund të pozicionohet në një pozitë të caktuar dhe nuk lëviz nga vendi edhe nëse ne lëvizim poshtë lartë nëpër faqe. Ky pozicion mund të përdoret për menunë pasiqë edhe kur jemi në fund të faqes ne dëshirojmë që menuja të duket.

Fotoja më poshtë e sqaron më mirë dallimin ndërmjet këtyre gjendjeve të pozicionimit të elementeve:

Sipas fotos mund të kuptojmë se në formën static nuk ka ndonjë ndryshim, ndërsa në atë relative elementi jonë qëndron në mes të dy elementeve tjera por mund të lëviz nga vendi statik. Ndërsa absolute vendoset ku të dëshirojmë ne por nëse ne shfletojmë faqen më poshtë atëherë elementi nuk do duket. Përkundrazi, pozicioni fixed e mban elementin në pozitën e njëjtë edhe nëse ne shfletojmë faqen poshtë lartë.