CSS

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);
   </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

↑ "CSS developer guide". https://developer.mozilla.org/en-US/docs/Web/Guide/CSS Pristupljeno 24. rujan 2015.
↑ "W3C CSS2.1 specification for rule sets, declaration blocks, and selectors" (engl.). World Wide Web Consortium. 7. lipanj 2011.. http://www.w3.org/TR/CSS21/syndata.html#q10 Pristupljeno 20. lipanj 2009.
↑ "CSS Color" (engl.). Mozilla Developer Network. 28. lipanj 2016.. https://developer.mozilla.org/en-US/docs/Web/CSS/color Pristupljeno 23. kolovoz 2016.

Vanjske poveznice

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

mk:CSS селектори
Nedovršeni članak CSS koji govori o računarstvu treba dopuniti. Dopunite ga prema pravilima uređivanja Hrvatske internetske enciklopedije.

[1] "CSS developer guide". https://developer.mozilla.org/en-US/docs/Web/Guide/CSS Pristupljeno 24. rujan 2015.

[2] "W3C CSS2.1 specification for rule sets, declaration blocks, and selectors" (engl.). World Wide Web Consortium. 7. lipanj 2011.. http://www.w3.org/TR/CSS21/syndata.html#q10 Pristupljeno 20. lipanj 2009.

[3] "CSS Color" (engl.). Mozilla Developer Network. 28. lipanj 2016.. https://developer.mozilla.org/en-US/docs/Web/CSS/color Pristupljeno 23. kolovoz 2016.

[1]

[2]

[3]