Uvod u CSS

Do sad smo se upoznali sa HTML elementima pomoću kojih ubacujemo i raspoređujemo

sadržaj na našoj stranici. Kada pogledate sad vašu stranicu koju smo do sad kreirali -
morate priznati da ne izgleda ni približno onom što želite.

Iz tog razloga postoji CSS i on će nam pomoći da doteramo stranicu do željenog izgleda.
CSS je kao šminka za HTML. :)

Najnovija verzija je CSS3 koja podržava u potpunosti CSS, samo što su dodate nove
opcije, tako da ćemo u ovom nivou preći mnoštvo opcija koje nam nudi CSS, a u narednom
ćemo se upoznati i sa tim novim koje nam nudi CSS3, kao što su pozadine, animacije,
transformacije i svašta još nešto interesantno.

Kucanje CSS koda

CSS kod se može kucati na tri načina:

1. U HTML dokumentu između tagova: <style> </style>.

2. U samom HTML elementu pomoću atributa style: <p style=”text-
align:center”>Tekst</p>.
3. U odvojenom CSS fajlu i onda se preko link taga uveze u HTML fajl.
Kao što smo na kraju prethodnog nivoa kreirali naš CSS fajl i uvezli ga u naše strane, mi
ćemo, samim tim, koristiti treći način kucanja koda, odnosno u eksternom fajlu. Razlog
toga je vrlo jednostavan - da razgraničimo šta nam je:

 CSS,
 HTML i kasnije
 JS kad budemo dodavali, nije baš najbolja praksa stavljati CSS u HTML.

Evo prostog primera:

Na svim stranama imamo navigaciju (index.html, o-nama.html, galerija.html...) i sad mi u

index.html fajlu stilizujemo našu navigaciju pomoću načina 1 i 2 prethodno navedenih.
Šta se onda dešava?

Oni ostaju u index.html fajlu i vi kada odete na neku drugu stranicu, stilova nema i morate
tamo da ih unesete. Pa dobro, možda će neko hteti tako da radi. Međutim, posle će ga stići
glavobolja. :) Imamo da dodamo još jednu stavku u navigaciju i ona nam poremeti
responsive, izgubi izgled i još ponešto (dešavaće se). Jao, muke! Sad treba u svim
fajlovima na istom mestu dodati / prepraviti kod.

Zašto se mučiti, kad sve možete imati na jednom mestu, odnosno u jednom CSS fajlu
zasebno. :) Nadamo se da Vam je sad jasnije zašto nećemo opisivati 1 i 2 način, jer je
 jednostavno loša praksa. Ako baš bude neophodno da nešto odradite na taj način evo
ukratko...

U head elementu strane možete dodati stilove na sledeći način:

<style>
...
</style>

Ukoliko želite direktno u element, onda se to radi na sledeći način:

<div style="..."></div>

Sada ćemo preći i držati se našeg kreiranog fajla stilovi.css

Sintaksa

CSS za neki element (bilo da pišete klasu, ID ili element) se sastoji izdva glavna dela:

1. Selektor

2. Jedna/više deklaracija.

Deklaracija se sastoji takođe od dva dela, a to su:

1. Svojstvo

2. Vrednost.
 Selektori služe da se odredi kom elementu dodeljujemo stilove.
U gornjem primeru nam je selektor h1 tag, tako da smo automatski svim h1 elementima na
stranicama dodelili veličinu fonta na 24px. Deklaracijom definišemo svojstvo i
vrednost koje želimo da dodelimo selektoru odnosno određenom HTML elementu .

Svojstva mogu biti:

 veličina fonta,
 stil,
 boja,
 pozadina itd.
Svako svojstvo ima svoju vrednost koja može biti: boja, veličina izražena u nekoj jedinici i
slično.
U narednim lekcijama ćemo se upoznati sa dosta svojstava i njihovih vrednosti, kako bismo
Vam ukazali na opcije koje imate da stilizujete vašu stranicu što je bolje moguće.

Jedan selektor može imati jednu ili više deklaracija koje se nalaze
unutar vitičastih zagrada {}.

Anatomija pravila:

Selektori

Selektori su jedan od najbitnijih aspekata u CSS -u i pomoću njih, kao što im ime
kaže, selektujemo element koji želimo da stilizujemo. Selektore možete definisati na više
različitih načina. Selektori mogu da identifikuju bilo koji HTML tag, ali mogu još mnogo
toga da urade.
Univerzalni selektori se pišu kao * (zvezdica) i oni se odnose na sve
elemente koje imate na strani.
Vrednost univerzalnog selektora se može izmeniti ukoliko dodelite druge vrednosti
ciljanom elementu. Ovaj selektor se često koristi za uklanjanje podrazumevanih margina i
padinga sa svih elemenata.
*{
margin: 0;
padding: 0;
}

Pomoću prethodnog koda smo uklonili svim elementima marginu i uvlačenja (to su one
podrazumevane vrednosti, npr. za naslove za koje smo rekli da ćete kasnije moći pomoću
CSS-a da ih promenite). Pa, ukoliko dodamo kod iznad u naš stilovi.css fajl možemo videti
da su sve margine i uvlačenja nestala.

Element selektori
Element selektori se koriste da neku deklaraciju dodelimo za sve elemente tog tipa.

Na primer:ako imamo paragraf koji, kao što znamo, dodajemo pomoću <p> elementa, svim
paragrafima možemo dodeliti, npr. boju slova da bude plava i veličina fonta na 14px:
p{
color: blue;
font-size: 14px;
}
 Umesto <p> taga, možete ubaciti bilo koji i dodeliti mu vrednosti koje želite. Na promer:

 <h1>,
 <div>,
 <section>...

ID selektori
ID selektori se koriste da se definišu stilovi za jedan unikatan element iz razloga što, kao
što smo rekli, jedinstveni ID možemo dodeliti samo jednom elementu (da ne dođe do
zabune svaki element može imati ID, ali ne sme imati isti).

Selektor za ID je # (taraba) i na tarabu se nadovezuje ID.

Na primer, ako imamo element:
<h2 id="jedinstveni_podnaslov">Cao</h2>

i želimo tom ID-ju da dodelimo stilove, to radimo na sledeći način:

#jedinstveni_podnaslov{
font-size: 26px;
margin-bottom: 10px;
}

Klasa selektor
Klasa selektor se koristi bukvalno isto kao i ID, imaju sličnu sintaksu, samo što se umesto
# (tarabe) stavlja . (tačka) i ovaj selektor ćemo najviše koristiti, jer nam klase omogućavaju
dodelu na više elemenata, što nije slučaj sa ID-jem.

To je zapravo suštinska razlika između ova dva tipa selektora - što se class selektori
primenjuju na jedan ili više elemenata na stranici, dok se ID selektor primenjuje
isključivo na jedan element.

Na primer, ovaj HTML kod:

<h2 class="podnaslov">Podnaslov 1</h2>
<h2 class="podnaslov">Podnaslov 2</h2>

CSS izgleda ovako:

.podnaslov{
font-size: 26px;
margin-bottom: 10px;
}

i onda nam svi podnaslovi imaju veličinu fonta od 26px i donju marginu od 10px.
 Selektori za ugnežđene elemente
Selektori za ugneždene elemente se koriste da definišemo, npr. za linkove čiji je kontejner
div sa određenom klasom želimo da dodelimo neki stil. Deluje malo konfuzno, ali da bismo
najbolje pojasnili ovo, pogledajte HTML kod ispod:
<!-- Navigacija strane -->
<div class="zaglavlje-navigacija">
<a class="navigacija" href="o-nama.html">O nama</a>
<a class="navigacija" href="galerija.html">Galerija</a>
<a class="navigacija" href="kontakt.html">Kontakt</a>
</div>
<!-- navigacija kraj -->

vidimo da ima tri linka u elementu <nav> sa klasom zagljavlje-navigacija i sad ako mi,
preko globalnog atributa, dodelimo neke stilove, npr. a{ neki stilovi } oni će se primeniti na
sve linkove na strani, a nama to u ovom slučaju nije potrebno. Šta ćemo sada da radimo?

Imamo dve opcije:

1. Da svakom linku dodelimo neku klasu (što Vam može nekad biti naporno).

2. Da koristimo selektor za ugneždene elemente.

Prvi primer je objašnjen malopre, tako da smo ovde na drugom primeru i ovde ćemo Vam
napisati dva koda, pa ćemo analizirati i jedan i drugi.
nav a{
font-size: 16px;
}
nav.zaglavlje a{
font-size: 16px;
}

Verovatno već vidite razliku između koda 1 i 2, a to je što smo u drugom

dodali zaglavlje odmah uz nav selektor (bez razmaka). Šta je onda razlika između ova dva
koda?

U prvom slučaju, svi nav elementi na vašoj strani u kojima se nalazi neki link (a element)
će dobiti svojstvo veličine fonta od 16px.

U drugom slučaju će samo linkovi koji se nalaze unutar nav elementa koji ima klasu
zaglavlje dobiti svojstvo veličine fonta od 16px.
 Sada se možda pitate zašto nam je ovo potrebno. Evo jednog prostog primera. Imate
nekoliko različitih vrsta navigacija na sajtu i sad svaku treba da stilizujete tako da su linkovi
plave boje sa sivom pozadinom, na primer, i to radite na sledeći način:
nav a{
color: blue;
background: #eee;
}

I pored toga imate neku navigaciju za koju želite da ima svojstva svih navigacija, međutim
da joj veličina fonta bude 20px i onda umesto da kuckate opet color i background, za tu
možete jednostavno dodati klasu na nav element:
nav.posebna a{
font-size: 20px;
}

