Css Tvolaric PDF

1
Vjebe iz kolegija Raunalni praktikum 2"
OSNOVE CSS-A
Mostar, 2010/11
Tomislav Volari
volaric.tomislav@gmail.com
Sadraj
2
CSS
Elementi CSS-a
HTML elementi za primjenu stilova
Svojstva teksta, fontova, pozadine, okvira
Prazan prostor oko elemenata (padding)
Odreivanje margina
Smjetanje sadraja na stranici
Svojstva linkova
Ostala svojstva
CSS
3
CSS = Cascading Style Sheets

odreuju nain na koji e se prikazati elementi HTML-a
stil se primjenjuje na elemente HTML-a
omoguuje razdvajanje oblikovanja od sadraja
ideja je dola iz izdavatva (knjiga i asopisa)
stilovi su opisani "predlocima stilova" (Style Sheets")

CSS definicije stilova mogu biti:
ukljuene u HTML dokument

navedene u posebnoj datoteci s opisima stilova
tekstualna datoteka s ekstenzijom .css
moe se kreirati u tekstualnom editoru ili u posebnim editorima za formiranje

stilova
CSS specifikacije
4
CSS 1 1996
osnovno formatiranje elemenata
veina preglednika podrava ovaj standard
CSS 2 - 1998
pozicioniranje elemenata
preglednici podravaju dio specifikacije
CSS 3 u razvoju
specifikacija e se (najvjerojatnije) razdvojiti na vie

specijaliziranih
problem nekonzistentne podrke u razliitim

preglednicima
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)
HTML dokument
5
Elementi CSS-a
6
selector {property: value}
viestruka svojstva i vrijednosti razdvajaju se znakom toke zareza
selector {property: value; property: value}

7
1.
selector - osnovni element CSS-a koji definira izgled svih

elemenata na koje je primjenjen (odgovarajui izgled)
defaultni selectori - svaki element HTML-a ima odgovarajui selector

