Priručnik za CSS

Općenito u dokumentu <udaljenost> se odnosi na vrijednost u mjernoj jedinici kao što su px, em,
rem, vh, vw, % i tako dalje, a <boja> se odnosi na boju u bilo kojoj notaciji, kao na primjer
#000000 ili rgb(255,255,255).

Povezivanje vanjske CSS datoteke

<link rel="stylesheet" href="/path/to/file.css">
Povezuje vanjsku datoteku sa CSS stilovima koja se nalazi na putanji /path/to/file.css

CSS selektori
Selektori se koriste kako bi znali na koji html element ili skup elemenata želimo primijeniti dana CSS svojstva.

ime-elementa {}
Odnosi se na sve elemente danog tipa, npr. p {} se odnosi na sve <p></p> elemente.

.ime-klase {}
Odnosi se na sve elemente kojima je dodijeljena klasa ime-klase

#id-elementa {}
Odnosi se na jedan specifičan element kojem je dodijeljen identifikator id-elementa

selektor:pseudo-klasa {}
Pseudo klasa je selektor koji odabire elemente koji su u specifičnom stanju, npr. elemente koji su prvi element
svoga tipa, elementi nad kojima je kursor i slično.

Neke od pseudo klasa su:

 selektor:last-child
Posljednji element u grupi susjednih elemenata danog tipa, npr li:last-child odabire posljednji
element liste.
 selektor:first-child
Prvi element u grupi susjednih elemenata danog tipa, npr. li:first-child odabire prvi element
liste.
 selektor:only-child
Element koji je jedino dijete odnosno nema susjednih elemenata danog tipa.
 selektor:hover
Element danog tipa kada se iznad njega nalazi kursor.
 selektor:nth-child()
Odabire elemente prema tome koji su po redu među susjednim elementima, ovisno o tome što napišemo
među zagradama, npr :nth-child(even) odabire svaki drugi element, :nth-child(2n + 1)
odabire svaki prvi element, a :nth-child(-n + 3) odabire prva 3 elementa.

Tekst
font-family: font1, font2, font3... ;
Koji font želimo koristiti, ako font1 ne postoji browser će potražiti font2 i tako dalje.

font-style: normal | italic | oblique;

Koji stil fonta želimo koristiti.
font-size; <udaljenost>;
Veličinu fonta koju želimo koristiti.

font-weight: normal|bold|lighter|100|200|300|400|500|600|700|800|900;
Postavlja težinu fonta odnosno debljinu slova.

line-height: <udaljenost>;
Visina linije teksta.

font-variant: normal | small-caps;

Uključuje ispis velikih slova manje visine umjesto malih slova.

text-align: left | right | center | justify;

Određuje poravnavanje teksta u roditeljskom elementu.

text-decoration: underline | overline | line-through | none;

Omogućava postavljanje crte ispod iznad ili posred teksta.

text-indent: <udaljenost>;
Postavlja uvlaku prvog retka teksta za danu veličinu.

letter-spacing: <udaljenost>;
Određuje razmak između slova. Vrijednosti mogu biti i negativne, a postavljanje na 0 onemogućuje obostrano
poravnavanje teksta.

word-spacing: <udaljenost>;
Određuje razmak između riječi. Vrijednosti mogu biti i negativne, a postavljanje na 0 onemogućuje obostrano
poravnavanje teksta.

text-transform: none | capitalize | uppercase | lowercase;

Mijenja veličinu slova (velika/mala) u elementu.

text-shadow: <boja> <udaljenost> <udaljenost> <udaljenost>;

dodjeljuje sjenu tekstu u HTML elementu. Svojstvu dodjeljujemo četiri vrijednosti. Prva je boja sjene, druga je
vodoravni pomak, treća je okomiti pomak a četvrta radijus zamućenja.

Boje i pozadine
color: <boja>;
Boja teksta koju želimo koristiti za element.

background-color: <boja>;
Boja pozadine za dani element, ako stavimo svojstvo na body bit će boja pozadine stranice.

background-image: none | url('/path/to/file.png');

Postavljamo sliku kao pozadinu elementa.

background-position: <x-vrijednost> <y-vrijednost>;