Što se ovog nadovezivanja tiče, umesto klase može stajati i ID, samo što biste
onda umesto tačke pisali tarabu (nav#neki_id).

Da ne bude zabune, ovo pravilo važi za sve elemente, a ovde je za primer uzet nav, tako da
može biti i:

 div.klasa,
 p.klasa,
 a#id...

„Dete“ selektor
„Dete“ selektor nam služi da tačno pokažemo od roditelja prema deci (odnosno
ugneždenim elementima) koji element želimo da stilizujemo. Pre svega, pogledajte sliku da
razjasnimo ko je kome ovde dete:
 Ovde je bojom razdvojeno ko je kome dete, pa da zaključimo da:

 div, sa klasom zaglavlje, ima decu header i nav;

 header ima dete h1;

 nav ima decu, odnosno 3 a elementa.

Znači, dete nekog elementa je onaj element koji je odmah prvi u njemu
i sve tako hijerarhijski.
„Dete“ selektor je > (veće manje znak) i njega upotrebljavamo na sledeći način. Hoćemo da
selektujemo header i dodamo mu visinu od 100px:
.zaglavlje > .zaglavlje-naslov{
height: 100px;
}
div.zaglavlje > header.zaglavlje-naslov{
height: 100px;
}
div.zaglavlje > header{
height: 100px;
}
div.zaglavlje > .zaglavlje-naslov{
height: 100px;
}
.zaglavlje > header{
height: 100px;
}

Svih pet primera nam rade istu stvar (dodeljuju visinu header elementu od 100px), samo
smo napisali nekoliko načina (sa „dete“ selektorom, možda ima još koji) da otprilike
povežete kako selektori funkcionišu.

Bitno je napomenuti da možemo i kombinovati vrste selektora, npr:

 .zaglavlje > header a{ ... } – svi linkovi u elementu header, čiji je roditelj element sa klasom
.zaglavlje;

 ul > li a { .... } – svi linkovi unutar taga li, čiji je roditelj ul;

 ul li a > i { ... } – svi elementi čiji je roditelj a, a nalaze se unutar li taga, koji se nalazi negde
unutar ul taga
i tako dalje.

„Susedni“ selektori
„Susedni“ selektori se pišu pomoću znaka + (plus), a da bismo ih razjasnili biće nam opet
potreban HTML kod kao primer:

Ovaj selektor se koristi u formi ELEMENT1 + ELEMENT2, gde stilizujemo ELEMENT2 koji
je odmah posle ELEMENT1 (ako je pre neće biti stilizovan). U slučaju sa slike, dodali
smo dva selektora na ovaj način i stilizovali paragraf odmah ispod naslova i link ispod
div elementa, kao što možete videti.

Da ste dodali kod stilizovanja linka selektor p + div + a, takođe bi se stilizovao link, jer je
pre div elementa element p.

„Svi susedni“ selektor

Jedan sličan selektor ovom je „Svi susedni“, a koristi se pomoću karaktera ~ i pomoću
njega selektujemo sve elemente ispod određenog.

ELEMENT1 ~ ELEMENT2, što znači svi ELEMENT2 ispod ELEMENT1 će biti stilizovani, a
ne samo prvi, što je bio slučaj sa prethodnim selektorom. Zadatak za vas je da u
prethodnom primeru umesto h1 + p stavite h1 ~ p i vidite šta će se desiti.
 Boja teksta

Za podešavanje boje teksta koristimo opciju Color nasledeći način:

p{
color:#000000;
}
p{
color:black;
}
p{
color:rgb(0,0,0);
}
p{
color:rgba(0,0,0,1);
}

Sva četiri načina su identična i na ta četiri načina možede dodeljivati vrednosti za koje ide
neka boja.

1. HEX vrednost boje – na primer #123123

2. CSS boje – na primer: blue, red, white..

3. RGB vrednost boje

4. RGBA vrednost boje – RGB vrednost + 4 broj označava providnost (opacity) i ide u
opsegu od 0 do 1.

Pozadine

Background Size
Podešavanje veličine pozadine koja će Vam trebati, kako bi se vaša pozadinska slika
uklopila različitim uređajima se može podesiti na više načina:

 auto – podrazumevana vrednost originalne dimenzije slike;

 veličina izražena u širini i visini, npr. 300px 150px, gde je 300px širina, a 150px visina.
Ako je samo prva setovana, druga ima vrednost auto, odnosno prilagođava se toj širini koju
ste podesili;

 u procentima takođe prva vrednost označava širinu, a druga visinu i ako se druga izostavi,
ima vrednost auto. Na primer, ako hoćete da Vam se slika u celosti prikaže bez obzira
kakav je element, podesite vrednost 100% 100%;

 contain – slika se poveća do najveće veličine tako da joj širina i dužina budu unutar
elementa (svi delovi se vide ne gube se kao kod cover opcije).

 cover – slika se podesi tako da lepo popuni prostor, s tim da se neki delovi slike neće
prikazati (fina je opcija kombinovati ovo i background-attachment: fixed).

Ova opcija se koristi na sledeći način:

.zaglavlje{
background: url("../img/zaglavlje.jpeg") no-repeat fixed left bottom;
background-size: cover;
}

Background svojstva utiču na način kako se prikazuje pozadina nekog

elementa.
Za razliku od HTML -a, sa CSS -om se za svaki element može postaviti boja pozadine ili
slika koja će predstavljati pozadinu. Pozadina se može skrolovati istovremeno sa stranicom
ili ostati fiksirana. Ukratko, CSS je veoma proširio mogućnosti kontrole izgleda
stranice.

Za stilizovanje pozadine imamo nekoliko opcija, kao što su:

 background-color

 background-image

 background-repeat

 background-attachment

 background-position.

S tim da se sve ove opcije u zavisnosti od namene mogu spakovati u background. Za

početak ćemo pojasniti svaku od ovih. Kasnije ćemo Vam pokazati kako se koriste sve
zajedno.

Background Color
 Ova opcija se koristi kada hoćemo da dodelimo nekom elementu pozadinu i za njene
vrednosti možemo dodati boje na jedan od četiri načina koje smo naveli u prethodnoj
lekciji.

Kod bi izgledao ovako, ukoliko želimo da dodamo neku sivkastu pozadinu za celu stranu:
body{
background: #eeeeee;
}

Strogo je preporučljivo da ako postavite određenu boju kao vrednost svojstva

background-color, takođe postavite i boju za svojstvo color, kako biste izbegli moguće
kolizije i nečitljivost teksta ako korisnik u web čitaču promeni boju teksta.

Background Image
Ova opcija služi da nekom elementu dodamo sliku kao pozadinu i kod bi izgledao ovako:
.zaglavlje{
background-image: url("../img/zaglavlje.jpeg");
}

Pomoću url(“...”) definišemo putanju do naše slike. Ukoliko niste upoznati se definisanjem
putanje onda to možete uraditi na nekoliko načina:

1. Link do slike, npr: https://images.pexels.com/photos/381949/pexels-photo-

381949.jpeg?h=350&auto=compress&cs=tinysrgb;

2. Putanja do fajla gde se nalazi slika.

Kod prve opcije smo naveli link do slike sa sajta https://www.pexels.com/, koji ima
fantastične slike, ukoliko Vam zatrebaju za sajt. :) Kod druge opcije bih se zadržao i
detaljnije je razjasnio, jer će Vam trebati više nego link.

vi se trenutno nalazite u folderu gde je vaš CSS fajl što znači u CSS folderu (bela linija /
okvir):
 ama je neophodno da se vratite jedan folder iznad, tj. da izađete iz CSS foldera kako biste
ušli u img folder i to radite pomoću; ../. Nakon te komande ste u vašem „home“
direktorijumu i tu Vam se nalaze svi folderi i fajlovi.

Sada treba da uđemo u img folder, pa nadovezujemo na našu putanju img/ i ona će
izgledati ovako; ../img/ Nakon toga, u img folderu pronalazite sliku i njen naziv sa
ekstenzijom nadovezujete takođe i dolazite tako do konačne putanje: ../img/zaglavlje.jpeg i
tu putanju unosite u CSS kod.

Background Repeat
Kada se kao pozadinska slika neke stranice postavi slika koja je po dimenzijama (dužini i
širini) manja od stranice, tada web čitač tu sliku ponavlja duž horizontalne i vertikalne ose.
Po difoltu, background-repeat ima svojstvo da ponavlja sliku i horizontalno i vertikalno
dokle god ne ispuni širinu i visinu elementa koji se stilizuje.

Sa ovom opcijom možemo to promeniti i dodeliti vrednosti:

 repeat – podrazumevana vrednost (ponavlja i vertikalno i horizontalno);

 repeat-x – ponavlja samo horizontalno;

 repeat-y – ponavlja samo vertikalno;

 no-repeat – ne ponavlja.

Repeat opcija se najčešće koristi ukoliko imate neku teksturu kao pozadinu, pa ona treba
da se ponavlja, odnosno poploča, dok repeat-x i repeat-y su malo manje
zastupljene vrednosti.

Background repeat opcija se koristi na sledeći način:

background: color image repeat attachment position;

Pa bi neka skraćena verzija svega gore navedenog bila:

.zaglavlje{
background-image: url("../img/zaglavlje.jpeg");
background-repeat: no-repeat;

i na ovaj način smo stilizovali element sa klasom zaglavlje da nam na pozadini bude
slika zaglavlje.jpeg koja se ne ponavlja.

Background Attachment
Ova opcija nam omogućava da fiksiramo našu sliku koju smo postavili kao pozadinu kada
se skroluje (nešto nalik parallax-u ko je upoznat sa tim). Vrlo interesantna opcija sa kojom
se može dizajn stranice učiniti još više zanimljivim i neobičnim.
 Ova opcija se koristi na sledeći način:
.zaglavlje{
background-image: url("../img/zaglavlje.jpeg");
background-repeat: no-repeat;
background-attachment: fixed;
}

Background Position
Background Position koristimo da podesimo poziciju slike koju smo postavili kao
pozadinu pomoću background-image opcije. Ako ova vrednost nije podešena, po difoltu će
slika u svojoj originalnoj veličini biti podešena u gornjem levom uglu elementa koji stilizujete.

Vrednosti koje možete dodeliti su:

 left top

 left center

 left bottom

 right top

 right center

 right bottom

 center top

 center center

 center bottom

(ukoliko za vrednost postavite samo jednu vrednost, tj. samo left, druga vrednost će biti
center i to je isto kao da ste napisali left center)

 x% y% - na primer 0% 0% je gornji levi ugao, 100% 100% je donji desni, ako definišete
samo jednu vrednost druga je 50% kao podrazumevana.

Primer koda za ovu opciju je:

.zaglavlje{
background-image: url("../img/zaglavlje.jpeg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left bottom;
}
 Ne morate imati svojstva background-repeat i background-attachment,
mi samo nadovezujemo radi lakšeg razumevanja u nastavku lekcije i
povezivanja nekih stvari.

Fontovi

U CSS imamo nekoliko opcija sa kojima možemo stilizovati font teksta na stranici, kao što
su:

 font-family,
 font-size,
 font-weight...

Font Family
Font Family nam služi da postavimo koji želimo font da koristimo. Kada koristimo ovu
opciju najbolje bi bilo da stavimo više od jednog fonta, jer u slučaju da jedan ne može da
se podrži, onda će se koristiti prvi sledeći.

Da bude jasnije pogledajte primer:

h1, h2, h3, h4, h5, h6{
font-family: "Times New Roman", Times, Serif;
}

Ovim stilom smo dodelili svim naslovima (od h1 do h6) font Times New Roman. U slučaju
da on iz nekog razloga ne može da se normalno učita, koristiće se font Times, a u slučaju
da ni on ne može onda spadamo na poslednji, odnosno u ovom slučaju Serif.

Ukoliko naziv vašeg fonta sadrži više od dve reči kao u našem slučaju Times New Roman
on mora ići pod znake navoda.

Verovatno ćete retko kad koristiti fontove koji već postoje u CSS-u,
tako da preporučujemo Google fonts.
 Idite na Google Fonts.
 Pronađite font koji želite i kliknite na crveni kružić sa ikonicom plus da Vam se željeni font
prikaže u donjem desnom uglu:
 Sada kliknite na taj crni panel koji Vam se prikazao (na gornjoj slici strelica ukazuje na
njega).
 Idite na tab „CUSTOMIZE“ i štiklirajte opcije koje su Vam potrebne (možete izabrati debljinu
fonta, podršku za latinične i ćirilične karaktere ukoliko poseduje itd).
 Vratite se na tab „EMBED“ i tu ćete videti kod za povezivanje ovog fonta sa vašom
stranicom i CSS kod koji treba da ubacite kako bi se font primenio na elemente.
 Primetićete da imate opciju kod koda za povezivanje „STANDARD“ i „@IMPORT“.
Budući da Vam je verovatno opcija „STANDARD“ već poznata (ovaj kod stavljate u head
element) želli bismo ovom prilikom da pojasnimo za šta služi @import.

@import opcija
Ova opcija iće Vam od velike koristi kada budemo radili SASS, jer se tako formira grupa
fajlova koje znatno olakšavaju stilizovanje vašeg sajta. Import opcija može imati vrednosti,
kao što smo i pričali za link element, znači:

 putanju do vašeg CSS fajla ili

 link do CSS fajla.
Sada ćemo iskoristiti opciju sa linkom, a kada dođemo do SASS-a, koristićemo putanje.

Bitno je da znate da imate mogućnost da u vaš CSS fajl uvezete druge

CSS fajlove
Na primer, ako imate fajl glavni.css u njega možete uvesti sve druge stilove i
u HTML samo jednim link tabom koji povezuje vašu stranu i glavni.css fajl primenjujete
sve stilove bez potrebe da svaki zasebno dodajete sa link elementima.

Možda se neki pitaju: zašto ne bismo koristili jednostavno nama poznatu opciju koju nam
ovde pruža „STANDARD“, tab odnosno link element? Evo odgovora...

Je l' se sećate kad smo pričali da je loša praksa pisati CSS u HTML-u na svakoj strani
zasebno zbog izmena? E tako je i sa fontom, zamislite imate 30 strana u kojima ste preko
link taga podesili vaš font, npr. na Roboto i odjednom hoćete da ga promenite ili mu dodate
još jednu opciju. Jao, muke ulazi u 30 fajlova, menjaj, pazi da nisi zaboravio negde!

Zato mimoilazimo ovu opciju odmah u startu i lakše nam je da u tih 30 fajlova dodamo link
tag koji nam povezuje CSS fajl, a u njemu samo na jednom mestu pomoću @import opcije
dodamo naš font. I računica je jednostavna:

 štedimo vreme ukoliko treba izmena

 duplo manje koda (u html bi trebalo 60 linija ovako imamo 30 linija koda + 1 u css-u).
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&subset=la
tin-ext');

h1, h2, h3, h4, h5, h6{

font-family: 'Roboto', sans-serif;
}
 Ovim kodom smo kao i malopre dodali font style za sve naslove, na vama je zadatak da
dodate:

 jedan tip fonta za naslove, a

 drugi tip fonta za sve ostale elemente pomoću globalnog selektora * (zvezdice).

Font Size
Sa ovim stilom smo se već ranije susreli u nekim od prethodnih primera, ali da ga
razjasnimo i naučimo nešto novo što nam ovaj stil pruža. Dakle, verovatno je svima jasno
da ovim stilom definišemo veličinu fonta.

Neke vrednosti koje nisu izražene u nekim jedinicama, već postoje u CSS-u su:

 xx-small,
 x-small,
 small,
 medium,
 large,
 x-large,
 xx-large i
preporučujem Vam da ih isprobate, ali upotreba im nije tako česta, jer će Vam najviše
trebati opcija da podesite veličinu fonta tačno u piksel.

Podešavanje vrednosti u pikselima se vrši tako što napišete

VREDNOST + PX.
Znači, ukoliko želimo veličinu fonta od 20 piksela to ćemo uraditi na sledeći način:
p{
font-size: 20px;
}

Ova opcija ima jednu manu, a to je što se veličina fonta ne može

promeniti iz podešavanja u pretraživaču, što može predstavljati
problem osobama sa slabijim vidom.
Treba imati u vidu ovu manu kada radite dizajn vašeg web sajta.

Pored piksela (px) postoji još dosta jedinica koje možete koristiti da prilagodite, kako
veličinu vašeg teksta, tako kasnije i drugih elemenata (širinu, visinu, margine, uvlačenja itd),
tako da nije uskovezana za veličinu fonta.

Promenljive jedinice koje je preporučljivo koristiti radi boljeg prikaza stranice na različitim
uređajima:
 em – u odnosu na font-size 2em je vrednost 2x većeg od trenutnog fonta;

 ex – u odnosu na x-visinu trenutnog fonta (retko kad se koristi);

 ch – u odnosu na širinu;

 rem – u odnosu na veličinu korenskog elementa;

 vw – 1vw = 1% širine vašeg prozora (znači 100vw je 100% širine vašeg prozora);

 vh – 1vh = 1% visine vašeg prozora (znači 100vh je 100% visine vašeg prozora);

 vmin – 1vmin = 1% vw ili vh u zavisnosti koja je manja vrednost za dati uređaj;

 vmax – 1vmax = 1% vw ili vh u zavisnosti koja je veća vrednost za dati uređaj;

 % - veličina u procentima.

Najčešće ćete koristiti em, vw, vh i %, ali preporučujemo Vam da ih sve isprobate i steknete
osećaj koliko koja jedinica zauzima prostora i da imate otprilike u glavi kad koju treba
upotrebiti.

Jedinice za fiksne veličine (one koje ne zavise od nekih drugih faktora) su:

 cm,
 mm,
 in,
 px,
 pt,
 pc.

Font weight
Font weight opcija nam služi da postavimo debljinu našeg fonta, a neke od vrednosti koje
možete koristiti su:

 normal,
 bold,
 bolder,
 lighter,
 100, 200, 300, 400, 500, 600, 700, 800, 900,
 inherit.
Numeričke vrednosti od 100 do 900 predstavljaju debljinu fonta od najtanjeg
(100) do najdebljeg (900), s tim da nam je: 400 = normal vrednost, a 700 = bold vrednost.
 Pošto smo malopre objasnili kako se koriste Google fontovi, bilo bi dobro da obratite pažnju
koje ste vrednosti za font weight štiklirali na početku, ukoliko se ne sećate, možete ih lako
pročitati iz linka i samo te koristite kako biste došli do željenog izgleda.

Naš link je
bio: https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&subset=latin-ext

tako da je jasno da imamo na raspolaganju vrednosti 300, 400, 500 i 700. Nemojte ručno u
link nikad dodavati nove vrednosti, jer ih možda taj font ne podržava, uvek prego
Google fonts sajta izgenerišite link.

Ovu opciju koristimo na sledeći način:

h1, h2{
font-weight: 700;
}
h3, h4{
font-weight: 500;
}
h5, h6{
font-weight: 400;
}
p{
font-weight: 300;
}

Tekst

Za formatiranje teksta CSS nam nudi nekoliko opcija pomoću kojih ravnate tekst, uvlačite
redove, podešavate dekoraciju teksta, razmak između redova itd.

Text Align
Ravnanje teksta horizontalno može biti: left, center, right, justify. Korišćenje ove opcije je
vrlo jednostavno i izgleda ovako:

1. tekst u centru: text-align: center;

2. tekst na levu stranu: text-align: left;
3. tekst na desnu stranu: text-align: right;
4. tekst poravnan sa obe strane: text-align: justify.
 h1, h2, h3, h4, h5, h6{
font-family: 'Roboto', sans-serif;
text-align: center;
}
p{
font-size: 1.1em;
text-align: justify;
}

Text Decoration
Dekoracija teksta nam služi da postavimo ili uklonimo neku dekoraciju sa teksta kao što
je podvučen, precrtan tekst, linija iznad teksta itd. Vrednosti koje možemo dodeliti su>

 none,
 underline,
 overline,
 line-through,
 blink,
 inherit.
Koriste se na sledeći način:
a{
text-decoration: none;
}
span{
text-decoration: line-through;
}

Kod link (a) elemenata podrazumevana vrednost je underline za text-decoration, pa

samim tim, ukoliko unesete gore navedeni stil u vaš css fajl, sa svih linkova na stranici će
Vam se skloniti taj podrazumevan stil, što će Vam najverovatnije zatrebati.

Text Transform
Transformacija teksta nam služi da postavimo tekst unutar nekog elementa da bude:

1. ceo malim slovima,

2. velikim slovima ili
3. prvo slovo svake reči veliko.
Vrednosti koje možemo dodeliti su:
 none,
 capitalize,
 uppercase,
 lowercase,
 inherit.
Ovaj stil se koristi na sledeći način:
h1, h2, h3, h4, h5, h6{
font-family: 'Roboto', sans-serif;
text-align: center;
text-transform: uppercase;
}
p{
font-size: 1.1em;
text-align: justify;
text-transform: capitalize;
}

Verovatno se sad pitate za šta će ovo nama, kada možemo jednostavno uneti, npr.
za naslove - sva velika slova. Da, naravno, možete, ali kad kasnije naučimo nešto PHP-a
i MySQL-a i napravite web aplikaciju gde korisnici sami unose naslove, sadržaj i slično,
kako ćete njih naterati da unesu sve velikim slovima?

Sad opet ima odgovor na to, pa možemo preko JavaScript-a ili u PHP pre čuvanja u bazi
da prebacimo sve na velika slova, da možete i tako. Ali, šta ćemo ako prebacite sve u velika
slova i posle mesec dana menjate dizajn u koji se ne uklapaju sva velika slova?

Eto muke vaše gde treba posle veliko, a gde malo u naslovu, pa prepravljaj sve, :) Eto,
nadamo se da polako kapirate kako treba sagledavati problem (zato smo učili Paju da kuva
kafu u osnovama programiranja, da biste naučili kako da sagledate problem sa
pitanjem „Šta ako?“).

Text Ident
Pomoću ove opcije uvlačimo prvi red našeg teksta za vrednost koju smo postavili u
procentima ili nekoj drugoj vrednosti koje smo objasnili u nekoj od prethodnih lekcija (px,
em...).

Koristi se na sledeći način:

 p{
font-size: 1.1em;
text-align: justify;
text-indent: 30px;
}

Word Spacing i Letter Spacing

Ove dve opcije, kao što im i ime kaže, ukoliko prevedemo je razmak između reči i slova u
tekstu.

Koristimo ih na sledeći način:

p{
word-spacing: 5px;
letter-spacing: 2px;
}

Line Height
Line height nam omogućava da postavimo razmak između redova u tekstu. Njene
vrednosti mogu biti podešene u:

 procentima,
 brojevima ili
 nekom vrednošću izražene u jedinicama koje smo radili.
Kada koristimo broj za vrednost ovog stila, on se izračunava po sledećoj formuli:

VELICINA FONTA * BROJ

Što znači, ako nam je:

 font-size: 20px, a
 line-height: 2
onda je to isto kao da smo napisali da je line-heigh: 40px.

Ova opcija se koristi na sledeći način:

p{
word-spacing: 5px;
letter-spacing: 2px;
line-height: 1.5;
}
 Linkovi

Linkovi imaju četiri različita statusa, a to su:

1. a:link – još nije korisnik kliknuo na njega odnosno pogledao šta se nalazi na tom linku;

2. a:visited – korisnik je kliknuo odnosno pogledao šta se nalazi na tom linku;

3. a:hover – trenutak kada je kursor miša preko linka;

4. a:active – u procesu klikanja (od trenutka kad korisnik klikne na link i ne pusti).

Nemojte da vas buni što uz link pišemo, npr. :hover ove dve tačke i sve
posle toga su pseudo klase za element koji se nalazi pre : (dve tačke).
Za sad se nećemo zadržavati na razjašnjenju pseudo klasa, jer će biti posebna lekcija samo
za to.

Ukoliko koristite zajedno neke od gore navedenih opcija, bitno je kojim

redosledom ih postavljate, jer poslednja dodata ima veću prednost u
odnosu na prethodnu.
Tako da ih po sledećemo redosledu koristite kako biste dobili željene rezultate:

1. :link,
2. :visited,
3. :hover,
4. :active.
a:link{
color: #000000;
}
a:visited{
color: blue;
}
a:hover{
color: rgba(0, 0, 0, .5);
}
a:active{
color: #555;
 }

Kod poslednja dva primera vas možda zbunjuje ova vrednost .5 i #555, pa da razjasnimo:

 ako napišete za bilo koju vrednost .5 to je isto kao i da ste napisali 0.5. Znači, nula nije
obavezna;

 ako ne dovršite HEX boju i napišete samo, npr. #555 onda je to isto kao da ste
napisali #555555. Znači samo se nadovežu prva tri koja ste napisali.

Liste

Kao što znamo postoje tri vrste lista u HTML -u (unordered, ordered, definition). CSS nam
pruža nekoliko opcija da stilizujemo najčešće unordered i ordered liste. Neke od
tih opcija su:

 Kontrolisanje oblika i izgleda markera.

 Postavljanje slike na mesto markera.

 Podešavanje udaljenosti između markera i teksta liste.

 Podešavanje da li će se marker nalaziti izvan ili unutar liste gde su stavke.

List Style Type

Po običaju, ordered list, kao što znamo imaju numeričke vrednosti (1, 2, 3...)
,dok unordered liste imaju crnu okruglu tačku ispred svake stavke. Pomoću CSS-a
možete menjati ove vrednosti u :

 kružić,
 kvadratić,
 rimske brojeve,
 latinična slova itd.
pomoću opcije list-style-type:
ul{
list-style-type: square;
}
ol{
list-style-type: decimal-leading-zero;
}
 Ukoliko koristite Brackets ili neki napredniji editor, mogli ste primetiti da prilikom kucanja
CSS koda, editor Vam sam izbacuje ponuđene vrednosti tako da Vam to može
znatno olakšati kucanje koda, kao i da naučite neke nove vrednosti koje možda pre nisu
postojale.

Ukoliko, ipak, želite da vaša, npr. unordered lista nema nikakvih markera onda to
postižete sa vrednošću none:
ul{
list-style-type: none;
}

List Style Position

Po običaju, markeri su smešteni izvan okvira stavki liste, mada uz pomoć CSS-a vi ih
možete smestiti i unutar stavki. Najbolja demostrancija za ovo je da postavimo neku
pozadinu za naše stavke i pogledamo kako funkcionišu te dve vrednosti:

1. inside,
2. outside:
ul li{
background: #CCC;
list-style-position: inside;
}

Zadatak za vas je da uočite razliku sa ovim kodom i nakon što dodelite

vrednost outside za list-style-position. Ukoliko želite, možete i napraviti dve liste sa
različitim klasama i jednoj dodeliti inside vrednost, a drugoj outside, pa uporedite tako.

List Style Image

Umesto markera za listu koje nam nudi CSS, možete na njihovo mesto dodati i
neku sliku po izboru, na sledeći način:
ul{
list-style-image: url(../img/10.png);
}

Vidite da smo ovde izostavili navodnike unutar zagrada kod definisanja putanje, to je
takođe dozvoljeno. Ukoliko koristite ovu opciju, bilo bi dobro da istestirate na svim
pretraživačima.

Često može doći do odstupanja i neće se dobiti rezultat koji želite svuda isto. Rešenje
za ovaj problem je da malo improvizujemo prethodno stečeno znanje
i mimoiđemo opciju list-style-image, a pomoću opcija:

 list-style-type i
 background
podesimo našu sličicu na mesto markera da izgleda isto na većini pretraživača.

To ćemo uraditi na sledeći način:

ul{
list-style-type: none;
}
ul li{
background-image: url(../img/10.png);
background-position: 0px 5px;
background-repeat: no-repeat;
background-size: 5px 5px;
padding-left: 20px;
}

U zavisnosti od toga kakvu sliku želite na poziciji markera, možda će Vam trebati
opcija background-size, a možda i ne. Takođe, možda budete morali da malo promenite
vrednosti za background-position, jer ne mogu vam odrediti tačne vrednosti, zato što se
one razlikuju od slike do slike.

Opcija padding -left inače služi da uvučemo sadržaj elementa sa leve strane, u ovom
slučaju za 20px,ali više o tome u narednim lekcijama kad budemo samo padding radili.

Boks
Svaki HTML element na vašoj stranici se sastoji od jednog ili više pravouganih
kutija. CSS -om se obično definiše kakve su to kutije, odnosno:

 kolika im je širina,
 visina,
 udaljenost od drugih elemenata (margin),
 linija koja uokviruje element (border) i
 uvlačenje (padding).
Kako bismo Vam što bolje objasnili ova svojstva kreirali smo jedan običan boks
pomoću div elementa sa klasom boks i on izgleda ovako:
 Uporedno pratite analizu koda sa slikom i delom HTML i CSS na slici.

 Cela tamna površina (odnosno div element sa klasom boks)

ima širinu od 300px i visinu od 300px koju smo postavili pomoću width i height i na taj
način podešavate širinu i visinu za bilo koji element.
 Padding: služi nam da uvučemo sadržaj unutar tog boksa, kao što vidimo na slici belim
crticama je označen taj prostor koji smo uvukli na tamnom boksu i to je broj 1.
 Border: ovo nam je linija oko boksa i prostor rezervisan za nju smo obeležili plavom
bojom i rednim brojem 2.
 Margin: ovo nam je udaljenost od ostalih elemenata, u ovom slučaju su to linije
označene crvenom bojom sa rednim brojem 3.
Za margin, padding i border smo dodelili 50px sa svih strana (gore, desno, dole, levo) i
ako bismo želeli da izračunamo širinu elementa to se radi na sledeći način:

margin left + border left + padding left + width + padding right + border right + margin
right

Slično je i za visinu, samo umesto left i right, ide top i bottom i umesto
width, ide height.
Za ovu lekciju je bitno samo da razgraničite: gde šta ide, a u naredne tri lekcije ćemo reći
nešto više o margin, padding i border svojstvima.
 Margine
Sa marginama smo se upoznali u prošloj lekciji i nadamo se da je jasno gde se ona nalazi.
Znači, ona odvaja element za koji se postavlja margina od ostalih elemenata.

Imamo četiri vrste margina:

1. margin-top – gornja margina;

2. margin-right – desna margina;

3. margin-bottom – donja margina;

4. margin-left – leva margina.

Bilo bi dobro da u glavi, za svojstva margin i padding, uvek nabrajate po redosledu:

1. gornja,
2. desna,
3. donja,
4. leva.

Dakle, u smeru kazaljke na satu, zbog skraćenog pisanja koje vam

znatno štedi vreme.
Pa pogledajmo ovaj CSS kod:
.element{
margin-top: 10px;
margin-right: 20px;
margin-bottom: 5px;
margin-left: 15px;
}

Jasno je koju smo vrednost za koju marginu postavili, ali se ovo skraćeno može zapisati i
na sledeći način:
.element{
/* Duzi nacin */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 5px;
margin-left: 15px;
 /* Kraci nacin */
margin: 10px 20px 5px 15px;
}

Prva stvar koja vam verovatno zapada za oči su ove kose crte i zvezdice. To
su komentari u CSS-u. :) Kao što smo učili da treba pisati komentare u HTML -u, to je
takođe bitno raditi i u CSS-u, jer ćete po fajlu imati verovatno na hiljade linija koda, pa je
bitno dobro organizovati kod.