(tijelo dokumenta=body, odlomak=p, tablica=table, redak tablice=tr,...)
class selectori - za opis razreda
ime im je jednako oznaci HTML-a bez trokutastih zagrada (npr. element

<body> ima selector body)
imenuju se s tokom ispred imena (npr .moj_selector )
isti stil se primjenjuje na vie elemenata istog razreda
id selectori - za opis pojedine instance
imenuju se s oznakom "hash" ispred imena (npr #moj_selector )

stil se primjenjuje samo na jedan element
body {color: red; font-size: 24px}

8
2. property - opisuje odgovarajue svojstva elemenata
npr. boju pozadine, fontove, okvir, horizontalno

poravnanje,...
paralela s atributima HTML elemenata
navode se unutar vitiastih zagrada s znakom dvotoke
iza naziva
izuzetak je kod linijskog stila gdje se ne omeuju vitiastim

zagradama ve znakovima navodnika
iza dvotoke se navodi pridruena vrijednost
body {color: red ; font-size:

24px}

9
3. value - vrijednost odgovarajueg svojstva
paralela s vrijednosti atributa u HTML-u

npr. property color definira boju fonta. Vrijednost red
oznaava da e se odgovarajui font prikazati crvenom
bojom
navode se iza znaka dvotoke

ako se vrijednost sastoji od vie rijei potrebno ih je navesti unutar
navodnika
body {color: red ; font-size: 24px}
izmeu vrijednosti i mjerne jedinice ne smije se ostavljati razmak
Primjena selectora
10
Grupiranje
Formatira istim stilom sve navedene elemente
p, h1, h3, .proljece, #zeleno { color:green }
Klase odreenih elemenata
formatira samo one element s odreenom vrijednou class atrributa
h1.zeleno, h3.dolje { color: red}
Instance odreenih elemenata
formatira samo one element s odreenom vrijednou id atributa
h1#prvi, h3#zadnji { color: blue }
Kontekstualni selektori
formatira samo ugnjeene element po zadanoj hijerarhiji
td strong {color: red} ;

p strong {color: green}
Tipovi CSS-a
11
1. stilovi koji se primjenjuju na 1 element
linijski predloci (inline style sheets)
2. stilovi koji se primjenjuju na 1 dokument
umetnuti predloci (embedded style sheets)
stilovi se definiraju u zaglavlju HTML dokumenta
3. stilovi koji se primjenjuju na vie dokumenata
vezani predloci (linked style sheets)
stilovi se definiraju u posebnom css dokumentu
uvezeni predloci (imported style sheets)
stilovi se definiraju u posebnom css dokumentu

mogu se navesti unutar HTML ili css dokumenta
Linijski predloci (eng. inline)

12
primjenjuju se na 1 element
koristi se style atribut odgovarajueg elementa HTMLa
svojstva i vrijednosti su vrijednost style atributa i
navode se pod navodnim znakovima
<p style="color: red; font-style: italic;">
imaju najvii prioritet kod primjene

nedostatak: uz svaki element moraju se navoditi sva
svojstva i vrijednosti
Umetnuti predloci (eng. embedded)

13
primjenjuju se na itav dokument

koristi se HTML <style> element u zaglavlju
dokumenta
<style type="text/css">
p {
color: navy;
font-size: 12pt;
background-color: yellow;
}
</style>
nedostatak: u svakom HTML dokumentu moraju se

navoditi svi stilovi
Vezani predloci (eng. linked)

14
primjenjuju se na vie dokumenata

stil se navodi u posebnom css dokumentu i vee na vie HTML
dokumenata
koristi se HTML <link> element u zaglavlju dokumenta
<link rel="stylesheet" type="text/css"
href="datoteka_stila.css" />
prednosti:
isti dokument stila vee se uz vie HTML stranica

HTML stranice sa slinim ili istim stilom su puno manje
kod izmjene stila dovoljno je izmijeniti css datoteku s definicijom stila
Uvezeni predloci (eng. imported)

15
Umetnuti predloci koji se primjenjuju na vie dokumenata

stil se navodi u posebnom css dokumentu i vee na vie HTML
dokumenata pomou css naredbe
@import url(ime_css_datoteke.css)
Unutar jednog CSS dokumenta ukljuuje se sadraj drugog
u HTML dokumentu se naredba navodi unutar HTML <style>

elementa u zaglavlju dokumenta
<style>
@import url(p1.css);
</style>
iste prednosti kao kod vezanih predloaka
HTML elementi za primjenu stilova

16
bilo koji HTML element (<p>,<td>,<input />,)

posebni HTML elementi za primjenu stilova
<div></div> blok element
sadraj formatira kao poseban odlomak i odvaja ga prijelazom u novi

red (funkcionira poput <p> elementa)
<span></span> linijski element
koristimo ga kada elimo posebno formatirati sadraj unutar nekog

drugog elementa
ne odvaja sadraj prijelazom u novi red i ne formatira ga kao poseban
odlomak
<div></div> element
17
HTML
<div style="background-color:
red">
<h1>Ovaj dio dokumenta</h1>
<h2>imati e</h2>
<p>crvenu pozadinu</p>
</div>
<p>A ovaj nee.</p>
<span></span> element
18
HTML
<h1>Ovo je normalan naslov</h1>
<p>a ovaj dolje je areni</p>
<h2>
<span style="background-color:
blue">Plavo </span>
red">Crveno </span>
green">Zeleni </span>
</h2>
Komentari u CSS-u
19
Znamo kako postaviti komentare u HTML-u:

komentar <!- Ovo je komentar -->
Komentar u CSS-u:
komentar
/* Ovo je komentar */
HTML dokument
20
Primjeri
21
u primjerima emo koristiti stilove definirane u zaglavlju HTML

dokumenta
HTML dokument je primjer.html
u HTML dokumentu u zaglavlje dodajte style element
<style>
</style>
Formatiranje svojstava teksta

22
kontrolira tekst unutar odgovarajueg elementa (boju,

poravnanje, dekoraciju...).
color - boja teksta
text-align - horizontalno poravnanje teksta
vrijednosti: naziv boje, hex ili rgb oznaka

vrijednosti: left, right, center, justify
text-decoration - dekoracija teksta
vrijednosti: underline, overline, line-through, blink, none
Primjer 1-1
23
Tekst itavog dokumenta emo

prikazati poravnat s obje strane
(justify).
CSS
body {
text-align: justify;
}
U drugom odlomku promijeniti emo
#odlomak2 {
boju teksta u ciglastu (FireBrick),
color: firebrick;
centirati emo ga i podcrtati.
text-decoration: underline;
text-align: center;
Trei odlomak emo poravnati s
}
desne strane.
#odlomak3 {
text-align: right;
}
HTML dokument
24
Formatiranje fontova
25
kontrolira svojstva fonta kojim se prikazuje odgovarajui sadraj
font-family - naziv obitelji ili specifinog fonta
vrijednosti: naziv obitelji ili naziv fonta

