Cilj vježbe:

Učenik će razlikovati svrhu i upotrebu HTML-a i CSS-a, moći sintaksno ispravno oblikovati CSS pravilo,
odrediti komponente CSS pravila, objasniti sintaksu CSS pravila, analizirati koji će stil biti primjenjen
na element ovisno o mjestu na kojem je definiran, primijeniti oblikovanja na HTML elemente.

Priprema za vježbu:

Zadatak 1: Što opisujemo pomoću HTML-a, a što pomoću CSS-a?
Odgovor: Pomoću HTML-a opisujemo strukturu web stranice, a pomoću CSS-a izgled elemenata stranica.

Zadatak 2: CSS je kratica za C………. S……. S……..
Odgovor: Cascading Style Sheets

Zadatak 3: Koja je organizacija i zašto stvorila CSS?

Odgovor: CSS je stvorila W3C kako bi poboljšala stvaranje i fleksibilnost sadržaja dodavanjem boja, različitih fontova, stilova...

Zadatak 4: Koji je uobičajeni i preporučeni način spremanja definicija koje opisuju oblikovanje HTML
elemenata i koja je prednost takvog pristupa?

Odgovor: Preporučeno je stvaranje vanjskih CSS datoteka kako bi se uštedilo na prostoru, i na vremenu. Kad imamo vanjske CSS datoteke onda kad ju trebamo ju samo pozovemo u HTML datoteci i to je to. Bez njih bi u svakoj HTML datoteci morali pisati CSS oblikovanja.

Vježba:

Pri traženju odgovora koristite se internet tražilicom.

1. CSS:

CSS je jezik koji koristimo kako bi odredili izgled (stil) HTML dokumenta. CSS opisuje kako će na

ekranu ili drugom mediju biti prikazani HTML elementi sadržani na HTML stranici. CSS može
upravljati izgledom većeg broja stranica mrežnog sjedišta istovremeno. CSS se koristi kako bi
definirali stilove mrežnih stranica uključujući dizajn (oblikovanje), izgled i inačice prikaza za
različite uređaje i veličine ekrana.

Pogledajte i uočite kako različit sadržaj CSS datoteke može prilikom prikaza utjecati na isti HTML

dokument (primjer).

A. CSS sintaksa opisuje kako se pišu CSS pravila. Svako CSS pravilo sastoji se od selektora i
deklaracijskog bloka:

Selektor odabire HTML element koji želimo oblikovati. Deklaracijski blok sadrži jednu ili više deklaracija

odvojenih sa „;“. Svaka deklaracija sadrži ime CSS svojstva i njegovu vrijednost odvojeno sa „:“.

Deklaracijski blokovi ograničeni su vitičastim zagradama. Na koji bi način ovo pravilo oblikovalo sve h1

naslove u dokumentu? Napišite što je u ovom pravilu selektor, koja svojstva ovo pravilo oblikuje i koje

su vrijednosti svojstava koje ovo pravilo definira.

Ovdje je selektor svaki naslov koji je tipa H1, tj. najveći podnaslov. Podnaslov H1 bi bio veličine 12px i plave

boje.

Prema sadržaju (pravilima) CSS-a preglednik će oblikovati HTML dokument. Tri su načina ubacivanja CSS oblikovanja: eksterni ili vanjski, interni ili unutrašnji i inline ili linijski. Pomoću eksternog CSS-a (preporučljivo!) može se mijenjati izgled cijelog mrežnog sjedišta samo sa to jednom datotekom. Pri tom svaka HTML stranica mrežnog sjedišta treba uključivati referencu na tu vanjsku CSS datoteku unutar elementa <link> (u head sekciji), kao npr.:

<head>
<link rel="stylesheet" href="mystyle.css">
</head>

Vanjska CSS datoteka može biti sastavljena pomoću bilo kojeg tekstualnog editora, a mora biti spremljena

sa .css ekstenzijom (proširenjem). Vanjska .css datoteka ne bi smjela sadržavati HTML elemente.
Unutrašnji CSS može se koristiti ako pojedina HTML stranica ima jedinstven (različit) izgled (stil). Taj se

unutrašnji stil definira unutar elementa <style> u head sekciji dokumenta, kao npr.:

   <style>
body {
   background-color: linen;
}
h1 {
   color: green;
   margin-left: 40px;
} <
/style>

Linijski CSS može se koristiti kad se pojedinačnom elementu želi dodijeliti jedinstveni stil. Da bi se koristilo takvo oblikovanje, potrebno je atribut oblikovanja (stila) dodati relevantnom element. Atribut stila pritom

može sadržavati bilo koje CSS svojstvo. Linijska oblikovanja definirana su unutar atributa style relevantnog

elementa, kao npr.: <h1 style="color:blue;text-align:center;">This is a heading</h1> Linijski definirana

oblikovanja ukidaju prednosti korištenja odvojenih oblikovanja jer mješaju sadržaj sa njegovom

prezentacijom, pa je preporuka ovo korisiti samo iznimno.

Višestruki CSS. U slučajevima kada su neka svojstva definirana za isti selector (element) u različitim CSS-ovima, koristi se vrijednost pročitana u posljednjem. Zadatak: Dokažite to primjerom tako da za neki element (naslov, odlomak i slično) definirate CSS pravilo (npr. za boju) u vanjski CSS, u head sekciju kao unutrašnji, te na kraju kao linijski (tako da npr. svaki puta stavite neku drugu boju). Pokušajte mijenjati mjesta za <link> i <style>. Provjerite i odgovorite, ponaša li se oblikovanje na očekivani način.

Oblikovanja se ponašaju na očekivani način.

Pravila kaskadnog redanja u slučajevima kad je za neki HTML element određeno više stilova na različitim mjestima: najviši prioritet ima linijski stil (pisan unutar HTML elementa), ako ga nema primjenit će se vanjski ili unutrašnji CSS (u head sekciji) ovisno o tome koji je pisan posljednji. U slučaju da oblikovanje nije nigdje navedeno primjenjuje se podrazumijevano oblikovanje zadano u pregledniku koji otvara i prikazuje HTML dokument. Znači linijski stil prevladat će bilo koji vanjski i unutrašnji, ali i podrazumijevani stil preglednika.

B. Riješite četiri vježbe pri dnu stranice.

1. Rješenje:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

2.

Rješenje:

<!DOCTYPE html>

<html>

<head>

<style>

body{

background-color: linen;

}

</style>

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

3.

Rješenje:

<!DOCTYPE html>

<html>

<head>

</head>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

4.

Rješenje:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

​

Priprema za vježbu:

​

Zadatak 1: Što opisujemo pomoću HTML-a, a što pomoću CSS-a? Odgovor: Pomoću HTML-a opisujemo strukturu web stranice, a pomoću CSS-a izgled elemenata stranica.

​

Zadatak 2: CSS je kratica za C………. S……. S…….. Odgovor: Cascading Style Sheets

​

Zadatak 3: Koja je organizacija i zašto stvorila CSS?

Odgovor: CSS je stvorila W3C kako bi poboljšala stvaranje i fleksibilnost sadržaja dodavanjem boja, različitih fontova, stilova...

​

Zadatak 4: Koji je uobičajeni i preporučeni način spremanja definicija koje opisuju oblikovanje HTML elemenata i koja je prednost takvog pristupa?

Odgovor: Preporučeno je stvaranje vanjskih CSS datoteka kako bi se uštedilo na prostoru, i na vremenu. Kad imamo vanjske CSS datoteke onda kad ju trebamo ju samo pozovemo u HTML datoteci i to je to. Bez njih bi u svakoj HTML datoteci morali pisati CSS oblikovanja.

​

Vježba:

​

Pri traženju odgovora koristite se internet tražilicom.

1. CSS:

​

CSS je jezik koji koristimo kako bi odredili izgled (stil) HTML dokumenta. CSS opisuje kako će na

Pogledajte i uočite kako različit sadržaj CSS datoteke može prilikom prikaza utjecati na isti HTML

dokument (primjer).

​

A. CSS sintaksa opisuje kako se pišu CSS pravila. Svako CSS pravilo sastoji se od selektora i deklaracijskog bloka:

Selektor odabire HTML element koji želimo oblikovati. Deklaracijski blok sadrži jednu ili više deklaracija

odvojenih sa „;“. Svaka deklaracija sadrži ime CSS svojstva i njegovu vrijednost odvojeno sa „:“.

Deklaracijski blokovi ograničeni su vitičastim zagradama. Na koji bi način ovo pravilo oblikovalo sve h1

naslove u dokumentu? Napišite što je u ovom pravilu selektor, koja svojstva ovo pravilo oblikuje i koje

su vrijednosti svojstava koje ovo pravilo definira.

​

Ovdje je selektor svaki naslov koji je tipa H1, tj. najveći podnaslov. Podnaslov H1 bi bio veličine 12px i plave

boje.

​

​

<head> <link rel="stylesheet" href="mystyle.css"> </head>

​

Vanjska CSS datoteka može biti sastavljena pomoću bilo kojeg tekstualnog editora, a mora biti spremljena

sa .css ekstenzijom (proširenjem). Vanjska .css datoteka ne bi smjela sadržavati HTML elemente. Unutrašnji CSS može se koristiti ako pojedina HTML stranica ima jedinstven (različit) izgled (stil). Taj se

unutrašnji stil definira unutar elementa <style> u head sekciji dokumenta, kao npr.:

​

<style> body { background-color: linen; } h1 { color: green; margin-left: 40px; } < /style>

​

Linijski CSS može se koristiti kad se pojedinačnom elementu želi dodijeliti jedinstveni stil. Da bi se koristilo takvo oblikovanje, potrebno je atribut oblikovanja (stila) dodati relevantnom element. Atribut stila pritom

može sadržavati bilo koje CSS svojstvo. Linijska oblikovanja definirana su unutar atributa style relevantnog

elementa, kao npr.: <h1 style="color:blue;text-align:center;">This is a heading</h1> Linijski definirana

oblikovanja ukidaju prednosti korištenja odvojenih oblikovanja jer mješaju sadržaj sa njegovom

prezentacijom, pa je preporuka ovo korisiti samo iznimno.

​

​

Oblikovanja se ponašaju na očekivani način.

​

​

B. Riješite četiri vježbe pri dnu stranice.

​

1.

Rješenje:

​

Zadatak 1: Što opisujemo pomoću HTML-a, a što pomoću CSS-a?
Odgovor: Pomoću HTML-a opisujemo strukturu web stranice, a pomoću CSS-a izgled elemenata stranica.

Zadatak 2: CSS je kratica za C………. S……. S……..
Odgovor: Cascading Style Sheets

Zadatak 4: Koji je uobičajeni i preporučeni način spremanja definicija koje opisuju oblikovanje HTML
elemenata i koja je prednost takvog pristupa?

A. CSS sintaksa opisuje kako se pišu CSS pravila. Svako CSS pravilo sastoji se od selektora i
deklaracijskog bloka:

<head>
<link rel="stylesheet" href="mystyle.css">
</head>

sa .css ekstenzijom (proširenjem). Vanjska .css datoteka ne bi smjela sadržavati HTML elemente.
Unutrašnji CSS može se koristiti ako pojedina HTML stranica ima jedinstven (različit) izgled (stil). Taj se

<style>
body {
background-color: linen;
}
h1 {
color: green;
margin-left: 40px;
} <
/style>