Dakle, komentari u CSS-u se pišu na sledeći način:

/* KOMENTAR */

Da se vratimo mi našim marginama. Kraći način za pisanje margine je vođen

sledećim pravilom:
margin: margin-top margin-right margin-bottom margin-left;

E sad, postoji još i kraći način (u zavisnosti kakve su Vam margine potrebne), ako se
setite u prošloj lekciji smo stavili margin: 50px; pa postoje neka pravila ako izostavite
ostale vrednosti:

 margin: 50px; = margin: 50px 50px 50px 50px; - ako postavimo jednu vrednost ona će
se primeniti i na sve ostale;

 margin: 50px 20px; = margin: 50px 20px 50px 20px; - ako postavimo dve vrednosti one
su nam za margin-top i margin-right i onda se preslikava na sledeći način:
1. margin-top = margin-bottom
2. margin-right = margin-left
 margin: 50px 20px 10px; = margin: 50px 20px 10px 20px; - ako postavimo tri vrednosti
onda će se ona druga primeniti na četvrtu, kao iz prethodnog primera po pravilu margin-
right = margin-left.

Vrednosti za margine mogu biti negativne.

Padding
Sa CSS -om, svakom elementu se može dodeliti još jedna vrsta praznog prostora koja
se na engleskom jeziku zove padding.