5 osnovnih obitelji fontova
serif - fontovi tipa Times (sa ukrasnim zavrecima)
sans-serif - fontovi tipa Arial (bez ukrasnih zavretaka)
monospace - fontovi sa slovima fiksne irine
cursive - fonovi koji simuliraju rukopis
fantasy - fontovi koji ne spadaju u nijednu od skupina
moe se navesti i naziv konkretnog fonta
npr. impact ili
CommercialScript BT
font-family: verdana, arial, sans-serif;
Formatiranje fontova (nastavak)

26
font-size - veliina fonta
font-style - stil fonta
vrijednost - izraena u razliitim mjernim jedinicama (apsolutne:

mm, cm, pt; relativne: em, ex, px,)
vrijednost: italic, normal
font-weight - debljina fonta
vrijednost: bold, bolder, lighter, normal,...
Primjer 1-2
27
Staviti emo da font itavog

dokumenta bude verdana.
CSS
Promijeniti emo naslov razine 1

da se prikazuje plavom bojom,
podebljano, fontom veliine 2
puta vee od veliine
standardnog fonta.
body {
font-family: verdana;
}
h1 {
font-size: 2em;
font-weight: bold;
color: blue;
}
#odlomak3 {
font-style: italic;
}
Trei odlomak prikazati emo

nakoeno.
HTML dokument
28
Formatiranje pozadine
29
kontrolira pozadinu odgovarajueg elementa
background-color - boja pozadine
vrijednosti:
background-image - slika na pozadini
vrijednosti: url(slika) npr.

url(http://www.timdizajn.com/praktikum/slike/pozadina.jpg)
background-repeat - ponavljanje slike
naziv boje (npr. red, blue, green,...)

hex oznaka (npr. #FF0000, #0000FF, #00FF00)
rgb oznaka (npr. rgb(255,0,0),...)
vrijednosti: repeat, repeat-x, repeat-y, no-repeat
background-attachment - hoe li se slika pomicati kako

se pomie stranica
vrijednosti: scroll, fixed
Primjer 1-3
30
U dokumentu staviti emo sliku

kao pozadinu sliku
"pozadina.jpg" koja se ne
pomie zajedno sa stranicom
U treem odlomku promijeniti

emo boju pozadine u
"pranjavo-plavu"
(powderblue).
CSS
body {
background-image:
url(http://www.timdizajn.com/praktik
um/slike/pozadina.jpg);
background-attachment: fixed;
}
#odlomak3 {
background-color:powderblue;
}
HTML dokument
31
CSS box model

32
Omota oko HTML elemenata

Sastoji se od
Margine
(margin)
Okvira (border)
Razmaka izmeu
sadraja i okvira
(padding)
Veliina elementa
33
Kod oblikovanja sadraja odreujete irinu i visinu sadraja (HTML

elementa)
Veliina elementa osim veliine sadraja ukljuuje i veliinu elemenata
ukljuenih u box model (margine, okvira i razmaka izmeu sadraja i okvira)
Npr. ukupna irina elementa na slici je 300px
irina sadraja:250px;
razmak: 10px;
okvir:5px
margina:10px;
Izraun veliine elementa:
250px (irina sadraja)

+ 20px (razmak s lijeve i desne strane)
+ 10px (lijevi i desni okvir)
+ 20px (lijeva i desna margina)
= 300px
Svojstva okvira
34
kontroliraju svojstva okvira kojim se uokviruje odgovarajui sadraj
border-width - debljina okvira
border-style - nain na koji je iscrtan okvir
vrijednosti: solid, dashed, dotted, inset, outset, ridge, groove, double
border-color - boja okvira
vrijednosti: thin, medium, thick ili debljina u px
vrijednosti: naziv boje, rgb ili hex oznaka
mogue je baratati pojedinano sa svojstvima svake strane okvira

border-[top|bottom|right|left]-[style|color|width]
sva svojstva okvira odjednom
border: width style color;
Npr. border: thin solid red;
Primjer 1-4
35
Drugi odlomak uokviriti emo

punim, tankim okvirom. Boja
okvira s lijeve i donje strane biti
e bijela, a s desne i gornje
crna.
Trei odlomak uokviriti emo
debelim, izboenim (inset)
okvirom zelene boje
CSS
#odlomak2 {
border-style: solid;
border-width: thin;
border-left-color: white;
border-right-color: black;
border-top-color: black;
border-bottom-color: white;
}
#odlomak3 {
border: thick inset green;
}
HTML dokument
36
Razmak (padding)
37
odreuje se veliina praznog prostora oko sadraja

