Visoka škola za uslužni biznis

SEMINARSKI RAD

Predmet: Web dizajn

Tema: CSS i primjena

Profesor Student
Sadržaj
UVOD.................................................................................................................................3
O CSS-u.............................................................................................................................4
Razvoj CSS-a.................................................................................................................5
CSS – primjena...............................................................................................................6
Zaključak............................................................................................................................8
Literatura............................................................................................................................9

2
 UVOD

CSS je tehnologija za formatiranje web stranica. CSS predstavlja jezik kojim se

stilizuje HTML dokument. Ova tehnologija omogućava web stranicama da budu uređene
i korisnički prihvatljive. CSS može da postavlja boje elemenata, pozadine, mijenja
raspored elemenata na stranici itd.

Postoji više verzija CSS-a. Svaka od njih se nadograđivala na predhodnu i pružala

nove mogućnosti. Do sada su izašle verzije CSS1, CSS2, CSS3 i CSS4. Verzija CSS4
ne postoji sama po sebi, ali postoji odredjeni broj modula četvrtog stepena pa se zbog
toga i ona pominje kada se govori o verzijama CSS-a.

3
 O CSS-u

CSS predstavlja jezik kojim opisujemo izgled i formatiramo dokumente napisane

pomoću markup jezika (npr. HTML, XML i SVG dokumenti). Osmišljen je primarno kako
bi se napravila separacija izgleda od sadržaja samog dokumenta te kako bi se
omogućila bolja fleksibilnost, snalaženje unutar dokumenta i kontrola izgleda
dokumenta.

CSS je skraćenica za Cascading Style Sheets. Pojam style sheet često se

upotrebljava za datoteku koja sadrži CSS-kod. Style sheet je datoteka koja definiše stil,
odnosno izgled web-stranice. CSS je napravljen od strane W3C institucije kako bi se
izbjegla poplava HTML tagova za uređivanje unutar dokumenta, a kako bi se HTML
dokument orjentisao na sadržaj.

Prije nego što se pojavio CSS, oblikovanje izgleda web-stranice do određenog

stepena bilo je moguće postići i u HTML-u, ali se time stvorio problem miješanja
sadržaja i strukture s kodom čija je jedina svrha bila prezentacija.

Glavna ideja CSS-a je odvajanje prezentacijskog koda u posebne datoteke i njegovo

definisanje pomoću jednostavnih pravila koja se mogu odnositi na više elemenata
odjednom. CSS olakšava i ubrzava uređivanje web stranica (sadržaj stranica odvojen od
uređivanja stila) i kvalitativno doprinosi boljem dizajnu web stranica (dosljednost u
načinu prikaza naslova, podnaslova, linkova i dr.), što omogućava bolju preglednost
stranica, lakše snalaženje korisniku i estetski bolji ugođaj.

4
Razvoj CSS-a

CSS je prvi predložio Hakon Wium Lie 10. septembra 1994. godine, a CSS1 je postao
preporuka W3C konzorcija dvije godine kasnije, u decembru 1996. Njime su se mogli
odrediti fontovi, boje teksta i pozadine, razmak između riječi, slova i linija teksta,
pozicioniranje teksta, slika i tablica, margine, border (rubovi, okviri). Tek tri godine
kasnije kreiran je prvi preglednik koji je gotovo u potpunosti podržavao tu verziju.

CSS2 kreiran je 4. novembra 1997., a trebao je biti rješenje za mnoge probleme s

kojima se suočavao CSS1. On je postao preporuka u maju sljedeće godine. U ovoj
verziji uvedene su opcije poput apsolutnog i relativnog pozicioniranja kao i z-index (z os
koordinatnog sistema) i sjene na tekstu. Te iste godine je počeo rad na trećoj verziji
CSS-a, koja se i danas koristi.

CSS 3 je donio neke dugo-očekivane novosti, poput zaobljenih rubova, sjena,

gradijenata, prijelaza ili animacija. Također su s njim došli i novi rasporedi, poput
rasporeda u više stupaca (engl. multi-column layout) i rasporeda fleksibilne kutije (engl.
flexible box module, odnosno flexbox). Raspored u više stupaca proširuje raspored u
bloku kako bi olakšao čitanje dugih redova

Svaki modul dodaje nove mogućnosti ili unapređuje staru verziju odvojeno od ostalih,
tako da svaki modul ima drugačiju stabilnost i status. Trenutno ima preko pedeset
modula koji su objavljeni od strane CSS grupe, ali samo četiri imaju formalnu
preporuku. Neki moduli poput Pozadina i okvira kandidati su za preporuku te se stoga
smatraju stabilnima.

Ne postoji potpuna verzija CSS4 pošto je svaki modul postepeno i odvojeno razvijen,
ali postoje moduli koji su već na četvrtom stepenu razvoja. Iako samostojeća verzija
CSS4 neće biti objavljena niti postati preporuka, svi moduli koji su na četvrtom nivou