Padding je zapravo prazan prostor između strane elementa (njene

bordure) i sadržaja tog elementa.
 Taj prostor se može pojedinačno podesiti za svaku stranu elementa.

Kao kod margina, opcija padding se može postaviti sa svih strana, različito pomoću:

1. padding-top,
2. padding-right,
3. padding-bottom,
4. padding-left ili
5. skraćenog zapisa koji važi kao kod margina:
padding: padding-top padding-right padding-bottom padding-left;

Gde je izostavljena jedna vrednost, dobija vrednost na osnovu pravila koje smo objasnili u
lekciji margine.

Padding koristimo na sledeći način:

.element{
padding: 50px 20px;
}

i na ovaj način smo postavili gornji i donji na 50px, a desni i levi na 20px. Ova opcija se
koristi kada treba da uvučete sadržaj u osnovu na ivice elementa.

Vrednosti za padding stil ne mogu biti negativne.

Border

Pomoću CSS -a svaki element na stranici može imati graničnu liniju, i

to različitog stila, veličine i boje. Moguće je čak za jedan element definisati
sve bordure različite (leva, desna, gornja i donja).

Border opcija nam omogućava da definišemo kako će izgledati okvir našeg elementa,
odnosno linija koja ga okružuje. Može biti:

 neisprekidana linija,
 isprekidana,
 slika itd.
Pre svega, da napomenemo da ovaj stil nije obavezan i ukoliko ga izostavite, naravno
nećete imati nikakav okvir oko vašeg elementa.
 Za korišćenje ove opcije možemo da postavimo vrednosti za tri svojstva:

1. border-style – stil linije (solid, dashed, none, hidden, dotted, double, groove, inset, outset,
ridge);

2. border-color – boja linije;

3. border-width – debljina linije.

CSS kod za, na primer, isprekidanu liniju debljine 5px, plave boje bi izgledao ovako:
.element{
border-width: 5px;
border-style: dashed;
border-color: blue;
/* ILI SKRACENO */
border: 5px dashed blue;
}

Možete videti i da se ovo svojstvo može zapisati u skraćenom obliku na sledeći način:
border: border-width border-style border-color;

CSS u praksi

U ovoj lekciji ćemo isprobati neke stilove koje smo do sad naučili i malo ulepšati našu
stranu. Već u narednom nivou ćemo ovladati tehnikama kreiranja rasporeda pomoću CSS -
a, responsive dizajna i sličnih stvari koje će nam pomoći da dovedemo sajt na viši nivo.

Mi ćemo stilizovati našu index.html stranu koju smo napravili kroz ovaj kurs sa možda
nekim korekcijama koje ćemo napomenuti, ali da krenemo deo po deo.

Globalni stilovi (stilovi.css):

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&subset=la
tin-ext');

body{
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
background: #eee;
}

h1, h2, h3, h4, h5, h6, p{

margin: 0;
}

a{
text-decoration: none;
}

Ovo su neki globalni stilovi koje smo postavili, svi su nam već poznati, a cilj i je bio da
uklonimo nepotrebne margine i linkovi da ne budu podvučeni. Uz to smo dodali
font i pozadinu na body element, odnosno celu stranicu od vrha do dna.

Ovde smo dodali nekoliko stilova sa pozadinom kako bismo je učinili interesantnom. Prvo
smo dodali glavni element div sa klasom zaglavlje i njemu podesio sliku za pozadinu.

Nakon toga, u njemu smo kreirali još jedan element sa providnom pozadinom, pomoću
opcije rgba, jer kao što smo rekli, onaj četvrti broj nam određuje providnost (od 0 do 1 gde
je 1 neprovidno a 0 providno). Isto smo i nav elementu dodali providnu, ali belu pozadinu.

Glavni sadržaj (Stilovi.css):

Podnožje:
Što se glavnog sadržaja i podnožja tiče tu smo samo dodali neke osnovne stilove kako
bismo ih donekle učinili lepim. Nakon ovog osnovnog dela iz CSS-a prethodi Vam jedan
zadatak, a nakon toga prelazimo na nešto naprednije opcije kao što smo spomenuli na
početku ove lekcije.
 Outlines

Outline opcija je vrlo slična Border opciji koju smo obradili u prethodnom nivou. Čak se i
vrednosti na isti način dodeljuju, pa da se prisetimo skraćenog oblika u ovom slučaju:
div{
outline: 4px solid #123222;
}

Gde vrednosti dodeljujemo po sledećem redosledu: širina - stil - boja. Sada, ukoliko
isprobate i postavite na neki vaš element outline po gornjim instrukcijama, verovatno ćete
se zapitati koja je razlika u odnosu na Border opciju, tako da ćemo sad nabrojati glavne
razlike ove dve opcije:

 Ne zauzimaju dodatan prostor, uvek se nalaze na ivicama boksa što može dovesti do
preklapanja sa nekim drugim elementima.

 Za razliku od Border opcije, gde smo mogli da podešavamo za svaku stranicu različite
vrednosti (gore, desno, dole, levo), kod Outline opcije možemo
postaviti samo jednu vrednost za sve stranice.

 Nemaju uticaj na ostale elemente okolo, osim preklapanja.

 Ne menjaju veličinu elementa (ko što je slučaj bio kod border opcije kada smo morali da
računamo i njenu veličinu kako bismo dobili konačnu).

 Mogu biti ne pravougani.

Samo kratko da se podsetimo ukoliko ne koristimo skraćen zapis imamo postavke za:

 outline-width – vrednost iskazana nekom jedinicom koje smo spominjali (px, pt, em...);

 outline-style – stil outline-a (none, hidden, dotted, dashed, solid, double, groove, ridge,
inset, outset);

 outline-color – boja za outline (CSS boja, rgb, rgba, HEX).