elementa
padding - prostor na sve 4 strane
padding-top - prostor s gornje strane
padding-right - prostor s desne strane
padding-bottom - prostor s donje strane
padding-left - prostor s lijeve strane
vrijednost: veliina u odgovarajuoj mjernoj jedinici (mm, cm,

px, em,...)
sva veliina razmaka odjednom
padding: top right bottom left;
Primjer 2-1
38
Prostor oko sadraja

treeg odlomka sa svih
strana je 15 piksela
CSS
#odlomak3 {
padding: 15px;
}
HTML dokument
39
Odreivanje margina
40
margine odreuju udaljenost sadraja od ruba

nadreenog objekta
margin - sve 4 margine
margin-top - gornja margina
margin-right - desna margina
margin-bottom - donja margina
margin-left - lijeva margina
vrijednost: veliina u odgovarajuoj mjernoj jedinici (mm, cm, px, em,...) ili
auto
sva margine odjednom
margin: top right bottom left;
Primjer 2-2
41
naslov emo odmaknuti

za 2 znaka od gornje
margine;
drugi odlomak uvui
emo za 4 znaka u
desnu stranu, a trei za
8 znakova.
CSS
h1 {
margin-top: 2em;
}
#odlomak2 {
margin-left: 4em;
}
#odlomak3 {
margin-left: 8em;
}
HTML dokument
42
Pozicioniranje elemenata
43
mogue je odrediti horizontalni smjetaj

elementa unutar nadreenog
float
vrijednost:
left, right, none

prilikom koritenja pozicioniranja pomou float,
obavezno je navesti irinu elementa (width)
Korisno npr. za pozicioniranje slike unutar

bloka teksta
Primjer 2-3
44
sliku emo pozicionirati

desno unutar bloka
teksta
CSS
img {
float: right;
}
HTML
<p>
<img src="logocss.gif" width="95" height="84" />
Ovo je neki tekst. Ovo je neki tekst
</p>
HTML dokument
45
Primjer sa w3schools.com
http://www.w3schools.com/css/pr
_class_float.asp
Pozicioniranje elemenata na stranici

46
sadraj svakog elementa moe se smjestiti na

odreenu poziciju na stranici
- udaljenost od dna stranice
left - udaljenost od lijeve stranice
right - udaljenost od desnog ruba stranice
top - udaljenost od vrha stranice
width - irina sadraja
position - vrsta pozicije
bottom
vrijednosti:
relative, absolute, fixed,
Vrste pozicija
47
relative - element se smjeta u odnosu na poziciju na

koju bi bio smjeten uobiajeno (bez posebnog
pozicioniranja)
npr.
left: 20px dodaje 20 px na poziciju na koju bi

bio uobiajeno pozicioniran
Vrste pozicija
48
absolute - element se smjeta u odnosu na svog "roditelja"

(nadreeni element)
fixed - element se smjeta u odnosu na prozor preglednika
dananji preglednici jo uvijek u potpunosti ne podravaju ovakav nain

pozicioniranja
IE8 i Chrome, Firefox 4 djelomino podravaju takav nain
Slojevi (Layers)
49
Uobiajen nain stvaranja neovisnih dijelova web

stranice
Sadraj se uokviri unutar div elementa
Svojstvo z-indeks odreuje poziciju bloka u stogu (to je broj
vei, to je blie vrhu)
Primjer 2-4a
50
Napraviti emo stranicu s

2 bloka testa koji se
djelomino preklapaju
HTML
<body>
<div id="sloj2">
Ubrzo ce 2 kolokvij,
jesam li naucio css
?...
</div>
<div id="sloj1">
Racunlni praktikum 2
...
</div>
</body>
CSS
#sloj1 {
position: absolute;
left: 200px;
top: 30px;
height: 180px;
width: 290px;
padding: 1em;
background-color:#FFFFCC;
z-index: 1;
}
#sloj2 {
position: absolute;
left: 460px;
top: 100px;
height: 250px;
width: 300px;
padding: 1em;
background-color:silver;
z-index: 2;
}
div {
border-style:solid;
border-color:blue;}
51
Svojstva linkova
52
posebni "pseudo selectori" za prikaz stanja u