Određujemo položaj na kojem će se pozadinska slika pojaviti, gdje je prvi argument x kordinata, a drugi y,
vrijednost koju x argument može poprimiti je top | center | bottom | <udaljenost>, a vrijednost
koju y argument može poprimiti je left | center | right | <udaljenost>
background-repeat: repeat-x | repeat-y | repeat | no-repeat;
Određujemo mogućnost ponavljanja pozadinske slike po x osi, y osi ili oboje. Također možemo i isključiti
ponavljanje slike.

background-attachment: fixed | scroll;

Određujemo hoće li se pozadinska slika pomicati zajedno sa sadržajem stranice ili će biti zamrznuta pri
scrollanju stranice.

Pseudo klase poveznica

Kao što je već spomenuto elementi mogu imati pseudo klase koje vrijede ovisno o sadržaju i položaju elementa.
Neke od pseudo klasa koje se mogu primijeniti na HTML element poveznice <a></a> su:

 a:link
Odnosi se na poveznicu koja nije bila posjećena od strane korisnikovog preglednika.
 a:visited
Odnosi se na poveznicu koja je već bila posjećena od strane korisnikovog preglednika.
 a:hover
Odnosi se na poveznicu iznad koje korisnik drži kursor.
 a:active
Odnosi se na poveznicu na koju je korisnik kliknuo i drži pritisnutu tipku miša.

Stilovi za liste
list-style-image: url('/path/to/file.svg');
Dani stil nam omogućuje da zamijenimo uobičajenu točku u <ul> elementu ili broj u <ol> elementu sa slikom na
danoj putanji.

list-style-position: inside | outside;

Odabiremo želimo li da slika (točka ako ne promjenimo) ili broj koji se navodi ispred <li> elementa bude
izdvojena iz popisa ili dio popisa. Primjer izgleda (zamislite da su crtice točke):

list-style-position: inside; list-style-position: outside;

- ovo je prvi li element - ovo je prvi li element

i drugi redak prvog li elementa i drugi redak prvog li elementa
- ovo je drugi li element - ovo je drugi li element
i drugi redak drugog li elementa i drugi redak drugog li elementa

list-style-type: circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none;
Određuje što će se nalaziti ispred li elemenata, osim navedenih vrijednosti, ovom svojstvu se kao vrijednost
može dati i kod unicode karaktera navedenog u navodincima npr. "\1F44D".
Prikaz elemenata
display: block
inline
list-item
flow
table
flex
grid
none;
Svojstvo display mijenja način na koji je element prikazan na zaslonu. Pa tako postavljanjem svojstva na block
bez obzira kako se taj element zadano prikazuje sada će se prikazati kao block, također ako navedemo none,
element će nestati kao da ne postoji.

Kursor (Pokazivač miša)

cursor: auto
crosshair
default
help
move
pointer
text
url
wait
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
url('/path/to/file.cur');
Određujemo kakav će se pokazivač miša koristiti unutar HTML elementa. Moguće je definirati i putanju do
datoteke koju želimo koristiti kao kursor. Također može se navesti i više od jedne vrste kursora odvojene
zarezom, tako da ako je prvi nedostupan koristiti će se drugi.

Obrubi
border-width: <udaljenost>;
Postavlja debljinu obruba elementa.

border-style: dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid
Postavlja stil obruba elementa. Također vrijednosti koje može poprimiti ovo svojstvo može poprimiti i drugi
argument border, border-top, border-right, border-bottom, border-left svojstava.
border-color: <boja>;
Određujemo boju obruba elementa.

border: <border-width> <border-style> <border-color>;

Postavljamo debljinu, stil i boju obruba jednom naredbom, border-width je vrijednost udaljenosti u bilo
kojoj mjernoj jedinici, border-style je stil obruba (pogledaj border-style svojstvo) i border-color
je boja.

Ako na naziv bilo kojeg od do sada navedenih svojstva za obrube dodamo sufiks -top, -right, -bottom. ili
-left tada će to svojstvo vrijediti samo za tu stranicu obruba elementa. Npr ako postavimo:

border-top: 1px solid red;