CSS – Cursor
Cursor opcija nam omogućava da promenimo podrazumevan pokazivač miša kad
prelazimo preko određenih elemenata.

Ona se koristi vrlo jednostavno na sledeći način:

div{
cursor: alias;
}
I na taj način smo podesili da kad god korisnik pređe mišem preko div elementa, kursor će
mu u ovom slučaju biti kao običan sa nekom strelicom.

CSS – Overflow
Pomoću overflow opcije definišemo kako će se naš element ponašati ukoliko izlazi iz nekog
svog okvira koji je predviđen za njega. Da bude jasnije pogledajte sledeću sliku:

Sa leve strane možete videti rezultat HTML koda. Možete zaključiti da imamo div element
kojem smo podesili da je visina 100px i stavili mu pozadinu #aaa i na slici ćete primetiti taj
deo (označen je i strelicom).

E sad, vaš zadatak je da ispod ovog div elementa sa klasom overflow dodate još neki
element, npr. p element sa vašim odgovorom na pitanje i da vidite šta će se desiti.
 Došlo je do preklapanja ovog dela koji ispada iz div elementa sa p elementom. To možete
rešiti pomoću overflow opcije koja nam nudi sledeće vrednosti:

 visible – podrazumevana vrednost i dobijamo rezultat kao sa slike;

 hidden – sadržaj koji je izvan okvira se neće prikazivati;

 scroll – sadržaj koji je izvan okvira se neće prikazivat,i ali naš element dobija scroll opciju
tako da ga možemo videti ukoliko skrolujemo unutar elementa;

 auto – ukoliko nam sadržaj ispada izvan okvira onda će se pojaviti scroll opcija, a ukoliko
ne, ispada scroll opcija je sakrivena.

Pored same overflow opcije koja nam služi da odredimo kako će se ponašati i po x i y
osi možemo ih definisati i zasebno sa različitim vrednostima na sledeći način:
div.overflow{
height: 100px;
background: #aaa;
overflow-x: hidden;
overflow-y: auto;
}

Display

Pre nego što pređemo na opisivanje Display opcije hteli bismo prvo da vas uvedemo u celu
tu priču pozicioniranja elementa. Sa ovom opcijom, odnosno lekcijom krećemo da
pakujemo elemente na strani onako kako ste zamislili.

Raspored elemenata na strani zavisi od nekoliko faktora, a neki od tih su:

 dimenzije elemenat,

 tipovi elemenata (block ili inline),

 pozicioniranje elemenata,

 odnos sa ostalim elementima u koje su ugneždeni i onima koji su u njih ugneždeni,

 neke druge dimenzije (veličina ekrana, dimenzije slike...).

Svaki element na stranici je prikazan u okviru jednog pravugaonikam odnosno tako se

generiše. Postoje dve grupe u koje možemo svrstati elemente (po difoltu bez CSS -a), a to
su:
1. blok level elementi i
2. inline level elementi.
Blok level element se, kao što im ime kaže, prikazuju kao jedan blok, odnosno u punoj
širini su ekrana (ako ne koristimo CSS ne možemo staviti ništa sa njihove leve ili desne
strane), a takvi elementi su:

 paragrafi (p),
 naslov (h1-h6),
 division (div) i
 drugi slični.

Svaki blok element može u sebi sadržati inline ili druge block level
elemente.
Inline level elementi po difoltu (bez CSS-a) zauzimaju onoliko prostora koliko je
taj sadržaj u njima. Da bude jasnije, za razliku od block level elemenata, inline elementi ne
forsiraju prelome linija (da ne može ništa sa leve i desne strane da im bude).

Takvi elementi su:

 em,
 span,
 strong itd.

Inline elementi obično ne sadrže druge blok elemente već samo druge
inline elemente ili neki tekst.
Da bude jasnije za primer uzmite dva div elementa i u jedan ubacite vaše ime, a u drugi
vaše prezime i vidite šta će se desiti, a posle toga isto to uradite samo
sa span elementima.

Sada ćemo Vam pomoću CSS-a i display opcije koji nam on nudi pokazati kako
da menjate ove podrazumevane vrednosti i dodelite vašem elementu baš onu koja Vam
je potrebna za željeno stilizovanje.

Display opciji možemo dodeliti nekoliko osnovnih vrednosti, kao što su:

 block,
 inline,
 inline-block,
 none,
dok neke naprednije, kao što su flex ćemo tek obraditi u nekoj od narednih lekcija.

Display Block
 Ova opcija je podrazumevana za elemente koji se svrstavaju u blok elemente koje smo
na početku lekcije objasnili, tako da nema potrebe da, npr. div elementu dodeljujemo stil
display: block, dok na primer elementima iz grupe inline level će nam nekad biti potrebno,
pa to radimo na sledeći način:
a.block{
display: block;
}

i na ovaj način smo svim a elementima sa klasom block dodelili da budu blok elementi.
Sada tom linku možete postavit:

 visinu,
 širinu,
 padding,
 margine i
 ostale stvari koje ste mogli do sad block level elementima.
Uzeli smo za primer a element, jer ćete ovu opciju najčešće koristiti kod njega, na primer,
ukoliko imate neku bočnu traku (sidebar) na stranici i kad ubacite samo link on će biti
veličine kolika je dužina teksta, a vama je potrebno da taj link zauzima punu širinu bočne
trake i to biste odradili display opcijom, podesite malo padding i savršeno :)

Sa druge strane ako imamo neki paragraf (ili neki drugi element iz blok levela), a
neophodno nam je da on bude inline to ćemo uraditi na sledeći način:
p.inline{
display: inline;
}

i sve paragrafe sa klasom inline smo stilizovali da budu inline.

Pored opcije display:block i display:inline bilo bi dobro kada bismo imali nešto između,
da bude inline, a da ipak možemo da mu podesimo visinu, širinu, marginu i slično, pa
shodno tome, CSS je uveo i opciju display: inline-block koja je kombinacija
gorenavedenih block i inline opcija.

Ona se koristi na sledeći način:

.inline-block{
display: inline-block;
}
U gornjem levom uglu je prikaz HTML -a ispod je kod a desno je CSS. Primetićete u
CSS-u da smo svima dodali padding: 15px, ali da se u prikazu HTML-a nije svuda
primenala, to je zbog toga što inline elementi ne mogu imati padding, height, width i slične
stilove (možete ih vi dodati nije greška ali se neće primeniti) dok vrednosti display i display-
block mogu poprimiti te stilove.

Takođe, možete primetiti kako radi display-block kao kombinacija block i inline.

I još jedna od osnovnih vrednosti za stil display je none. Koristi se na sledeći način:
.none{
display: none;
}

Kada koristimo ovu opciju element koji stilizujemo neće se prikazivati (kao ni elementi
unutar njega). Često se koristi, na primer, ako imate neki padajući meni pa mu
dodelite display: none, a kad se klikne na njega preko JS-a mu dodelite display: block ili
preko CSS-a kad se pređe mišem da se prikaže meni.
 Visibility

Pomoću ove opcije možemo odrediti koji će nam element biti vidljiv na strani, a koji
ne. Vrednosti koje možemo dodeliti ovom stilu su:

 visible – podrazumevana vrednost, element je vidljiv;

 hidden – element se ne vidi, ali se ne menja raspored strane;

 collapse – ceo red ili kolona se sakrivaju, primenjuje se za redove, grupe redova, kolone i
grupe kolona (kod tabela);

 inherit – preuzima vrednost svog roditelja (ako je element iznad njega sakriven i on će
biti).

Sada se možda pitate koja je razlika između display:none i visibility: hidden, pa evo
odgovora:

1. Kod display:none opcije sakrivamo element i on potpuno nestaje sa strane (kao da ne

postoji) i neki drugi element će zauzeti to upražnjeno mesto sve dok on ima
vrednost none;
2. Kod visibility:hidden mi samo sakrivamo element, ali on je i dalje tu, i dalje zauzima
svoj položaj i neće mu neki drugi element zauzeti to mesto.
Navedeno izleda kao na slici:
 Position

Pozicioniranje elemenata je veoma bitno kako biste došli do željenog izgleda, pa je dobro
razumeti i istražiti ovu opciju što više. Sa njom možete da odradite mnogo stvari, a mi ćemo
se potruditi kroz neke primere da vam ukažemo na to kako koja vrednost funkcioniše.

Od vrednosti koje ćemo obraditi za stil position su:

 static (podrazumevano),
 relative,
 absolute i
 fixed.
Position staticje podrazumevana vrednost, na nju ne utiču stilovi, kao što su:

 top,
 right,
 bottom,
 left i
 z-index.

Position relative
Kod ove vrednosti naš element zadržava poziciju tu gde jeste, s tim da mu
možemo dodeliti vrednosti, kao što su:

 top,
 right,
 bottom,
 left i
 z-index.
Pomoću ove vrednosti mi možemo preklapati jedne elemente sa drugima. Međutim, onaj
prvobitan prostor, rezervisan za taj element, se ne smanjuje i ne pomera, već ostaje isti.

Pre nego što nastavimo dalje, primetili ste verovatno nekoliko novih pojmova kao što
su: top, right, bottom i left koje ćemo sad pojasnit,i dok ćemo z-index ostaviti za kraj ove
lekcije. Pomoću ovih vrednosti pomeramo element za zadatu vrednost.

Na primer: top: 40px; će nam pomeriti element od vrha za 40px.

 Ukoliko koristimo neko od ovih svojstva sa position:relative važi pravilo da se pomera za
zadatu vrednost od ivice tog elementa
 Ukoliko koristimo neko od ovih svojstva sa position:absolute važi pravilo da se taj element