kolektivno se nazivaju CSS4 modulima.

5
CSS – primjena

CSS-kod se sastoji od CSS-pravila. Primjera jednog jednostavnog CSS-pravila: p

{ color: red; } - ovo pravilo postavlja svim p elementima boju teksta na crvenu. Dio
pravila koje određuje (odnosno selektuje) elemente na koje se pravilo odnosi zove se
selektor. Svako pravilo moramo započeti selektorom, a najjednostavniji selektor je
upravo naziv elementa: p { } , a nakon selektora dolaze vitičaste zagrade.

CSS nije osjetljiv na prazan prostor pa vitičaste zagrade nije obavezno pisati u
posebnim redovima, ali se to preporučuje radi čitljivosti. Unutar vitičastih zagrada
najprije se navodi svojstvo koje se postavlja. U ovom primjeru radi se o boji teksta (CSS-
svojstvo color): p { color: } Nakon što se navede svojstvo koje se želi postaviti, dolazi
dvotočka, a iza nje vrijednost na koju se postavlja to svojstvo (u ovom primjeru radi se o
nazivu boje): p { color: red; } Svojstvo i vrijednost zajedno čine deklaraciju. Unutar
jednog pravila može biti više deklaracija, npr.: p { color: red; font-size: 12px; }

Deklaracije obavezno moramo razdvojiti pomoću tačke sa zarezom, a poželjno je

svaku deklaraciju pisati u novom redu. Iza posljednje deklaracije u CSS-pravilu nije
obavezno navesti tačku sa zarezom, ali se to ipak preporučuje (radi eventualnog
naknadnog dodavanja novih deklaracija unutar istog pravila).

CSS je moguće koristiti na tri različita načina:

1. Eksterna upotreba
2. Interna upotreba
3. Inline upotreba

6
Externa upotreba podrazumijeva da se CSS stilovi spremaju u eksterni CSS dokument.
Externi CSS dokument se sprema pod extenzijom .css. Kada koristimo eksterni CSS
dokument, moramo ga povezati sa HTML dokumentom. Ovaj način ima prednost nad
ostalim, jer omogućava da HTML dokument bude pregledniji. Da bi koristili eksterni CSS
dokument, moramo ga povezati sa HTML dokumentom. Povezivanje se izvršava HTML
elementom <link>, koji se smješta u zaglavlje. Primjer:

<link rel="stylesheet" type="text/css" href="css-fajl.css">

U atribut href se upisuje lokacija CSS dokumenta.

Interna upotreba podrazumijeva da CSS stilovi budu spremljani u HTML dokumentu.

CSS stilovi se smještaju u zaglavlje (head) HTML dokumenta, unutar elementa <style>.

Primjer:

<head><style>p {font-family: arial; }h1 {color: blue;} </style></head>

Inline upotreba podrazumijeva da se CSS stilovi pišu unutar pojedninih elemenata.

Inline stilovi mogu biti korisni ako želimo definisati jednistven stil za neki element, (npr.
određenu boju). Da bi ubacili inline stil, u početnom tagu dodamo atribut style i tu
pišemo CSS stilove. Primjer paragrafa sa inline upotrebom:

<p style ="color: red; font-family: arial;">

7
 Zaključak

U obom radu bavili smo se CSS tehnologijom I njenom primjenom. Css

tehnologija predstavlja jezik kojim opisujemo izgled i formatiramo dokumente napisane
pomoću markup jezika,a ssmišljena je primarno kako bi se napravila separacija izgleda
od sadržaja samog dokumenta te kako bi se omogućila bolja fleksibilnost, snalaženje
unutar dokumenta i kontrola izgleda dokumenta.

CSS je moguće upotrijebiti na tri različita načina, a to su: eksterna upotreba interna
upotreba i Inline upotreba. Externa upotreba podrazumijeva da se CSS stilovi spremaju
u eksterni CSS dokument. Interna upotreba podrazumijeva da CSS stilovi budu
spremljani u HTML dokumentu, a Inline upotreba podrazumijeva da se CSS stilovi pišu
unutar pojedninih elemenata.

Danas se koristi treća verzija CSS-a, a za CSS4 ne postoji potpuna verzija pošto je
svaki modul postepeno i odvojeno razvijen, ali postoje moduli koji su već na četvrtom
stepenu razvoja. Iako samostojeća verzija CSS4 neće biti objavljena niti postati

preporuka, svi moduli koji su na četvrtom nivou kolektivno se nazivaju CSS4 modulima .

8
 Literatura

1. E. Mujadžević, Uvod u CSS, Zagreb, 2014.

2. A. Prelec, Izrada responzivne internetske stranice upotrebom HTML5 I CSS3
tehnologija, Zagreb, 2015.
3. https://nedschooldevelopers.com/CSS/CSS.php preuzeto 06.04.2021.