kojem se nalazi link
1. a:link - stil linka koji nije posjeen (obian link)
2. a:visited - stil posjeenog linka
3. a:hover - stil linka iznad kojeg se nalazi mi
4. a:active - stil linka koji je zadnji izabran
vaan je redoslijed navoenja pseudo selectora

koji mora biti
link->visited-> hover-> active
Primjer 2-5
53
Neposjeene linkove prikazati emo

zelenim slovima, posjeene crvenim,
aktivni linkovi biti e prikazani utim
slovima na smeoj pozadini, a aktivni
link iznad kojeg se nalazi mi bijelim
slovima na zelenoj pozadini.
CSS
a:link { color: green; }
a:visited { color: red; }
a:hover {
background-color: green;
color: white;
}
a:active {
background-color: brown;
color: yellow;
}
HTML dokument
54
Primjer 2-6
55
Koritenjem neporedane liste napraviti

emo izbornik.
Linkovi e biti prikazani bijelim
slovima na zelenoj pozadini. Aktivni
link iznad kojeg se nalazi mi biti e
prikazan bijelim slovima na crvenoj
pozadini.
CSS
ul {
list-style-type: none;
}
li {
margin-left: .2em;
width: 8em;
}
a {
display: block;
color: white;
background-color: green;
text-decoration: none;
}
a:hover
{
background-color: red;
color: white;
}
HTML dokument
56
Ostala svojstva
57
list-style-type svojstva oznake elementa liste
cursor - izgled cursora kada se pozicionira iznad elementa
vrijednosti: crosshair, default, pointer, move, e-resize, ne-resize, nw-resize,

n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help
display - nain na koji se element prikazuje
vrijednosti kod neporedane liste: disc, circle, square

vrijednosti kod poredane liste: decimal, lower-roman, upper-roman, loweralpha, upper-alpha
vrijednost kada se ele elementi bez oznaka: none
vrijednosti: none, inline, block
visibility - da li e element biti vidljiv ili ne
vrijednosti: visible, hidden
Literatura
58
Vodii kroz CSS
Popis svih CSS elemenata i svojstava
http://www.blooberry.com/indexdot/css/propindex/all.htm
Specifikacija boja
http://www.w3schools.com/css/
http://www.w3.org/MarkUp/Guide/Style.html
http://www.w3.org/Style/CSS/learning
http://www.westciv.com/style_master/academy/css_tutorial/
http://www.thenoodleincident.com/
http://gallery.theopalgroup.com/selectoracle/
http://www.w3schools.com/css/css_colors.asp
CSS specifikacije
http://www.w3.org/TR/REC-CSS2
Zadatak 1
59
font itavog
dokumenta neka
bude Arial,
naslov prikaite
podcrtano, boldano,
veliine 3 puta vee
od veliine
standardnog fonta,
na utoj pozadini
odlomci neka budu
poravnati s obje
strane
Zadatak 2
60
Koritenjem linijskih HTML

elemenata i selektora za opis
razreda na HTML stranici iz
prethodnog zadatka oznaite rije
HTML da stranica izgleda ovako
Zadatak 3
61
Tablicu formatirajte na slijedei nain:
svi fontovi neka budu tipa Verdana

zaglavlje neka bude prikazano
bijelim slovima na zelenoj pozadini
prvi i trei redak neka budu na utoj
pozadini (yellow), a drugi na srebrnoj
(silver).
okvir svih elija neka bude plave boje
(blue) istokan (dotted) -
/prethodno iz HTMLa uklonite atribut

debljine okvira!/
Zadatak 4
62
Stranicu formatirajte pomou CSSa. Slika za oznaku liste nalazi se na adresi:

http://www.timdizajn.com/praktikum/slike/tocka.png
Slika kompota nalazi se na adresi http://www.timdizajn.com/praktikum/slike/kompot.jpg
Zadatak 5
63
Stranicu iz 1 zadatka
"Osnove CSSa 1. dio"
formatirajte na nain
da:
tekst bude
podijeljen u 2
odlomka
prvi odlomak
odmaknite od lijeve
margine 20%
drugi odlomak
odmaknite od desne
margine 30%
Zadatak 6
64
Tablica irine 50% stranice,