pomera za zadatu vrednost od prvog pozicioniranog elementa (u nastavku će biti
primera, pa će biti jasnije), a ukoliko nema pozicioniranih elemenata, onda se pozicionira za
zadatu vrednost prema dokumentu.
Position relative se koristi na sledeći način:
.relative{
position: relative;
}

Na vama je zadatak da kreirate element koji ćete stilizovati da bude positon:relative i

dodeliti mu neki od stilova top, right, bottom, left (po mogućstvu isprobajte sve).

Position Absolute
Malo je teže objasniti ovaj stil bez primera, ali neka neka okvirna definicija bude da
se element pozicionira sa absolute vrednosti i postavlja unutar prvog pozocioniranog
elementa, kao da je relative.

Baš konfuzno, ali evo slike na kojoj ćemo dalje analizirati:

Imamo crveni boks sa nekim sadržajem koji smo pozicionirali relativno i unutar njega smo
ubacili jedan element (beli) koji smo apsolutno pozicionirali i podesili mu gde se odnosi
na .relative element pomoću top i left stilova.
 Da nismo crvenom boksu dodelili position:relative, beli boks bi nam se pozicionirao
po top i left vrednostima u odnosu na prozor (dokument) strane u slučaju da nema roditelja
koji je pozicioniran.

Position absolute se vrlo često koristi u naprednijim dizajnima kada

neki element treba da postavimo iznad okvira,
Position Fixed
Kao što mu samo ime kaže, definišemo da taj element bude fiksiran tako da u slučaju
skrolovanja element će stajati kao zakačen (neće pobeći gore).

Česta upotreba ovog elementa je kod navigacija koje treba da budu

fiksirane za vrh strane ili bočna traka i tsl.
Da bismo videli kako to izgleda u praksi, fiksiraćemo navigaciju koje smo stilizovali u
prošlom nivou, pa će kod izgledati ovako:
.zaglavlje-navigacija{
background: rgba(255, 255, 255, .8);
height: 45px;
line-height: 45px;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 10;
}

Zadatak za vas je da odradite isto sa vašom navigacijom, odnosno da je fiksirate.

U ovom kodu možete primetiti da smo dodali još jednu novu vrednost, a to je z-index. Z-
index možemo primeniti samo na pozicioniranim elemntima koja imaju vrednosti:

1. relative,
2. absolute ili
3. fixed.
Služi nam da se igramo sa slojevima (layers) i element sa većom vrednošću z-index će
biti bliži nama, odnosno biće vidljiiji.

Z-index može imati i negativne vrednosti, a podrazumevana vrednost

je nula.
 U prethodnom primeru smo postavili z-index na 10 i on nam je trenutno najbliži i biće uvek
vidljiv. Nijedan element ne može iči preko njega.

Zadatak za vas je da nekom elementu dodelite z-index 11 i vidite šta će se desiti sa vašom
navigacijom. Ne zaboravite pre toga da pozicionirate element! Mi smo našem naslovu
dodali position:

relative; z-index: 11;

i dobili sledeće:

Float

Pomoću float opcije možemo „gurnuti“ elemente u levu ili desnu stranu. Ova opcija se
može koristiti na svim elementima koja nisu pozicionirana
apsolutno (position:absolute).

Vrednosti koje možemo dodeliti su:

 left – guramo ga na levu stranu,

 right – guramo ga na desnu stranu,
 none – skidamo već zadate float vrednosti.
 Ovde možete videti deo početne stranice iz prethodnog nivoa. Ako se sećate, lekcije su
bile jedna ispod druge. Sada kada smo im dodali stil float: left, one se guraju levo i
automatski se nadovezuju jedna na drugu. Da smo stavili float:right otišle bi u desno.

Ukoliko želite da prelomite kod nekog elementa i da tu ide nov red, a ne da se nadoveže
na već poređane elemente, koristi se opcija clear.

U ovom slučaju gde koristimo float: left clear opcija bi izgledala ovako:
.clear{
clear: left;
}

I elementu koga želimo u novom redu dodelim klasu clear.

Pozicioniranje

Naučili smo kako da pozicioniramo tekst (left, right, justify, center), da

podesimo širinu i visinu nekom elementu i još neke osnovne stvari. U ovoj lekciji ćemo
videti šta još možemo sa tim opcijama uz promenu nekih vrednosti.

Ukoliko imate element neki na strani za koji želite da mu širina bude 400px, verovatno
znate kako ćete to uraditi, prosto i jednostavno:
.element{
width: 400px;
}

I sad pogledate vaš ekran i vidite da je vaš element prilepljen uz levu ivicu ekrana, a
vama je potreban baš centriran.

Zato imamo vrednost auto kod margine koja će ga izravnjati na sledeći način:
.element{
width: 400px;
margin: auto;
}

Samo je bitno da nam leva i desna margina bude auto, dok

su gornja i donja promenljive. Ovo važi za blok level elemente, dok ukoliko je vaš
element sa klasom .element u grupi inline neophodno je preko CSS -a da ga učinite:

 block ili
 inline-block elementom.
Kod nekih modernijih sajtova možete videti početni ekran sa navigacijom, dobrodošlicom
preko celog ekrana i obično negde pri dnu ima ikonica ili dugme za skrolovanje. Kako
podesiti da uvek bude baš tu dole centrirana na svim ekranima? Pa, hajde da napravimo i
naše zaglavlje da bude preko cele strane.

Ukoliko ste donekle pratili naš raspored elemenata, trebalo bi da dobijete ovakvo zaglavlje:

HTML kod bi trebao da Vam bude nalik ovom:

<!-- Zaglavlje -->
<div class="zaglavlje">
<div class="zaglavlje-pozadina">

<!-- Navigacija strane -->

<nav class="zaglavlje-navigacija">
<a href="o-nama.html">O nama</a>
<a href="galerija.html">Galerija</a>
<a href="kontakt.html">Kontakt</a>
</nav>
<!-- navigacija - kraj -->

<!-- Naslov strane -->

<header class="zaglavlje-naslov">
<h1 id="naslov">Kurs - Web Development</h1>
 </header>

<div class="skrol">
<a href="#glavni">Pogledaj više</a>
</div>

</div>
</div>
<!-- zaglavlje - kraj -->

<!-- Glavni sadrzaj -->

<section class="glavni" id="glavni">
<h1>Lekcije</h1>

Obratite pažnju na to da smo uhvatili pred kraj i deo section elementa

kojem smo dodelili id glavni.
iz razloga što smo prethodno dodatom dugmetu „Pogledaj više“ dodali atribut href sa
vrednošću #glavni, jer, kao što smo naučili kod linkova, oni mogu voditi na određene
delove strane.

I na kraju CSS kod bi trebao ovako da izgleda:

.zaglavlje{
background: url(../img/zaglavlje.jpeg)no—repeat fixed center center;
background—size: cover;
}

.zaglavlje—pozadina{
background: rgba(0, 0, 0, .5);
text—align: center;
min—height: 100vh;
position: relative;
}

.zaglavlje—navigacija{
 left: 0;
right: 0;
top: 0;
z—index: 10;
padding: 15px 30px;
}

.zaglavlje—navigacija a{
color: white;
font—weight: 500;
display: inline—block;
padding: 5px 10px;
}

.zaglavlje—navigacija a:hover{
color: #aaa;
}

.zaglavlje—naslov{
padding: 35vh 0 0;
}

.zaglavlje—naslov h1{
color: white;
font—size: 3em;
text—transform: uppercase;
}

.zaglavlje—pozadina .skrol{
position: absolute;
bottom: 15px;
left: 0;
right: 0;
}
 .zaglavlje—pozadina .skrol a{
color: white;
display: inline—block;
padding: 5px 15px;
border: 1px solid white;
}

Pseudo-class

CSS pseudo klasenam omogućavaju da dodelimo stilove elementima u različitim

stanjima, kao što su: hover, active, focus i slične (pričali smo kod linkova o ovim
stanjima). Pored toga, možemo ih koristiti i da selektujemo:

 prvi,
 poslednji ili
 neki drugi element u nizu.
Pošto smo već naučili koje pseudo klase imamo
kod linkova (:hover, :active, :link, :visited, :focus), sada ćemo reći nešto više o
selektovanju elemenata iz nekog niza. Uzećemo neku neodređenu listu za primer:
<ul>
<li>Stavka 1</li>
<li>Stavka 2</li>
<li>Stavka 3</li>
<li>Stavka 4</li>
</ul>

Iako je nama potrebno da stilizujemo samo li element, gde je tekst „Stavka 1“, a za njega
nemamo određenu klasu ili id, možemo to uraditi pomoću pseudo klase:

 :first-child ili
 :first-of-type,
ako nam je potrebna poslednja stavka onda to možemo uraditi pomoću:

 :last-child ili
 :last-of-type,
 dok ako nam je potrebna neka između stavka, to možemo odraditi pomoću :nth-child(N),
gde nam N može predstavljati:

 redni broj stavke,

 reč (even ili odd) za sve parne ili neparne elemente u nizu,

 izraz xn+y, gde su nam x i y brojevi (na primer 1n, 2n, 2n+1...).

Pored toga, ako hoćemo sve sem prvog elementa da selektujemo možemo
koristi :not(:first-of-type), u ovom slučaju na mestu first-of-type se može naći i neki drugi
selektor (klasa, id, globalni selektor itd) koji ne želimo da stilizujemo tim stilom.

Zadatak za vas je da napravite neku listu od 15-ak stavki i da joj dodelite sledeće stilove,
takođe da ih isprobate na razne načine da vidite kako funkcionišu:
/* u svim elementima velicina fonta 15px */
ul li{
font—size: 15px;
}

/* prvom elementu boja blue i velicina fonta 18px */

