Priprema
1. Što opisujemo pomoću HTML-a, a što pomoću CSS-a?
Pomocu HTM-a opisujemo kako prikazati dokument na web-pregledniku, a pomocu CSS-a opisujemo kako prezentirati dokument.
2. CSS je kratica za:
CSS – Cascading Style Sheets
3. Koja je organizacija i zašto stvorila CSS?
World Wide Web Consortium je 1996. godine stoviro CSS kako bi odvojili sadrzaj dokumenta i nacin prezentacije kako bi poboljsali pristupacnost, fleksibilnost i kontrolu.
4. Koji je uobičajeni i preporučeni način spremanja definicija koje opisuju oblikovanje HTML elemenata i koja je prednost takvog pristupa?
Uobicajeni nacin spremanja definicija koje opisuju oblikovanje HTML elementa je u vanjskoj .css datoteci, to stedi mnogo vremena jer mozemo mijenjati izgled cijene stranice iz jedne datoteke.
Izvodenje vjezbe
CSS sintaksa opisuje kako se pišu CSS pravila. Svako CSS pravilo sastoji se od selektora i deklaracijskog bloka:
Ovo pravilo bi oblikovalo sve <h1> elemente HTML dokumenta tako sto bi tekst bio plave boje i velicine 12 piksela.
Tri nacina ubacivanja CSS oblikovanja: vanjski, unutrasnji i linijski.
Vanjski CSS – Potrebna je referencu ukljuciti primjer:
<head>
<link rel=”stylesheet” href=”mystyle.css”>
</head>
Unutrasnji CSS – pojedina HTML stranica ima jedinstven izgled primjer: <style>
body {background-color:linen;}
h1 {
color:green;
margin-left:40px;
}
</style>
Linijski CSS – pojedinacnom elementu dodijeliti jedinstveni stil primjer:
<h1 style=”color:blue; text-align:center;”>
This is a heading
</h1>
Visestruki CSS – svojstva definirana za isti selector u razlicitim CSS-ovima, prioriteti su: linijski, vanjski/unutrasnji (ovisi koji je pisan posljednji)
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 i <link> i <style>. Provjerite i
odgovorite, ponaša li se oblikovanje na očekivani način.
Prema ocekivanom, linijski CSS ima najvisi prioritet, dok izmedu unutarnjeg i vanjskog ovisi o tome koji je pisan posljednji.
1. Dodati vanjski CSS na url: “mystyle.css”
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
2. Staviti smedu pozadinu preko unutarnjeg CSS-a.
<style>
body { background-color:linen}
</style>
3. Staviti smedu pozadinu preko linijskog CSS-a.
<body style=”background-color:linen>
4. Maknuti sve stilove osim vanjskog CSS lista.
<link ref=”stylesheet” href=”mystyle.css”>
<style> p { color:red; } </style>
<body style=”background-color:light cyan;”>
Prvi red ostaviti, a druga dva reda izbrisati.