CSS

Ovo je glavno značenje pojma CSS. Za druga značenja pogledajte CSS (razdvojba).

CSS je kratica od (eng.) Cascading Style Sheets. Radi se o stilskom jeziku, koji se rabi za opis prezentacije dokumenta napisanog pomoću markup (HTML) jezika.^[1]

Kako se web razvijao, prvotno su u HTML ubacivani elementi za definiciju prezentacije (npr. tag <font>), ali je dovoljno brzo uočena potreba za stilskim jezikom koji će HTML osloboditi potrebe prikazivanja sadržaja (što je prvenstvena namjena HTML-a) i njegovog oblikovanja (čemu danas služi CSS). Drugim riječima, stil definira kako prikazati HTML elemente. CSS-om se uređuje sam izgled i raspored stranice.

Sintaksa

Style sheet u CSS-u sastoji se od nekoliko pravila. Svako pravilo sastoji se od selektora i deklaracijskog bloka.

Selektor

Selektor (engl. selector) označava dio markupa na koji se primjenjuje stil. Selektor može biti:

• svi elementi istog tipa, npr. svi h2 elementi
• elementi određenog id ili class atributa:
  • id: jedinstven element
  • class: može obuhvaćati više od jednog elementa
• elementi u odnosu na druge elemente u DOM-u

Pseudoklase su klase koje omogućuju opisivanje informacija koje nisu dostupne u DOM-u poput :hover koji identificira sadržaj samo ako korisnik drži pokazivač nad sadržajem.

Deklaracijski blok

Deklaracijski blok su vitičaste zagrade unutar kojih se nalaze deklaracije. Svaka deklaracija sastoji se od svojstva, dvotočke (:) i vrijednosti. Između svake dvije uzastopne deklaracije mora se nalaziti točka zarez (;).^[2]

Vrijednosti mogu biti ključne riječi poput "center" (sredina) i "inherit" (naslijedi), brojčane vrijednosti poput 100 (debljina fonta), 200px (200 piksela), 50vw (50 % širine viewporta) ili 80% (80 % širine prozora). Vrijednosti boja mogu biti ključne riječi (npr. "red" za crveno), heksadecimalne vrijednosti (npr. #FF0000 ili #F00), RGB vrijednosti od 0 do 255 (npr. rgb(255, 0, 0)), RGBA vrijednosti koje uključuju i alpha prozirnost (npr. rgba(255, 0, 0, 0.8)) ili HSL/HSLA vrijednosti (npr. hsl(000, 100%, 50%), hsla(000, 100%, 50%, 80%)).^[3]

Primjeri

CSS možemo pisati unutar same HTML stranice, na dva načina:

• kao stilove u zaglavlju HTML dokumenta (tj. između <style> i </style> elementa)

   <style type="text/css">
     h1 { color: blue }
   </style>

• unutar samih HTML tagova, npr. <p style="color: magenta;">Neki tekst</p> što daje:

  Neki tekst

ili ga možemo definirati u posebnom dokumentu, i rabiti pomoću poziva:

• <link rel="stylesheet" href="xyz.css" type="text/css">

ili pak:

   <style type="text/css">
     @import url(http://www.neki.url/neki_stil%5Bneaktivna+poveznica%5D);
   </style>

Izvori

Informacija se u CSS-u može primiti na nekoliko načina. Izvori tih informacija mogu biti preglednik, korisnik i autor.

Različiti izvori imaju različite prioritete. U konačnici se prikazuje izvor s najvišim prioritetom. To se zove cascading.

Shema prioriteta u CSS-u (od najvišeg do najnižeg)

Prioritet	Izvor	Opis
1	Importance	Bilješka ‘!important’ ima najviši prioritet
2	Inline	Stil primijenjen na HTML element preko ‘style’ HTML atributa
3	Medijski upit	Definicija nekog svojstva primjenjuje se na sve medije (računalo, mobitel, ispis, ...), osim ako je definiran poseban CSS za taj medij
4	Definirano od strane korisnika	Većina preglednika ima značajku pristupačnosti: korisnički definiran CSS
5	Specifičnost selektora	Posebni kontekstualni selektor (#heading p) ima prioritet nad općenitim (samo #heading)
6	Redoslijed pravila	Posljednje deklarirano pravilo ima najviši prioritet
7	Nasljeđivanje od roditelja	Ako svojstvo nije deklarirano, nasljeđuje se od roditelja
8	CSS svojstvo unutar HTML dokumenta	CSS stil ima prednost pred vrijednosti koju definira sam preglednik
9	Zadano u pregledniku	Najniži prioritet ima vrijednost već deklarirana u samom pregledniku određena prema W3C specifikacijama zadanih vrijednosti

Povijest

CSS1

CSS2

CSS3

Izvori

1. CSS developer guide. Mozilla Developer Network. Pristupljeno 24. rujna 2015.
2. W3C CSS2.1 specification for rule sets, declaration blocks, and selectors (engleski). World Wide Web Consortium. 7. lipnja 2011. Pristupljeno 20. lipnja 2009.
3. CSS Color (engleski). Mozilla Developer Network. 28. lipnja 2016. Pristupljeno 23. kolovoza 2016.

Vanjske poveznice

• (eng.) CSS1 specifikacija
• (eng.) CSS2 specifikacija

Nedovršeni članak CSS koji govori o računarstvu treba dopuniti. Dopunite ga prema pravilima Wikipedije.