Tada će samo gornja stranica elementa dobiti puni obrub debljine 1px crvene boje.

Margin i Padding

Margine se koriste kako bi zauzeli prostor oko

elementa, van granica samog elementa, prostor
koji je zauzet marginom bit će transparentan.

Pomoću padding svojstva definiramo koliko prostora

treba biti između obruba elementa
(border) i njegovog sadržaja (content).

padding: <top> <right> <bottom>

<left>;
Definira padding za svaku od stranica elementa. Vrijednost svakog od argumenata je udaljenost.

padding: <top-bottom> <left-right>;

Istovremeno definira padding za gornju i donju stranicu, te lijevu i desnu stranicu.

padding: <udaljenost>;
Definira padding za sve 4 stranice istovremeno.

padding-top: <udaljenost>;
padding-right: <udaljenost>;
padding-bottom: <udaljenost>;
padding-left: <udaljenost>;
Pomoću ovih svojstava kao i kod obruba možemo definirati padding za svaku stranicu pojedinačno bez izmjene
padding-a za ostale stranice.

margin: <top> <right> <bottom> <left>;

Definira margin za svaku od stranica elementa. Vrijednost svakog od argumenata je udaljenost.

margin: <top-bottom> <left-right>;

Istovremeno definira margin za gornju i donju stranicu, te lijevu i desnu stranicu.
margin: <udaljenost>;
Definira margin za sve 4 stranice istovremeno.

margin-top: <udaljenost>;
margin-right: <udaljenost>;
margin-bottom: <udaljenost>;
margin-left: <udaljenost>;
Pomoću ovih svojstava kao i kod obruba možemo definirati margin za svaku stranicu pojedinačno bez izmjene
margin-a za ostale stranice.

Visina i Širina elementa

width: <udaljenost>;
Odabiremo širinu elementa.

max-width: <udaljenost>;
Odabiremo maksimalnu širinu elementa, npr. ako smo postavili širinu na 50%, a maksimalnu širinu na 500px,
čak i ako 50% bude više od 500px element će biti širok 500px.

min-width: <udaljenost>;
Odabiremo minimalnu širinu elementa, npr. ako smo postavili širinu na 50%, a minimalnu širinu na 500px, čak i
ako 50% bude manje od 500px element će biti širok 500px.

height: <udaljenost>;
Odabiremo širinu elementa.

max-height: <udaljenost>;
Odabiremo maksimalnu visinu elementa, npr. ako smo postavili visinu na 50vh, a maksimalnu visinu na 500px,
čak i ako 50vh bude više od 500px element će biti visok 500px.

min-height: <udaljenost>;
Odabiremo minimalnu visinu elementa, npr. ako smo postavili visinu na 50vh, a minimalnu visinu na 500px, čak
i ako 50vh bude manje od 500px element će biti visok 500px.

Plutanje
float: left | right | none;
Svojstvo float služi promjeni načina na koji su tekst (ili slike) prikazani. Kada dodijelimo
svojstvu vrijednost left ili right tekst (odnosno slika) će biti prikazani uz lijevi odnosno
desni rub roditeljskog elementa. U slučaju da dodijelimo vrijednost svojstvu none ne
će biti promjene u prikazu teksta ili slike.

clear: both | left | right | none;

Svojstvo clear omogućava nadzor nad elementima na koja je postavljeno svojstvo float.
Djelovanje svojstva float možemo poništiti pomoću ovog svojstva. Vrijednost svojstva none ne poništava
djelovanje svojstva float, vrijednosti left i right poništavaju djelovanje samo jednog dodijeljenog svojstva.
Prikaz
display: block | inline | none | inline-block;
Mijenja način prikaza elementa odnosno kako se element ponaša, kada je postavljeno na none element je
uklonjen sa stranice.

visibility: hidden;
Element nestaje sa stranice, odnosno postaje nevidljiv ali i dalje zauzima mjesto i utječe na izgled stranice.

Pozicioniranje
position: static | relative | absolute | fixed;
 static
Element zauzima svoje prirodno mjesto u toku stranice.
 relative
Omogućava pozicioniranje elementa svojstvima left, right, top i bottom, njima mijenjamo
položaj elementa u odnosu na položaj na kojem se element prirodno trebao pojaviti prema toku stranice.
 absolute
