CSS sintaksa i umetanje CSS fajla

CSS sintaksa se sastoji od jednog ili više opisa. Svaki opis se sastoji od tri elementa:

Selektor
Atributi
Vrednosti

Sintaksa svakog opisa ima sledeću opštu šemu:

selektor1,selektor2,...,.imeKlase1,...{svojstvo1: vrednost1; svojstvo2: vrednost2;...}

Obično u jedan opis figuriše jedan selektor, ali ako više selektora imaju ista svojstva onda možemo i njih dodati, samo se odvoje zarezom (može i klase itd) - to se naziva grupisanje selektora.

Da nastavimo objašnjenje opšte šeme opisa. Znači navede se selektor (ili više njih odvojenih zarezom) a u vitičastim zagradama se nabrajaju atributi koji se medjusobno odvajaju tačka zarezom. Vrednosti atributa se dodeljuju ne znakom jednako kao što je bio slučaj u HTML već se pišu dve tačke izmedju atributa i njegove vrednosti. E sad ovde su šematski prikazane dva svojstva ali naravno može koliko god nam je potrebno. Ajde da vidimo konkretan primer pa će sve biti jasno:

p {color: red; text-align: center}

ili ako je selektor sa mnogo atributa moše se pisati i ovako:

p{ color: red; text-align: center; }

U gornjem kodu smo definisali da tekst u pasusima (<p></p>) bude u crvenoj boji, i centriran. Znači, iako u HTML kodovima nećemo pisati u <p> tagovima atribute za boju i položaj tekstova svi tekstovi će ipak biti u crvenoj boji i centrirani. Ajde to i da dokažemo, a ujedno i da vidimo kako se to umeću CSS fajlovi. Znač otvorimo notepad i prepišemo gornji kod u njemu, i taj fajl imenujemo sa stil.css . Otvorimo novi notepad i u njemu napravimo HTML stranicu strana.htm sledećeg sadržaja:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <link rel="stylesheet" type="text/css" href="stil.css"> <title>CSS edukacija</title> </head> <body> <p>Moja prva CSS lekcija</p> </body> </html>

Na početku svakog HTML dokumenta (čak i ispred <html> taga) gde ubacujete CSS stilove steknite naviku da uvek pišete !DOCTYPE tag u formatu kao što smo mi u gornjem kodu napisali.

Idemo dalje. Kad otvorimo u brauzeru fajl strana.htm dobijemo tekst "Moja prva CSS lekcija" u crvenoj boji ispisan po sredini. Znači, iako nismo direktno u HTML dokumentu u <p> tagu definisali boju i položaj teksta, brauzer je ispoštovao naredbe fajla stil.css. CSS fajl kao što vidimo umeće se u HTML dokument u HEAD delu i to pomoću taga <link> i atributa REL, TYPE i HREF. Uvek pišete REL i TYPE atribute kao u gornjem primeru zajedno sa njihovim vrednostima, a u HREF atributu pišete lokaciju CSS fajla.

Medjutim CSS kod ne mora uvek da se umeće. Naime, možemo CSS kod direktno pisati u HTML HEAD delu ovako:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <style type="text/css"> p {color: red; text-align: center} </style> <title>CSS edukacija</title> </head> <body> <p>Moja prva CSS lekcija</p> </body> </html>

Rezultat će biti isti. I ovde imamo <style> tag ali samo sa TYPE atributom U ovom slučaju postoji i zatvarajući tag </style>.

Postoji i mogućnost umetanja CSS stilova i u samim HTML tagovima, a efekat će biti isti. Na primer možemo pisati i ovako:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <title>CSS edukacija</title> </head> <body> <p style="color:red; text-align:center">Moja prva CSS lekcija</p> </body> </html>

CSS podržava i komentare, koji izgledaju kao u programskom jeziku C, dakle navodeći se između znakova /* i */, ali samo unutar CSS koda.