U prošloj lekciji naučili smo kako se koriste h tagovi, class i id atributi i kako se linkuje.

Sada ćemo početi da koristimo CSS.

Uloga CSS-a jeste davanje izgleda HTML elementima.

Osnove CSS-a

Za razliku od rada u html dokumentima kod CSS se pisanje instrukcija razlikuje i recimo jedna CSS instrukcija izgleda ovako:

div { background-color: yellow; }

U ovom slučaju div je HTML element, background-color je atribut, a yellow je vrednost atributa.

Jedna html element može da sadrži i više atributa i oni se pišu svi unutar zagrade html elementa, a razdvajaju se sa tačka-zarezom (;), a evo i primera:

div { background-color: yellow; text-align: center; }

Ova instrukcija govori da će svi div elementi unutar strane biti obojeni u belo, a tekst centriran.

Medjutim, ako nam nije cilj da menjanjo sve div elemente već tačno odredjeni koji ima id recimo menu (<div id=“menu“>) instrukcija je sledeća:

div#menu { background-color: yellow; text-align: center; 

ili

#menu { background-color: yellow; text-align: center; 

Ako je reč o divu koji ima class recimo klasa (<div class=“klasa“) instrukcija izgleda ovako:

div.klasa { background-color: yellow; text-align: center; 

ili

.klasa { background-color: yellow; text-align: center; 

Postoji i varijanta kada hoćemo da formatiramo nešto unutar diva. Npr.  hoćemo da formatiramo a tag unutar našeg navigation diva, to ćemo odraditi ovako:

#navigation a {……}

Sada smo videli kako CSS funkcioniše pa da ga primenimo na naš sajt.

Kako bi naš HTML dokument bio povezan sa CSS dokumentom moramo im napraviti vezu. Unutar head dela prekopirajte sledeći kod na svim html stranicama i na taj način veza je napravljena:

<link rel=“stylesheet“ type=“text/css“ href=“style.css“ />

Ovde imamo par novina.

Link tag ima ulogu povezivanja html-a sa spoljnim dokumentom.

Rel je tip veze, a stylesheet nam govori da je reč o oblikovanju html dokumenta.

Type nam govori da se radi o css fajlu, dok smo sa href atributom već upoznati prilikom učenja da linkujemo u predjašnjoj lekciji.

Sada udjite u dokument style.css i prekopirajte kod ispod:

html, body {margin:0; padding:0; }

Margin element koristimo kada želimo da odvojimo jedan element od drugog i može se pisati na više različitih načina. Kada imamo jednu vrednost kao npr. margin: 5px; to nam govori da su margine sa svih strana po 5 px. Ako imamo vrednost npr. margin: 5px, 10px; prva vrednost od 5px definise gornju i donju marginu, a 10px levu i desnu marginu. Ako stavimo sve četiri npr. margin: 10px, 20px, 30px, 40px; 10px je gornja margina, 20px je desna, 30px je donja i 40px je leva. Kada su u pitanju margine možemo koristiti i preciznije atribute kao što su: margin-top, margin-right, margin-bottom i margin-left i na taj način definisati samo jednu tačno odredjenu marginu.

Padding služi za odvajanje sadržaja od ivica dokumenata, a što se tiče pravila pisanja važe ista pravila kao i za margine.

Još jedna novina je da imamo 2 html elementa u našem slučaju (html i body) i ovu varijantu možemo koristiti kada želimo istovremeno da damo atribut i njegovu vrednost za dva html elementa.

Sada ćemo da promenimo boju tela dokumenta, tako da ispod prvog koda prekopirajte kod ispod:

body {background-color: #444444}

Ovde nam je sve jasno osim vrednosti atributa koja je #444444, zapravo ova vrednost definiše boju o kojoj se radi. A Vama će od koristi u daljem radu i izradi sajtova biti colorpicker sajt, koji je jednostavan za korišćenje i nećete imati problema kada je u pitanju odabir boja.

Sada u css fajlu kopiramo sledeći kod:

#header { height: 200px; width: 900px; background-color: #ADADAD; margin: 15px auto 0 auto; padding: 30px 0; }

Height je definisao visinu header diva, a width širinu. Mi smo vrednost ovih atributa stavili u pikselima, a možemo koristiti i procente. Pikseli su fiksni, dok se procenti menjaju u zavisnosti od veličine ekrana.

Još nam je nepoznata i vrednost auto, a ona definiše automatsko podešavanje tako da je element uvek na sredini.

Idemo dalje, novi kod je:

#navigation { height: 50px; width: 900px; background-color: #ADADAD; margin: 10px auto 0 auto; padding: 5px 0;  }

Ovde nam je sve jasno pa pišemo novi kod:

#menu { height: auto; width: 900px; margin: 10px auto 0 auto; padding: 0;  }

I ovde je sve jasno pa idemo na nove instrukcije:

#content { height: auto; width: 700px; background-color: #ADADAD; margin: 0; padding: 10px 0; float:left;  }

#sidebar { height: auto; width: 195px; background-color: #ADADAD; margin: 0 0 0 5px; padding: 10px 0; float:left;  }

Float left govori da se elementi redjaju s leva na desno, kada je u pitanju float right slučaj je obrnut. Jako bitan deo koji se tiče float elemenata je da mora biti prekinut pa ćemo unutar menu diva ispod sidebar diva prekopirati sledeći kod koji vrši prekidanje float atributa. Tako da dodajte na sve tri html stranice:

<div class=“clear“></div>

Pa potom u css fajlu prekopirajte:

div.clear { clear:left; }

Ostaje nam još footer div:

#footer { height: 50px; width: 900px; background-color: #ADADAD; margin: 5px auto 0 auto; padding: 10px 0; text-align: center; }

Text align služi za poravnanje teksta. I za ovaj atribut imamo vrednosti left- ravna tekst na levoj ivici, right- na desnoj, justify na obe i center cetrira tekst.

Da rezimiramo:

U ovoj lekciji naučili smo kako se pišu instrukcije unutar CSS fajlova, napravili smo prve korake da naš sajt dobije izgled kakav smo želeli.

Idemo na sledeću lekciju.