CSS je jezik koji služi za oblikovanje web-stranica. Uz HTML, jezik pomoću kojeg se definiraju struktura i sadržaj web-stranica, CSS je osnovna tehnologija na kojoj se temelji današnji web.

 

CSS je kratica za Cascading Style Sheets.

Pojam style sheet često se upotrebljava za datoteku koja sadrži CSS-kod.

Dakle, style sheet je datoteka koja definira stil, odnosno izgled web-stranice.

Riječ cascading označava kaskadnu primjenu CSS-pravila.

CSS-pravilo može se napisati tako da bude primijenjeno na sve elemente ili samo na neke elemente ili tako da vrijedi samo za točno određeni element.

Prije pojave CSS-a oblikovanje izgleda web-stranice do određene razine bilo je moguće postići i u HTML-u. No, time se stvorio problem miješanja sadržaja i strukture s kodom čija je jedina svrha bila prezentacija.

HTML-kod za definiranje izgleda morao se ponavljati iznova na svakom elementu i na svakoj stranici u web-sjedištu. Pojavom CSS-a nastoji se riješiti taj problem.

 

Glavna je ideja CSS-a odvajanje prezentacijskog koda u zasebne datoteke i njegovo definiranje pomoću jednostavnih pravila koja se mogu odnositi na više elemenata odjednom.

 

Uključivanje CSS-a u HTML-kod

 

CSS-kod se tipično piše odvojeno od HTML-koda, tj. u zasebnoj datoteci. Da bismo HTML dokument povezali s CSS-datotekom, koristimo HTML-element link:

<link rel="stylesheet" type="text/css" href="stilovi/boje.css" />

 

Kada se taj element koristi za uključivanje CSS-a (što je zapravo njegova glavna namjena), atribut rel mora imati vrijednost "stylesheet", a atribut type vrijednost "text/css".

Atribut href postavljamo na putanju do CSS-datoteke koju želimo uključiti.

 

U ovom primjeru uključujemo datoteku boje.css koja se nalazi u mapi stilovi. Radi se o relativnoj putanji od HTML-datoteke do CSS-datoteke. 

 

Element link mora se uvijek nalaziti unutar HTML-elementa head.

Ako se HTML-stranica koristi većim brojem CSS-datoteka, uključit će se tako da se element link navede više puta.

 

Mogući su i načini pisanja CSS-koda u samoj HTML-datoteci. Za to služi HTML-element style, u kojem se izravno mogu pisati CSS-pravila:

<style type="text/css">

p{

color:red;

}

</style>

 

Element style uvijek se mora nalaziti unutar elementa head.

Atribut type u tom se slučaju postavlja na vrijednost "type/css", a može se i izostaviti.

 

Drugi način na koji se CSS-kod može izravno "ubaciti" u HTML je preko atributa style:

<p style="color:red;">

    Tko rano rani, dvije sreće grabi.

<p>

 

Atribut style može se staviti na gotovo svaki HTML-element.

U ovom slučaju pišu se samo CSS-deklaracije, bez selektora, a te će se deklaracije primijeniti samo na taj HTML-element.