Uvod u CSS

CSS je skup pravila formatiranja koji se pridodaju HTML dokumentu. CSS nam omogućuje lakšu i bolju kontrolu nad HTML-om, te ubrzava uređivanje više dokumenata za koje primjenjujemo isto formatiranje.
Pisanje CSS koda nije teško, a danas je najbolje i najprihvaćenije rješenje - mislim da su to dovoljni razlozi da čitate dalje.

CSS se u dokument može integrirati na 3 načina:
- izravno na određeni tag
- na cijeli dokument unutar HEAD tag-a
- na cijeli dokument, likanjem eksterne (vanjske) CSS datoteke

Najprije pogledajte kako uopće CSS izgleda. U slijedećem primjeru prikazano je oblikovanje za BODY tag.

Prva riječ označava tag na koji se formatiranje odnosi (u ovom slučaju na BODY). Iza nje slijedi otvorena vitičasta zagrada, što znači da sada počinjemo nizati atribute. Atributi su određeni engleskom riječi (ili više njih), koje prilično logično objašnjavaju o kakvom se formatiranju radi. Ako je više riječi, povezane su crticom.
Iza naziva formata slijedi dvotočka, a poslije nje pišemo vrijednost (boja, veličina itd.). Na kraju ide točka-zarez, što znači da je ovaj atribut gotov i prelazimo na slijedeći. Atribute smijemo pisati u istom redu, ali bitno je da ih odvojimo točka-zarezom! Nakon svih navedenih atributa, moramo zatvoriti vitičastu zagradu. To znači da smo završili formatiranje body taga i nakon toga možemo prijeći na slijedeći.
Na ovom primjeru možemo vidjeti kako se definira boja pozadine, font, veličina teksta, boja teksta, margine i pomak od ruba - padding (slično kao margine, ali poslije ćete vidjeti da nije isto).

Već sam navela kako postoje tri načina za pridavanje CSS-a dokumentu. Sada ću to na primjeru detaljnije objasniti.

1. Izravno na tag
Ovaj način se ne preporuča u formatiranju cijelog dokumenta, ali ako imamo samo jedan element na stranici kojeg želimo formatirati, onda može poslužiti.

2. Unutar HEAD tag-a dokumenta
Unutar HEAD taga obično se pišu informacije o dokumentu i dodaju se skripte i slično. To što napišemo u HEAD-u, vrijedi za cijeli dokument. Ovdje je prikazano kako izgleda HEAD tag dokumenta sa CSS-om

Ovaj način dati će isti rezultat kao i gore spomenuti. Korisnici bloga u uređivanju svog dizajna najčešće će se služiti ovim načinom.

3. Eksterna datoteka
Ovo je najbolji način, jer se tako može primjenjivati isti format na više datoteka. To se radi na jednostavan način: u Notepadu napišete CSS i spremite pod nazivom ime.css. Uploadate datoteku na server i zatim je linkate u sve dokumente za koje želite da sadrže taj CSS, a to radite pomoću ovog koda:

Ako radite na ovaj način, biti će lako mijenjati dizajn - trebate promijeniti samo ime.css datoteku, uploadati je na server, a sve HTML datoteke će poprimiti novo formatiranje :)

U slijedećim tutorialima naučiti ćete više o samom načinu rada s CSS-om na blogu.