HTML nam omogućuje mnoge mogućnosti, kao što su ubacivanje naslova, stiliziranog teksta, videozapisa i fotografija, no iako se i korištenjem samog HTML-a stranica može stilizirati, najčešće se za stil stranice koristi CSS. Pojednostavljeno govoreći, CSS nam omogućava uljepšati naše web stranice.
Postoje dva načina za ‘ubacivanje’ css koda u stranicu.
- Pisanje css-a direktno u html datoteku
- Pisanje css koda u vanjsku .css datoteku koju zatim ‘pozovemo’ u našu html datoteku
Ukoliko koristimo ovaj prvi način, svoj css kod nećemo moći koristiti nigdje drugdje jer taj kod važi samo za tu datoteku u kojoj je napisan. No ukoliko css kod pišemo u zasebnoj vanjskoj datoteci, tu datoteku možemo pozivati po potrebi i koristiti u bezbroj stranica.
CSS nam omogućava oblikovanje teksta u HTML- (boja, vrsta fonta, veličina, težina i stil, poravnanje i razmak, velika i mala slova, ukrašavanje teksta, te korištenje raznih web fontova…), te nam ujedno omogućuje i oblikovanje HTML elemenata na način da nam omogućuje oblikovanje boje pozadine, prikaz elementa, širinu i visinu, margine, rubove i brojne druge opcije.
Primjerice, ukoliko imamo HTML stranicu sa naslovima tekstom i fotografijom, već znamo da nam se u web pregledniku prikazuje samo ono što je unutar body elementa.
Korištenjem CSS-a možemo staviti pozadinu body elementa
Primjer
Zalijepi ovaj kod u HTML odlomak Uređivača
<!DOCTYPE html>
<html>
<head>
<title>Moja stranica</title>
</head>
<body>
<h1>Moj naslov</h1>
<p> Moj paragraf</p>
</body>
</html>
Zalijepi ovaj kod u CSS odlomak Uređivača kako bi pozadina web stranice bila svijetloplava
body {
background-color: lightblue;
}Korištenjem CSS-a možemo centrirati određeni dio teksta na našoj web stranici.
P { text-align: center }
SINTAKSA CSS-a
CSS-kôd sastoji se od CSS-pravila. Evo primjera jednostavnog
CSS-pravila:
p
{
color: blue;
}
Ovo pravilo postavlja svim p elementima boju teksta na plavu.
Dio pravila koje određuje (odnosno selektira) elemente na koje se
pravilo odnosi zove se selektor. Svako pravilo moramo započeti
selektorom, a najjednostavniji selektor je upravo naziv elementa:
p
{
}
Nakon selektora dolaze vitičaste zagrade.
Unutar vitičastih zagrada najprije se navodi svojstvo koje se postavlja.
U ovom primjeru radi se o boji teksta (CSS-svojstvo color):
p
{
color:
}
Nakon što se navede svojstvo koje se želi postaviti, dolazi dvotočka, a
iza nje vrijednost na koju se postavlja to svojstvo (u ovom primjeru radi
se o nazivu boje):
{
color: red;
}
Svojstvo i vrijednost zajedno čine deklaraciju.
Unutar jednog pravila može biti više deklaracija:
p
{
color: blue;
font-size: 12px;
}
U ovom primjeru se CSS-om određuje boja i veličina fonta HTML elementa p.