centrirana, obrub irine 1px,
zelene boje, font:Tahoma,
boja pozadine uta, tekst
centriran.
Boja pozadine zaglavlja:
#ffff00, veliina teksta16,
boja teksta: zelena.
Boja pozadine elija:
#9acd32, veliina teksta
14, boja teksta: crna.
Postaviti da nema razmaka
oko sadraja elija.
Sve elemente stranice zadati
u istom dokumentu u obliku
Internal Style Sheet CSS-a.
Zadatak 7
65
Formatirajte
stranicu s
zaglavljem i 2
stupca.
Prvi stupac
zauzima 60%
ukupne irine
stranice, a drugi
preostali dio.
Zadatak 8
66
Pomou poredane liste napravite

izbornik koji e mijenjati boju
pozadine kada se kursor nalazi
iznad njega.
Boju e promijeniti iz modre (navy) u
crvenu (red).
Linkovi neka vode na stranice
proizvoaa preglednika:
http://www.microsoft.com/
http://www.mozilla.org/
http://www.opera.com/
http://linx.browser.org/
Zadatak 9
67
Izbornik iz prethodnog zadatka napravite da bude horizontalni.
Zadatak 10
Formatirajte ivotopis pomou CSSa, bez tablica.
68
69

Css Tvolaric PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Tvolaric PDF

Uploaded by

Copyright:

Available Formats

1

Vjebe iz kolegija Raunalni praktikum 2"

CSS = Cascading Style Sheets

ideja je dola iz izdavatva (knjiga i asopisa)

stilovi su opisani "predlocima stilova" (Style Sheets")

ukljuene u HTML dokument

tekstualna datoteka s ekstenzijom .css

moe se kreirati u tekstualnom editoru ili u posebnim editorima za formiranje

specifikacija e se (najvjerojatnije) razdvojiti na vie

problem nekonzistentne podrke u razliitim

selector {property: value}

viestruka svojstva i vrijednosti razdvajaju se znakom toke zareza

selector {property: value; property: value}

selector {property: value}

selector - osnovni element CSS-a koji definira izgled svih

defaultni selectori - svaki element HTML-a ima odgovarajui selector

class selectori - za opis razreda

ime im je jednako oznaci HTML-a bez trokutastih zagrada (npr. element

id selectori - za opis pojedine instance

imenuju se s oznakom "hash" ispred imena (npr #moj_selector )

body {color: red; font-size: 24px}

selector {property: value}

2. property - opisuje odgovarajue svojstva elemenata

npr. boju pozadine, fontove, okvir, horizontalno

izuzetak je kod linijskog stila gdje se ne omeuju vitiastim

iza dvotoke se navodi pridruena vrijednost

body {color: red ; font-size:

selector {property: value}

3. value - vrijednost odgovarajueg svojstva

paralela s vrijednosti atributa u HTML-u

navode se iza znaka dvotoke

body {color: red ; font-size: 24px}

izmeu vrijednosti i mjerne jedinice ne smije se ostavljati razmak

Formatira istim stilom sve navedene elemente

p, h1, h3, .proljece, #zeleno { color:green }

Klase odreenih elemenata

formatira samo one element s odreenom vrijednou class atrributa

h1.zeleno, h3.dolje { color: red}

Instance odreenih elemenata

formatira samo one element s odreenom vrijednou id atributa

h1#prvi, h3#zadnji { color: blue }

formatira samo ugnjeene element po zadanoj hijerarhiji

td strong {color: red} ;

1. stilovi koji se primjenjuju na 1 element

linijski predloci (inline style sheets)

2. stilovi koji se primjenjuju na 1 dokument

umetnuti predloci (embedded style sheets)

stilovi se definiraju u zaglavlju HTML dokumenta

3. stilovi koji se primjenjuju na vie dokumenata

vezani predloci (linked style sheets)

stilovi se definiraju u posebnom css dokumentu

uvezeni predloci (imported style sheets)

stilovi se definiraju u posebnom css dokumentu

Linijski predloci (eng. inline)

imaju najvii prioritet kod primjene

Umetnuti predloci (eng. embedded)

primjenjuju se na itav dokument

nedostatak: u svakom HTML dokumentu moraju se

Vezani predloci (eng. linked)

primjenjuju se na vie dokumenata

isti dokument stila vee se uz vie HTML stranica

kod izmjene stila dovoljno je izmijeniti css datoteku s definicijom stila

Uvezeni predloci (eng. imported)