Omogućava pozicioniranje elemenata u odnosu na gornji lijevi kut roditeljskog elementa, a roditeljski
element je prvi nadležni element kojem svojstvo position nije postavljeno na static.
 fixed
Pozicionira element kao i absolute, ali u odnosu na gornji lijevi kut prozora preglednika
 sticky
Element će biti pozicioniran na temelju korisničkog pomicanja zaslona. Takav se element prebacuje
između relativnog i fiksnog pozicioniranja ovisno o poziciji zaslona. Pozicioniran je relativno dok ne
dođe do određenog položaja zaslona nakon čega se zalijepi na određeni položaj (kao kod fiksnog
pozicioniranja).

Flexbox
display: flex | inline-flex;
Omogućavamo flex način prikaza elementa, gdje se sa svojstvom flex element ponaša kao blok element dok se
sa svojstvom inline-flex ponaša kao inline blok element.

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

Određuje smjer i poredak elemenata koji se nalaze unutar flex kontejnera, odnosno elementa na kojem smo
svojstvo display postavili na flex. Zapravo ovim svojstvom odabiremo hoće li main os biti stupac ili redak,
što direktno utječe na koje od tog dvoje će se odnositi justify-content (main os) i align-items
(okomito na mail os) svojstva.

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

Određuje hoće li flex kontejner biti ograničen na jedan redak ili će se protezati kroz više redaka. Svojstvo
nowrap će zabraniti prelazak elemenata unutar kontejnera u više redaka, wrap će to omogućiti, a
reverse-wrap će napraviti isto što i wrap, samo što višak elemenata neće preći u redak ispod nego u redak
iznad.
justify-content: flex-start | flex-end | center | space-between |
space-around | space-evenly;
Svojstvo se koristi za odabir rasporeda elemenata na glavnoj osi (main axis) koja je odabrana
flex-direction svojstvom.
 flex-start
Pozicionira elemente na početak kontejnera stisnute jedan do drugoga
 flex-end
Pozicionira elemente na kraj kontejnera stisnute jedan do drugoga
 center
Postavlja elemente u središte kontejnera
 space-between
Elementi popunjavaju prostor od ruba do ruba kontejnera, između njih je ravnomjerno raspoređen prazan
prostor.
 space-around
Svaki element oko sebe ima praznog prostora sa obje strane, prostor je ravnomjerno raspoređen
 space-evenly
Elementi su ravnomjerno raspoređeni na osi

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

Koristi se za odabir rasporeda elemenata na križnoj osi okomitoj na glavnu os. Koristi vrijednosti slične kao
justify-content.
 flex-start
Pozicionira elemente na početak kontejnera
 flex-end
Pozicionira elemente na kraj kontejnera
 center
Postavlja elemente u središte kontejnera
 baseline
Pozicionira elemente u odnosu na baseline sadržaja. Primjer:

 stretch
Razvlači djecu kontejnera do pune širine/visine kontejnera, odnosno elementi zauzimaju sav prostor
križne osi
order: <broj>;
Postavlja se na djecu flex kontejnera. I koristi se za promjenu poretka elemenata unutar kontejnera, na način da
se elementi prikazuju od onih sa manjom order vrijednosti do onih sa većom order vrijednosti. Zadana vrijednost
order svojstva je 0. Ako više elemenata ima istu order vrijednost bit će prikazani prirodnim poretkom html
dokumenta.

gap: <row-gap> <col-gap>;

Određuje minimalni razmak između djece unutar flex kontejnera, odnosno razmak između redaka i razmak
između stupaca. Primjenjuje se samo između djece kontejnera, a ne i na rubovima kontejnera, ako želimo
ostvariti razmak na rubovima možemo koristiti padding.

align-self: <vrijednost>;
Poprima vrijednosti kao i align-items, ali se postavlja na djecu flex kontejnera, omogućuje nam da
postavimo drugačije pozicioniranje na križnoj osi za pojedino dijete. Napomena, ako dijete ima svojstvo
margin postavljeno na auto, vrijednost ovog svojstva će se ignorirati.