ul li:first—of—type{
color: blue;
font—size: 18px;
}

/* poslednjem elementu boja crvena */

ul li:last—of—type{
color: red;
}

/* neparnim elementima pozadina #eee */

ul li:nth—child(odd){
background: #eee;
}

/* parnim elementima pozadina #ddd */

ul li:nth—child(even){
 background: #ddd;
}

/* svakom cetvrtom elementu bold, 12px */

ul li:nth—child(4n+1){
font—weight: bold;
font—size: 12px;
}

/* svakom e1ementu sem 2 u nizu padding 16px */

ul li:not(:nth—child(2)}{
padding: 10px;
}

Pseudo-elements

Pseudo elementi vam omogućavaju da stilizujete neke delove elementa bez dodatnih
elemenata, klasa, id-jeva i sličnih stvari koje bi vaš kod učinili samo težim za čitanje a i
menjanje kasnije. Pseudo elementima, za razliku od pseudo klasa, pristupamo pomoću ::
(dve tačke).
selektor::pseudo-element{...}

Neki od pseudo elemenata su:

 ::first-line – stilizujemo prvi red teksta,

 ::first-letter – stilizujemo prvo slovo teksta,

 ::before – dodavanje sadržaja pre elementa,

 ::after – dodavanje sadržaja posle elementa.

Za vas je zadatak da dodate neki tekst na stranicu pomoću paragrafa i dodelite mu klasu
koju želite. Nakon toga u stilovima pomoću pseudo elemenata za prvi red i prvo
slovo stilizujte, npr. da prvo slovo bude veliko i druge boje, a prvi red da bude boldiran.

 .klasa::first-letter{ ... },

 .klasa::first-line{ ... }.
Mi ćemo se malo više zadržati kod druga dva pseudo elementa: before i after sa kojima
može da se napravi nešto interesantno.

Za sad, mi ćemo doterati zaglavlje još, tako što ćemo ispod naslova dodati još
neki tekst koji je razdvojen crticom. Izgledaće ovako:

A ovo smo postigli sledećim kodom:

Vidite da smo na .zaglavlje-naslov h1 dodali pseudo element ::before i onda ga stilizovali.

 Content stil nam je ovde neophodan i stavili smo da bude prazan. Da smo ubacili neki
tekst on bi se pojavio na mestu crtice, ali nije preporučljivo na ovaj način dodavati tekst, jer
nam za to služi HTML.

Nama je ovde cilj da ulepšamo tekst. Pomoću svih ostalih opcija:

 position,
 right,
 left,
 bottom...
smo stilizovali crticu da bude širine 30px i visine 5px, a nakon toga je obojili u belu boju.
Kada bismo promenili ::before u ::after dobili bismo isti rezultat, ali ja sad imam za vas
jedan interesantan zadatak.

Potrebno je da koristite oba pseudo elementa, znači i before i after, i pomoću njih da
postavite ovu belu crticu i iznad i ispod teksta.

Možete duplirati kod i samo promenite before u after i još nekoliko

stilova kako bi ona prešla iznad naslova.

Responsive

CSS nam nudi mogućnost da pomoću @media opcije stilizujemo stranicu tako da
bude prilagođena svakom uređaju:

1. mobilni,
2. tablet,
3. laptop,
4. desktop....
Koristi se u sledećoj formi:
@media not|only tip and(uslov) { ... }

Tipovi mogu biti:

 all – svi tipovi,

 print – za štampanje,
 screen – desktop, laptop, tablet, telefoni...
 speech – za čitače stranica.
 Pored ova četiri tipa bilo je i: tv, projection, handheld..., ali su oni zastareli, pa ih nećemo
navoditi.

Na primer, ako želite da stilizujete vašu stranicu za sve uređaje sa maksimalnom širinom
od 500px, to radite na sledeći način:

@media all and(max-width: 500px){ CSS KOD KOJI INAČE KUCATE }

Pošto se često dešava da nešto ne radi kako treba, neki razmak ste zaboravili u deklaraciji
ili tome slično evo koda pomoću kog možete da testirate da li ste ok podesili
@media opciju:
@media all and (max-width: 500px){
body{
display: none;
}
}

Kada Vam nestane sve sa ekrana, to je znak da sve radi i da je to

uređaj/širina ekrana za koje možete uneti stilove.

CSS3

Kroz prethodne lekcije smo obrađivali najpoznatije stilove koje ćete svakodnevno koristiti,
pored njih kroz nekoliko lekcija se provlači nekoliko stilova koji spadaju u CSS3, ali to vas
ne treba da brine. Apsolutno nije bitno šta spadau CSS, a šta u CSS3.

CSS3 je samo skup dodatnih stilova koje se nadovezuju na CSS.

U ovoj lekciji nabrojaćemo vam neke nove stilove, kako se i gde se koriste, jer bi trebalo do
sad da bude jasna forma pisanja CSS koda, tačnije selektor{ css }.

Ono što je bitno napomenuti da neki stilovi nisu podržani u svim

pretraživačima.
Pa su im potrebni određeni prefiksi:

 -webkit- Safari, Chrome,

 -ms- Internet Explorer,
 -o- Opera,
 -khtml- Konqueror,
 -moz- Mozilla Firefox.
Međutim, većina pregledača radi na tome da standarizuje sve stilove. Mi ćemo u
narednom nivou raditi SASS kako bismo bili 100% sigurni da će nam stilovi
biti primenjeni onako kako želimo na većini pretraživača, tako da vas nećemo zamarati
sad da koristite ove prefikse, jer ih je stvarno naporno kuckati.

 border-radius – služi nam da zaoblimo ivice nekog elementa, vrednosti su mu u

jedinicama koje smo radili (px, %). Ukoliko stavite vrednost na 50%, dobićete potpuno
okrugli element. Isprobajte ovaj stil na strani gde imate slike img{ border-radius: 50%

 background: linear-gradient( pravac, boja1, boja2, ... ); - preporuka da koristite ovaj alat
ili neki sličan za generisanje ovakvih pozadina, jer ih nije jednostavno pisati iz
glave: Gradient Generator

 text-overflow: clip | ellipsis; - sakriva nam tekst ukoliko je izvan okvira; koristi se
sa white-space: nowrap; i podešenom širinom width: VREDNOSTpx;

 break-word: normal| break-word; - prelama reč ukoliko je predugačka

 word-break: normal | break-all | keep-all; - prelamanje linija za tekst

 box-shadow: offset-x offset-y blur-radius boja; - vrlo interesantna opcija koju možete na
boksove dodavati, isto preporučujemo generator: Border Radius

 text-shadow – isto kao box-shadow samo se primenjuje na slova u tekstu

 transform – služi nam da zumiramo, rotiramo, menjamo pogled na element i još svašta
nešto u 2D ili 3D obliku, takođe preporučujemo neko od onlajn alata: CSS Transform
Generator, CSS 3D Transform

 transitions – neophodan stil kada radite sa :hover efektom, jer mu pomoću ove opcije
postavljate da se polako izvršava i bude prijatnije za korisnika, takođe preporučujemo
generator CSS3 Generator (na ovom imate više, pa može da Vam posluži)

 animations – animirajte element (na primer, da vam se vrti ili pomera non-stop i slično)
- CSS Animate

 box-sizing: border-box; - pomoću ovoga definišemo da nam element ima zadatu širinu
(da se ne sabira border i padding).

Ovih nekoliko stilova koje vam nismo pojasnili je neophodno da isprobate sa

navedenim generatorima ili da pronađete neki odgovarajući.
 CSS3 – Flexbox

Flexboxsmo ostavili za kraj ovog dela, jer bismo želeli da Vam ga objasnimo što je bolje
moguće. Pomoću njega možete kroz nekoliko minuta doći do željenog rasporeda svih
elemenata na strani.

Za početak je potrebno da imate neki glavni element i u njega ugnežđene ostale:

<div class="kolona-3">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Zatim ćemo u CSS otkucati sledeće:

.kolona-3{
display: flex;
}

I možete primetiti da su se elementi koji su unutar div .kolona-3 poređali jedan pored
drugog. E sad na red dolaze stilovi koji idu uz display: flex; i pišu se kao stil za div.kolona-
3.

Da odredimo pravac kojim ćemo ređati elemente:

flex-direction: row | row-reverse | column | column-reverse;

Da li će elementi prelaziti u nov red, ukoliko je širina zauzeta (korisni kod responsive
dizajna) preporučujemo da odaberete vrednost wrap, jer vam je ona verovatno potrebna:

flex-wrap: nowrap | wrap | wrap-reverse;

Da odaberete kako će vam elemeti biti poređani po x osi (isrobajte sve vrednosti):

justify-content: flex-start | flex-end | center | space-between | space-around;

Da odaberete kako će vam elementi biti raspoređeni po y osi (isprobajte sve vrednosti):

align-items: flex-start | flex-end | center | baseline | stretch;

Da odaberete kako će vam elementi biti raspoređeni u okviru roditelja u ovom

slučaju div.kolona-3 elementa po y osi (suprotno od justify-content):

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Pored gornjih opcija, imamo opcije i za elemente koji su deca onog gde smo
postavili display: flex; u ovom slučaju su to tri div elementa, a opcije su:

Određujemo redosled prikaza elementa (manji broj se pre prikazuje), pa možete staviti da
se drugi div prikazuje pre prvog i slično:

order: <vrednost>;

Određujemo koliki prostor će nam element zauzeti u redu (veći broj - veći prostor):

flex: <vrednost>;

Vrednosti kod flex i order moraju biti celobrojne.

Da izdvojimo jedan element od ostalih:

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Sad je pitanje kako to u praksi primeniti. :) Pa evo, primera kako napraviti neki raspored za
vašu stranicu: