"div" je najkorišteniji HTML tag unutar jedne web stranice, a služi da više drugih elemenata uređujemo (u CSS-u) odjednom. Primjerice, ako želimo centrirati dva paragrafa i link, možemo ih strpati u jedan "div" element, pa umjesto da centriramo svaki element posebno dovoljno je dodati stil za centriranje teksta samo "div" elementu:
<div style="text-align: center;"> <p>Ovo je prvi paragraf.</p> <p>Ovo je drugi paragraf.</p> <a href="#">Ovo je link.</a> </div>
Rezultat:
Obično se "div" element koristi kada na stranici želite grupirati neke elemente i dodati im različita svojstva od neke druge grupe, pa ako želimo dodati drugi "div" element u prošli primjer, samo ga napišemo ispod i damo mu neki drugi (proizvoljni) stil. Primjer:
<div style="text-align: center;"> <p>Ovo je prvi paragraf prvog div-a (centrirani tekst).</p> <p>Ovo je drugi paragraf prvog div-a (centrirani tekst).</p> <a href="#">Ovo je link prvog div-a (centrirani tekst).</a> </div> <div style="color: blue;"> <p>Ovo je prvi paragraf drugog div-a (plavi tekst).</p> <p>Ovo je drugi paragraf drugog div-a (plavi tekst).</p> <a href="#">Ovo je link drugog div-a (plavi tekst).</a> </div>
Rezultat:
Ovo je prvi paragraf prvog div-a (centrirani tekst).
Ovo je drugi paragraf prvog div-a (centrirani tekst).
Ovo je link prvog div-a (centrirani tekst).Ovo je prvi paragraf drugog div-a (plavi tekst).
Ovo je drugi paragraf drugog div-a (plavi tekst).
Ovo je link drugog div-a (plavi tekst).Zadatak 1
Napravite novi HTML dokument koji će sadržati:
2 paragrafa i link moraju biti unutar "div" elementa!
Često se događa da želite imati identičan stil za više grupa elemenata (div-ova), pa da ne bi pisali svaki put iznova cijeli stil, "div" elementu možete dodijeliti neko ime. To ime je zapravo klasa i piše se na sljedeći način:
<div class="nekiNaziv">
Primjerice, imamo tri "div" elementa i želimo da nam prvi i treći imaju isti stil, a srednji ima drugačiji. Tada ćemo prvom i trećem dati isto ime (istu klasu) i u CSS-u dodati željena svojstva samo jednom:
index.html
<div class="crveniTekst"> <p>Ovo je prvi paragraf prvog div-a (crveni tekst).</p> <p>Ovo je drugi paragraf prvog div-a (crveni tekst).</p> </div> <div class="plaviTekst"> <p>Ovo je prvi paragraf drugog div-a (plavi tekst).</p> <p>Ovo je drugi paragraf drugog div-a (plavi tekst).</p> </div> <div class="crveniTekst"> <p>Ovo je prvi paragraf trećeg div-a (crveni tekst).</p> <p>Ovo je drugi paragraf trećeg div-a (crveni tekst).</p> </div>
style.css (ovakav zapis CSS-a je objašnjen u cjelini External). Kada klasu definiramo u CSS-u, obavezno stavljamo točku ispred imena.
.crveniTekst {
color: red;
}
.plaviTekst {
color: blue;
}
Rezultat:
Ovo je prvi paragraf prvog div-a (crveni tekst).
Ovo je drugi paragraf prvog div-a (crveni tekst).
Ovo je prvi paragraf drugog div-a (plavi tekst).
Ovo je drugi paragraf drugog div-a (plavi tekst).
Ovo je prvi paragraf trećeg div-a (crveni tekst).
Ovo je drugi paragraf trećeg div-a (crveni tekst).
Za razliku od klase, "id" je unikatan i ne bi se trebao ponavljati na niti jednom drugom elementu unutar HTML-a. Pomoću njega također možemo mijenjati stil nekom elementu (kao i pomoću klase), ali se ta radnja najčešće odvija dinamički (putem JavaScript-a). Sintaksa:
<div id="nekiNaziv">
Primjer korištenja:
index.html
<div id="crveniTekst"> <p>Ovo je prvi paragraf prvog div-a (crveni tekst).</p> <p>Ovo je drugi paragraf prvog div-a (crveni tekst).</p> </div> <div id="plaviTekst"> <p>Ovo je prvi paragraf drugog div-a (plavi tekst).</p> <p>Ovo je drugi paragraf drugog div-a (plavi tekst).</p> </div>
style.css (ovakav zapis CSS-a je objašnjen u cjelini External). Kada ID definiramo u CSS-u, obavezno stavljamo skalicu ispred imena.
#crveniTekst {
color: red;
}
#plaviTekst {
color: blue;
}
Rezultat:
Ovo je prvi paragraf prvog div-a (crveni tekst).
Ovo je drugi paragraf prvog div-a (crveni tekst).
Ovo je prvi paragraf drugog div-a (plavi tekst).
Ovo je drugi paragraf drugog div-a (plavi tekst).
Zadatak 2
Vašem "div" elementu dodajte klasu naziva "mojaKlasa", a vašem linku dodajte id s nazivom "zeleno". Ne dodavajte nikakav stil za sada.
Do sada smo spominjali samo "inline" zapis CSS-a unutar HTML elementa. Osim takvog zapisa, postoji još "internal" i "external" zapis.
Internal zapis znači da cijeli CSS kod pišemo unutar <style> </style> taga u zaglavlju (head tagu) HTML-a. Ukoliko pokušavamo internal zapisom promijeniti svojstvo elementa kojeg smo već zapisali inline, nećemo uspjeti jer inline ima veći prioritet, pa je potrebno izbrisati inline stil.
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Arial, serif;
font-size: 18px;
color: #00ff00;
}
</style>
</head>
<body>
<p>Tekst kojeg smo uredili internal CSS zapisom</p>
</body>
</html>
Rezultat:
Tekst kojeg smo uredili internal CSS zapisom
Iz primjera je vidljivo da smo unutar style taga HTML elementu "p" promijenili veličinu, boju i font. Ukoliko želimo promijeniti bilo koji element, najprije trebamo zapisati njegovo ime (što je u gornjem slučaju "p"), zatim otvoriti vitičastu zagradu, napisati svojstva sa vrijednostima, i zatvoriti zagradu. Nakon zatvorene zagrade se može mijenjati i neki drugi element na isti način kao i prvi.
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Arial, serif;
font-size: 18px;
color: #00ff00;
}
a {
text-decoration: none;
color: red;
}
</style>
</head>
<body>
<p>Tekst kojeg smo uredili internal CSS zapisom</p>
<a href="#">Link kojeg smo uredili internal CSS zapisom</a>
</body>
</html>
Rezultat:
Tekst kojeg smo uredili internal CSS zapisom
Link kojeg smo uredili internal CSS zapisom
Ukoliko želimo promijeniti stil nekom elementu koji ima proizvoljnu klasu (kao u prošlom zadatku "mojaKlasa"), tada je potrebno staviti točku ispred naziva, odnosno skalicu (hash) ukoliko se radi o ID-u umjesto klase:
<!DOCTYPE html>
<html>
<head>
<style>
.mojaKlasa {
color: blue;
}
#zeleno {
color: green;
}
</style>
</head>
<body>
<p class="mojaKlasa">Tekst sa klasom kojeg smo uredili internal CSS zapisom</p>
<a href="#" id="zeleno">Link sa ID-em kojeg smo uredili internal CSS zapisom</a>
</body>
</html>
Rezultat:
Tekst sa klasom kojeg smo uredili internal CSS zapisom
Link sa ID-em kojeg smo uredili internal CSS zapisom
Zadatak 3
Vašem div elementu iz prethodnog zadatka dodajte svojstva kojima ćete promijeniti boju (pomoć) i font grupu u neku iz Sans-serif obitelji (pomoć), a vašem elementu koji ima id s nazivom "zeleno" promijenite boju u zelenu, te obrišite sve predefinirane dekoracije (pomoć).
Do sada smo sve pisali unutar jednog HTML dokumenta. Kao što je već navedeno, CSS se može pisati (i uglavnom piše) external zapisom, odnosno u zaseban dokument koji se tada povezuje sa HTML dokumentom putem <link> taga u zaglavlju HTML dokumenta. Potrebno je otvoriti novi tekst dokument, nazvati ga po želji, dodati mu .css ekstenziju i spremiti na mjesto gdje se nalazi i vaš HTML, te ga povezati sa HTML dokumentom na sljedeći način:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
...
</body>
</html>
Atribut rel="stylesheet" govori HTML-u o kakvoj se vezi među dokumentima radi, a href="style.css" da pronađe dokument koji se naziva style.css u istom direktoriju gdje je i on (html dokument). Zapisi u zasebnom CSS dokumentu izgledaju identično kao kod internal zapisa samo nije potrebno stavljati <style></style> tag.
Primjer HTML dokumenta i external CSS dokumenta koji su povezani:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h4>Header 4</h4>
<p>Paragraf</p>
<a href="#">Link</a>
</body>
</html>
style.css
body {
text-align: center;
}
h4 {
font-size: 20px;
color: red;
}
p {
font-family: Roboto, serif;
font-weight: bold;
}
a {
text-decoration: none;
}
Rezultat:
Paragraph
Komentari unutar CSS dokumenta započinju sa znakom "/*" a završavaju znakom "*/"
/* Ovo je CSS u jednom redu */
/* Ovo je komentar u više redova */
Zadatak 4
Box model u CSS-u je ujedno i najvažniji model koji se treba naučiti. Svaki element (html tag) se gleda kao jedan box (kutija), a svaki box je određen nekim svojstvima. Svojstva koja određuju box su:
Zbrajanjem svih vrijednosti dobijemo konačnu širinu elementa:
širina = width + padding + border + margin
Kao što je već spomenuto, padding definira prostor između sadržaja i okvira nekog elementa. Razlikujemo gornji (top), desni (right), donji (bottom) i lijevi (left) padding. Ukoliko ga zapisujemo u CSS obliku, definiramo ga brojčanom vrijednošću sa mjernom jedinicom px, em, cm, itd. Primjer zapisa:
p {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
Ukoliko želimo mijenjati sve strane padding-a, nije potrebno pisati sva četiri svojstva, već je dovoljno definirati svojstvo "padding" koje će tada svim stranama dati jednaku vrijednost padding-a ukoliko stavimo jednu vrijednost:
p {
padding: 5px;
}
Kroz svojstvo "padding" možemo definirati i sve četiri strane posebno (što je često u praksi).
Pravilo (strane se definiraju u smijeru kazaljke na satu):
padding: top right bottom left;
Primjer:
p {
padding: 5px 10px 15px 20px;
}
Oko svakog elementa možemo nacrtati neki okvir proizvoljne širine, boje i stila. Širinu okvira definiramo svojstvom "border-width", stil svojstvom "border-style", a boju svojstvom "border-color". Isto kao i kod padding-a, možemo definirati okvir za sve strane pojedinačno ili za sve odjednom kroz svojstvo "border". Širinu i stil obavezno moramo definirati.
Primjer za svaku stranu pojedinačno:
p {
border-top: 1px;
border-right: 3px;
border-bottom: 1px;
border-left: 3px;
border-style: solid;
border-color: #01a1ff;
}
<p>Ovo je tekst sa okvirom</p>
Rezultat:
Ovo je tekst sa okvirom
Primjer za sve strane odjednom:
p {
border-width: 1px;
border-style: solid;
border-color: #01a1ff;
}
<p>Ovo je tekst sa okvirom</p>
Rezultat:
Ovo je tekst sa okvirom
Osim što svim stranama možemo definirati širinu odjednom, tako možemo definirati stil i boju čime se u praksi najčešće i susrećemo:
Pravilo:
border: širina stil boja;
p {
border: 1px solid #01a1ff;
}
<p>Ovo je tekst sa okvirom</p>
Rezultat:
Ovo je tekst sa okvirom
"Solid" stil možemo zamijeniti i nekim drugim stilovima poput dashed, dotted, double, itd., a listu možete pronaći na W3Schools.com.
Dodavanjem padding-a gornjem tekstu, vidit ćemo kako se prazni prostor oko teksta raširio:
p {
border: 1px dashed #01a1ff;
padding: 10px;
}
<p>Ovo je tekst sa okvirom i padding-om</p>
Rezultat:
Ovo je tekst sa okvirom i padding-om
Margine definiraju prostor oko nekog elementa, a definiraju se na isti način kao i prethodna dva svojstva.
Sve strane pojedinačno:
p {
margin-top: 30px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
}
Sve strane odjednom:
p {
margin: 10px;
}
Sve strane pojedinačno kroz svojstvo "margin" i sa pravilom "top", "right", "bottom", "left":
p {
margin: 30px 10px 20px 10px;
}
Primjer dva elementa koji su jedan od drugog razmaknuti svojstvom "margin":
<div class="red"> </canvas> <div class="blue"> </canvas>
div {
width: 70px;
height: 70px;
margin: 20px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
Zadatak 5
Klasi "mojaKlasa" dodajte: