Svojstvo (CSS)

Svojstvo (en. property) u jeziku CSS definira način (stil) prikazivanja nekog elementa oznakovnih jezika (markup language), kao što su HTML ili wikitekst.

Svojstvo se definira u deklaracijskom bloku parom svojstvo : vrijednost, gdje je svojstvo predefinirano ime svojstva kome se pridružuje jedna ili više vrijednosti u odgovarajućim jedinicama. Vrijednost, ovisno o svojstvu, može biti proizvoljna (100, 200...) ili predefinirana (left, right...). Preglednik treba imati mehanizam za obradu neispravno unijetih vrijednosti i najčešće će to biti vraćanje na zadanu (default) vrijednost.

Deklaracijski blok

Deklaracijski blok za neki element (<font>, <div>...) koji se definira u zaglavlju dokumenta ili vanjskoj CSS datoteci vezuje se za jedan ili više selektora (.zaglavlje, #valuta, a:visited...) i vrijedi za svako pojavljivanje tog elementa u čitavom dokumentu. Deklaracijski blok u samom elementu (inline, slično atributima u HTML-u) je lokalni i definira svojstvo samo za to jedno pojavljivanje elementa. Lokalnom deklaracijom može se prevazići opća deklaracija elementa ili samo pojedinačno svojstvo elementa. Deklaracijski blok može sadržavati više definicija svojstava.

opći deklaracijski blok selektora	lokalni daklaracijski blok elementa
p { display: block; margin: 2em }	<p style="display: block; margin: 1em;">
stil pasusa za čitav dokument	promijenjeno svojstvo margin za pasus u kome se nalazi definicija

Standardi

Organizacije W3C (World Wide Web Consortium) definira web standarde, između ostalih i za CSS. Do sada su za CSS objavljena 3 standarda:

• CSS 1 (Cascading Style Sheets, level 1), preporuka 17. prosinca 1996., revizija 11. siječnja 1999.
• CSS 2 (Cascading Style Sheets, level 2), preporuka 12. svibnja 1998., revizija 11. travnja 2008.
• CSS 2.1 (Cascading Style Sheets Level 2 Revision 1), preporuka 7 lipnja 2011., uređivanje 17. prosinca 2014.

Sva tri objavljena standarda su u obliku jednog skupnog dokumenta (po jedan za svaki standard). CSS 3 uvodi novi način specifikacije po grupama svojstava, u posebnim dokumentima, takozvanim modulima (tekst, tablice, animacije...). Do sada je objavljeno preko 50 modula. Moduli su u raznim stadijima razvoja i mogu imati neki od sljedećih statusa:

• Nacrti urednika (Editor's draft, ED)
• Radni nacrt (Working Draft, WD)
• Kandidat za preporuku (Candidate Recommendation, CR)
• Predložena preporuka (Proposed Recommendation, PR)
• W3C preporuka (W3C Recommendation, REC)
• Napomene radnoj ili interesnoj grupi (Working Group Note, Interest Group Note, NOTE)
• Opozvana preporuka (Rescinded Recommendation, RR)

Sve inačice su unatrag kompatibilne, tako da CSS 3, osim definiranja novih svojstava, obuhvaća svojstva iz standarda CSS 2.1, ali ih u nekim slučajevima dopunjava ili opoziva (zbog kompatibilnosti ih ne ukida, već samo ne preporuča uporabu).

(Navedene oznake statusa rabe se u donjoj tablici; ✓označava usvojenu preporuku, odnsono da nema izmjena u odnosu na prethodne standarde.)

Pregled

Ova tablica sadržava pregled svojstava (properties) iz jezika CSS.

Svojstvo	Vrijednosti		Kratak opis	Stanje svojstva
	Sintaksa	Zadano		CSS 1	CSS 2	CSS 2.1	CSS 3
align-content	stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit	stretch	podešavanje svojstva flex-wrap	✗	✗	✗	wd
align-items	stretch | center | flex-start | flex-end | baseline | initial | inherit	stretch	ravnanje fleksibilnog sadržaja	✗	✗	✗	wd
align-self	auto | stretch | center | flex-start | flex-end | baseline | initial | inherit	auto	ravnanje fleksibilnog sadržaja	✗	✗	✗	wd
alignment-adjust	<postotak> | <dužina> | auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical	auto	ravnanje elemenata	✗	✗	✗	ed
alignment-baseline	baseline | use-script | before-edge | text-before-edge | after-edge | text-after-edge | central | middle | ideographic | alphabetic | hanging | mathematical	baseline	ravnanje osnovne linije (umjesto ovog svojstva preporuča se uporaba <vertical-align>)	✗	✗	✗	ed
all	initial | inherit | unset	ovisi o pojedinačnim svojstvima	skupno svojstvo, resetira ostala svojstva	✗	✗	✗	cr
animation	<animation-name> || <vrijeme> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode> || <animation-play-state>	ovisi o pojedinačnim svojstvima	skupno definiranje 8 svojstava za animaciju	✗	✗	✗	wd
animation-delay	<vrijeme> | initial | inherit	0	odlaganje početka animacije	✗	✗	✗	wd
animation-direction	normal | reverse | alternate | alternate-reverse | initial | inherit	normal	smjer animacije	✗	✗	✗	wd
animation-duration	<vrijeme> | initial | inherit	0	vrijeme jednog ciklusa animacije	✗	✗	✗	wd
animation-fill-mode	none | forwards | backwards | both | initial | inherit	none	stil popune animacije za vrijeme pauze	✗	✗	✗	wd
animation-iteration-count	<broj> | infinite | initial | inherit	1	broj ponavljanja animacije	✗	✗	✗	wd
animation-name	<identifikator> | none | initial | inherit	none	ime za @keyframes animacije	✗	✗	✗	wd
animation-play-state	paused | running | initial | inherit	running	definiranje stanja animacije	✗	✗	✗	wd
animation-timing-function	linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit	ease	definiranje krivulje brzine animacije	✗	✗	✗	wd
azimuth	<kut> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit	center	azimut (vodoravna ravnina) smjera zvuka	✗	✓	✓	✓
backface-visibility	visible | hidden | initial | inherit	visible	vidljivost pozadinskog elementa	✗	✗	✗	wd
background	[ [<background-image> || <background-position> [ / <background-size> ]? || <background-repeat> || <background-attachment> || [border-box | padding-box | content-box] || [border-box | padding-box | content-box] ], ]* [<background-image> || <background-position> [ / <background-size> ]? || <background-repeat> || <background-attachment> || [border-box | padding-box | content-box] || [border-box | padding-box | content-box] || <background-color>]	ovisi o pojedinačnim svojstvima	skupno svojstvo pozadine	✓	✓	✓	cr
background-attachment	scroll | fixed | inherit	scroll	način prikazivanja slike pozadine	✓	✓	✓	cr
background-clip	border-box | padding-box | content-box | initial | inherit	border-box	definiranje područja bojenja pozadine	✗	✗	✗	cr
background-color	<boja> | transparent | inherit	transparent	boja pozadine	✓	✓	✓	cr
background-image	<uri> | none | inherit	none	izvor slike pozadine	✓	✓	✓	cr
background-origin	padding-box | border-box | content-box | initial | inherit	padding-box	definiranje mjesta slike pozadine	✗	✗	✗	cr
background-position	[ [ <postotak> | <dužina> | left | center | right ] [ <postotak> | <dužina> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit	0% 0%	početni položaj slike pozadine	✓	✓	✓	cr
background-repeat	repeat | repeat-x | repeat-y | no-repeat | inherit	repeat	ponavljanje slike pozadine	✓	✓	✓	cr
background-size	<dužina> | <postotak> | auto | cover | contain | initial | inherit	auto	veličina slike pozadine	✗	✗	✗	cr
baseline-shift	<dužina> | <postotak> | sub | super	baseline	pomak od osnovne linije (umjesto ovog svojstva preporuča se uporaba <vertical-align>)	✗	✗	✗	ed
binding	none | <uri>	none	povezivanje dokumenta	✗	✗	✗	note
bleed	auto | <dužina>	6pt	margina za odsijecanje kod tiskanih stranica	✗	✗	✗	ed
bookmark-label	<string-set> | none	none	naziv oznake (bookmark)	✗	✗	✗	wd
bookmark-level	none | <cijeli_broj>	none	razina oznake	✗	✗	✗	wd
bookmark-state	open | closed	open	prikazivanje oznake	✗	✗	✗	wd
border	[ <dužina> || <border-style> || border-top-color ] | inherit	ovisi o pojedinačnim svojstvima	skupno svojstvo okvira	✓	✓	✓	cr
border-bottom	[ <border-width> || <border-style> || <border-color> ] | inherit	ovisi o pojedinačnim svojstvima	skupno svojstvo donje ivice okvira	✓	✓	✓	cr
border-bottom-color	<boja> | transparent | inherit	currentColor	boja donje ivice okvira	✗	✓	✓	cr
border-bottom-left-radius	[ <dužina> | <postotak> ]{1,2}	0	polumjer donjeg lijevog kuta okvira	✗	✗	✗	cr
border-bottom-right-radius	[ <dužina> | <postotak> ]{1,2}	0	polumjer donjeg desnog kuta okvira	✗	✗	✗	cr
border-bottom-style	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset	none	stil donje ivice okvira	✗	✓	✓	cr
border-bottom-width	<dužina> | medium | thin | thick | initial | inherit	medium	debljina donje ivice okvira	✓	✓	✓	cr
border-collapse	separate | collapse | initial | inherit	separate	spajanje/razdvajanje okvira	✗	✓	✓	✓
border-color	[ <boja> | transparent ]{1,4} | inherit	ovisi o pojedinačnim svojstvima	skupno svojstvo boje okvira	✓	✓	✓	cr
border-image	<border-image-source> || <border-image-slice> [ / <border-image-width> | / <border-image-width>? / <border-image-outset> ]? || <border-image-repeat>	none	skupno svojstvo za sliku umjesto ivice okvira	✗	✗	✗	cr
border-image-outset	[ <dužina> | <broj> ]{1,4}	0	margina slike	✗	✗	✗	cr
border-image-repeat	[ stretch | repeat | round | space ]{1,2}	stretch	ponavljanje slike	✗	✗	✗	cr
border-image-slice	[<broj> | <postotak>]{1,4} && fill?	100%	odsječak slike	✗	✗	✗	cr
border-image-source	none | <slika>	none	izvor slike	✗	✗	✗	cr
border-image-width	[ <dužina> | <postotak> | <broj> | auto ]{1,4}	1	debljina okvira	✗	✗	✗	cr
border-left	[ <border-width> || <border-style> || <border-color> ] | inherit	ovisi o pojedinačnim svojstvima	skupno svojstvo lijeve ivice okvira	✓	✓	✓	cr
border-left-color	<boja> | transparent | inherit	currentColor	boja lijeve ivice okvira	✗	✓	✓	cr
border-left-style	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset	none	stil lijeve ivice okvira	✗	✓	✓	cr
border-left-width	<dužina> | medium | thin | thick | initial | inherit	medium	debljina lijeve ivice okvira	✓	✓	✓	cr
border-radius	[ <dužina> | <postotak> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?	0	skupno svojstvo okrugline kutova okvira	✗	✗	✗	cr
border-right	[ <border-width> || <border-style> || <border-color> ] | inherit	ovisi o pojedinačnim svojstvima	skupno svojstvo desne ivice okvira	✓	✓	✓	cr
border-right-color	<boja> | transparent | inherit	currentColor	boja desne ivice okvira	✗	✓	✓	cr
border-right-style	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset	none	stil desne ivice okvira	✗	✓	✓	cr
border-right-width	<dužina> | medium | thin | thick | initial | inherit	medium	debljina desne ivice okvira	✓	✓	✓	cr
border-spacing	<dužina> <dužina>? | inherit	0	razmak okvira susjednih polja	✗	✓	✓	✓
border-style	[ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} | inherit	ovisi o pojedinačnim svojstvima	skupno svojstvo stila okvira	✓	✓	✓	cr
border-top	[ <border-width> || <border-style> || <border-color> ] | inherit	ovisi o pojedinačnim svojstvima	skupno svojstvo gornje ivice okvira	✓	✓	✓	cr
border-top-color	<boja> | transparent | inherit	currentColor	boja gornje ivice okvira	✗	✓	✓	cr
border-top-left-radius	[ <dužina> | <postotak> ]{1,2}	0	polumjer gornjeg lijevog kuta okvira	✗	✗	✗	cr
border-top-right-radius	[ <dužina> | <postotak> ]{1,2}	0	polumjer gornjeg desnog kuta okvira	✗	✗	✗	cr
border-top-style	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset	none	stil gornje ivice okvira	✗	✓	✓	cr
border-top-width	<dužina> | medium | thin | thick | initial | inherit	medium	debljina gornje ivice okvira	✓	✓	✓	cr
border-width	[ <dužina> | thin | medium | thick]{1,4}	ovisi o pojedinačnim svojstvima	skupno svojstvo debljine okvira	✓	✓	✓	cr
bottom	<dužina> | <postotak> | auto | inherit	auto	razmak pozicioniranog elementa od donje ivice	✗	✓	✓	✓
box-decoration-break	slice | clone	slice	ponašanje bloka kod prijeloma stranice, linije...	✗	✗	✗	cr
box-shadow	none | inset? && <dužina>{2,4} && <boja>? [ , inset? && <dužina>{2,4} && <boja>? ]*	none	jedna ili više sjena bloka	✗	✗	✗	cr
box-sizing	content-box | border-box	content-box	odabir svojstva čija se veličina (visina i širina) mijenja	✗	✗	✗	cr
box-snap	none | block-start | block-end | center | first-baseline | last-baseline	none	vezivanje bloka uz liniju rešetke	✗	✗	✗	wd
box-suppress	show | discard | hide	show	način prikazivanja bloka	✗	✗	✗	wd
break-after	auto | always | avoid | left | right | page | column | region | avoid-page | avoid-column | avoid-region	auto	ponašanje prijeloma stranice, stupca ili područja iza bloka	✗	✗	✗	wd
break-before	auto | always | avoid | left | right | page | column | region | avoid-page | avoid-column | avoid-region	auto	ponašanje prijeloma stranice, stupca ili područja prije bloka	✗	✗	✗	cr
break-inside	auto | avoid | avoid-page | avoid-column | avoid-region	auto	ponašanje prijeloma stranice, stupca ili područja u bloku	✗	✗	✗	cr
caption-side	top | bottom | inherit	top	položaj naslova tablice	✗	✓	✓	✓
chains	none | <identifikator>+ [ , <identifikator>+ ]*	none	povezivanje elemenata rastera	✗	✗	✗	note
clear	none | left | right | both | inherit	none	prostiranje lebdjećih elemenata	✓	✓	✓	wd
clip	<rect()> | auto	auto	odsijecanje pravokutnog dijela elementa; opozvano, preporuča se <clip-path>	✗	✓	✓	rr
clip-path	<clip-source> | [ <basic-shape> || <geometry-box> ] | none	none	zatvorena vektorska putanja za odsijecanje elementa	✗	✗	✗	cr
clip-rule	nonzero | evenodd	nonzero	algoritam odsijecanja za <clip-path>	✗	✗	✗	cr
color	<boja> | inherit	ovisi o pregledniku	boja teksta i posredno definiranje currentColor u nekim svojstvima	✓	✓	✓	✓
color-interpolation-filters	auto | sRGB | linearRGB	auto	raspon boja na kome se primijenjuju filtri	✗	✗	✗	wd
columns	<column-width> || <column-count>	ovisi o pojedinačnim svojstvima	skupno svojstvo stupaca	✗	✗	✗	cr
column-count	<cijeli_broj> | auto | initial | inherit	auto	definiranje broja stupaca	✗	✗	✗	cr
column-fill	auto | balance	balance	način popunjavanja stupaca	✗	✗	✗	cr
column-gap		normal	razmak među stupcima	✗	✗	✗	cr
column-rule	<column-rule-width> || <column-rule-style> || [ <column-rule-color> | transparent ]	ovisi o pojedinačnim svojstvima	skupno svojstvo linije među stupcima	✗	✗	✗	cr
column-rule-color	<boja>	ovisi o pregledniku	boja linije među stupcima	✗	✗	✗	cr
column-rule-style	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit	medium	stil linije među stupcima	✗	✗	✗	cr
column-rule-width	<dužina> | medium | thin | thick | initial | inherit	medium	debljina linije među stupcima	✗	✗	✗	cr
column-span	none | all	none	na koliko stupaca se pruža element	✗	✗	✗	cr
column-width	<dužina> | auto	auto	širina stupca	✗	✗	✗	cr
contain	none | strict | [ layout || style || paint ]	none	definiranje sadržaja neovisnog od ostatka dokumenta	✗	✗	✗	ed
content	normal | none | [ <niz> | <uri> | <brojač> | attr(<identifikator>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit	normal	ubacivanje generiranog sadržaja	✗	✓	✓	wd
counter-increment	[ <identifikator> <cijeli_broj>? ]+ | none | inherit	none	uvećanje vrijednosti postojećeg brojača	✗	✓	✓	wd
counter-reset	[ <identifikator> <cijeli_broj>? ]+ | none | inherit	none	kreiranje novog brojača	✗	✓	✓	wd
counter-set	[ <identifikator> <cijeli_broj>? ]+ | none | inherit	none	zadavanje početne vrijednosti postojećeg brojača	✗	✗	✗	wd
crop	<rect()> | <inset-rect()> | auto	auto	za zamijenjene elemente pravokutno područje umjesto cijelog elementa	✗	✗	✗	wd
cue	<cue-before> <cue-after>?	ovisi o pojedinačnim svojstvima	skupno svojstvo redoslijeda reprodukcije zvuka	✗	✓	✓	cr
cue-after	<uri> <decibel>? | none	none	reprodukcija zvuka iza elementa	✗	✓	✓	cr
cue-before	<uri> <decibel>? | none	none	reprodukcija zvuka prije elementa	✗	✓	✓	cr
cursor	[ [<url> [<dužina_x> <dužina_y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ] ]	auto	mijenja tip kurzora	✗	✓	✓	cr
direction	ltr | rtl | inherit	ltr	smjer pisanja teksta	✗	✓	✓	✓
display	inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit	inline	tip bloka za prikazivanje teksta	✓	✓	✓	✓
dominant-baseline	auto | text-bottom | alphabetic | central | mathematical | hanging | text-top	auto	dominantna osnovna linija za ravnanje	✗	✗	✗	ed
elevation	<kut> | below | level | above | higher | lower | inherit	level	elevacija (okomita ravnina) smjera zvuka	✗	✓	✓	✓
empty-cells	show | hide | inherit	show	kako se prikazuju prazna polja tablice	✗	✓	✓	✓
filter	[ [<blur(<dužina>)> | <brightness(<broj> | <postotak>)> | <contrast(<broj> | <postotak>)> | <drop-shadow(<dužina>{2,3} <boja>?)> | <grayscale(<broj> | <postotak>)> | <hue-rotate(<kut>)> | <invert(<broj> | <postotak>)> | <opacity(<broj> | <postotak>)> | <sepia(<broj> | <postotak>)> | <saturate(<broj> | <postotak>)>] | <url> ]+	none	vizualni efekti na nekom nelementu (najčešće slikama)	✗	✗	✗	wd
flex	none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]	ovisi o pojedinačnim svojstvima	skupno svojstvo za flex elemente	✗	✗	✗	cr
flex-basis	<dužina> | auto | initial | inherit	auto	definira početnu dužinu flex elementa	✗	✗	✗	cr
flex-direction	row | row-reverse | column | column-reverse	row	smjer flex elementa	✗	✗	✗	cr
flex-flow	<flex-direction> || <flex-wrap>	ovisi o pojedinačnim svojstvima	skupno svojstvo pružanja flex elemenata	✗	✗	✗	cr
flex-grow	<broj>	0	porast u odnosu na ostale sadržane elemete	✗	✗	✗	cr
flex-shrink	<broj>	1	sažimanje u odnosu na ostale sadržane elemete	✗	✗	✗	cr
flex-wrap	nowrap | wrap | wrap-reverse	nowrap	definiranje prijeloma reda	✗	✗	✗	cr
float	left | right | none | inherit	none	pozicioniranje lebdjećeg elementa	✓	✓	✓	wd
float-offset	<dužina> | <postotak>	0	definiranje suprotnog smjera straničnog lebdjećeg elementa	✗	✗	✗	ed
flood-color	<boja>	black	boja popunjavanja	✗	✗	✗	wd
flood-opacity	<dužina> | <postotak>	1	prozirnost popunjavanja	✗	✗	✗	wd
flow-from	<identifikator> | none | inherit	none	povezivanje: iz elementa	✗	✗	✗	wd
flow-into	none | <identifikator> [element|content]?	none	povezivanje: u element	✗	✗	✗	wd
font	[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit	ovisi o pojedinačnim svojstvima	skupno svojstvo fonta	✓	✓	✓	cr
font-family	[[ <ime_obitelji> | [serif || sans-serif || cursive ||fantasy || monospace] ] [, <ime_obitelji>| [serif || sans-serif || cursive ||fantasy || monospace] ]* ] | inherit	ovisi o pregledniku	tip fonta	✓	✓	✓	cr
font-feature-settings	normal | [ <niz> [ <cijeli_broj> | on | off ]? ]	normal	dodatne osobine fonta	✗	✗	✗	cr
font-kerning	auto | normal | none	auto	način prikazivanja kerninga	✗	✗	✗	cr
font-language-override	normal | <niz>	normal	definiranje jezika fonta	✗	✗	✗	cr
font-size	[ xx-small | x-small | small | medium | large | x-large | xx-large ] | [ larger | smaller ] | <dužina> | <postotak>	medium	definiranje veličine (visine) fonta	✓	✓	✓	cr
font-size-adjust	none | <broj>	none	podešavanje veličine pri zamjeni fonta	✗	✓	✗	cr
font-stretch	normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded	normal	povećanje ili smanjivanje širine teksta	✗	✓	✗	cr
font-style	normal | italic | oblique | inherit	normal	stil fonta	✓	✓	✓	cr
font-synthesis	none | [ weight || style ]	weight style	sinteza kurzivnih i masnih slova	✗	✗	✗	cr
font-variant	normal | small-caps | inherit	normal	mala slova u verzalnom obliku	✓	✓	✓	cr
font-weight	normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit	normal	debljina fonta	✓	✓	✓	cr
hanging-punctuation	none | [ first || [ force-end | allow-end ] || last ]	none	ponašanje razgodaka u prijelomu	✗	✗	✗	wd
height	<dužina> | <postotak> | auto	auto	definiranje visine elementa	✓	✓	✓	wd
hyphens	none | manual | auto	manual	dijeljenje riječi na kraju reda	✗	✗	✗	wd
image-orientation	<kut>	0	rotacija slike	✗	✗	✗	cr
image-resolution	[from-image || <rezolucija> ] && snap?	normal	rezolucija slike	✗	✗	✗	cr
justify-content	flex-start | flex-end | center | space-between | space-around	auto	vodoravno raspoređivanje sadržaja	✗	✗	✗	cr
left	<dužina> | <postotak> | auto | inherit	auto	razmak pozicioniranog elementa od lijeve ivice	✗	✓	✓	✓
letter-spacing	normal | <dužina>	normal	razmak između slova	✓	✓	✓	wd
lighting-color	<boja>	white	boja izvora svjetla	✗	✗	✗	wd
line-break	auto | loose | normal | strict	auto	prijelom reda u odnosu na razgotke	✗	✗	✗	wd
line-height	normal | <broj> | <dužina> | <postotak> | inherit	normal	visina linije teksta	✓	✓	✓	✓
line-snap	none | baseline | contain	none	vezivanje linije teksta uz liniju rešetke	✗	✗	✗	wd
list-style	<list-style-type> || <list-style-position> || <list-style-image>	ovisi o pojedinačnim svojstvima	skupno svojstvo stila popisa	✓	✓	✓	wd
list-style-image	<uri> | none | inherit	none	slika umjesto markera u popisu	✓	✓	✓	wd
list-style-position	inside | outside	outside	položaj markera u popisu	✓	✓	✓	wd
list-style-type	<niz> | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit	disc	tip markera u popisu	✓	✓	✓	wd
margin	[ <dužina> | <postotak> | auto ]{1,4}	ovisi o pojedinačnim svojstvima	skupno svojstvo margina	✓	✓	✓	wd
margin-bottom	<dužina> | <postotak> | auto	0	donja margina	✓	✓	✓	wd
margin-left	<dužina> | <postotak> | auto	0	lijeva margina	✓	✓	✓	wd
margin-right	<dužina> | <postotak> | auto	0	desna margina	✓	✓	✓	wd
margin-top	<dužina> | <postotak> | auto	0	gornja margina	✓	✓	✓	wd
marker-offset	<dužina> | auto | inherit	auto	razmak od ivice okvira	✗	✓	✗	✗
marker-side	list-item | list-container	list-item	položaj markera	✗	✗	✗	wd
marks	none | [ crop || cross ]	none	oznake za tiskane stranice	✗	✓	✗	ed
max-height	<dužina> | <postotak> | none	none	najveća visina	✗	✓	✓	wd
max-lines	none | <cijeli_broj>	none	definiranje visine preko najvećeg broja redaka	✗	✗	✗	wd
max-width	<dužina> | <postotak> | none	none	najveća širina	✗	✓	✓	wd
min-height	<dužina> | <postotak> | none	0		✗	✓	✓	wd
min-width	<dužina> | <postotak> | none	0		✗	✓	✓	wd
move-to	normal | here | <identifikator>	normal	premještanje elementa na kasnije mjesto u dokumentu	✗	✗	✗	wd
nav-down	auto | <identifikator> [ current | root | <niz> ]?	auto	učinak tipke "dolje" s tipkovnice	✗	✗	✗	cr
nav-index	<number> | auto | inherit	auto	redoslijed tabulatora; opozvano	✗	✗	✗	wd
nav-left	auto | <identifikator> [ current | root | <niz> ]?	auto	učinak tipke "lijevo" s tipkovnice	✗	✗	✗	cr
nav-right	auto | <identifikator> [ current | root | <niz> ]?	auto	učinak tipke "desno" s tipkovnice	✗	✗	✗	cr
nav-up	auto | <identifikator> [ current | root | <niz> ]?	auto	učinak tipke "gore" s tipkovnice	✗	✗	✗	cr
object-fit	fill | contain | cover | none | scale-down	fill	način prilagođenja sadržaja veličini elementa u kome se nalazi	✗	✗	✗	cr
object-position	<background-position>	50% 50%	ravnanje sadržaja unutar elementa u kome se nalazi	✗	✗	✗	cr
opacity	<broj> | inherit	1	prozirnost (0.0 = potpuno prozirno, 1 = potpuno neprozirno)	✗	✗	✗	✓
order	<cijeli_broj>	0	redoslijed elemenata	✗	✗	✗	cr
orphans	<cijeli_broj>	2	min. broj linija na dnu stranice kod prijeloma	✗	✓	✓	cr
outline	[ <outline-color> || <outline-style> || <outline-width> ]	ovisi o pojedinačnim svojstvima	skupno svojstvo obrisa (granične linije elementa)	✗	✓	✓	cr
outline-color	<boja> | invert	invert	boja linije obrisa	✗	✓	✓	cr
outline-offset	<dužina>	0	položaj obrisa u odnosu na ivicu okvira	✗	✗	✗	cr
outline-style	auto | <border-style>	none	stil linije obrisa	✗	✓	✓	cr
outline-width	<border-width>	medium	debljina linije obrisa	✗	✓	✓	cr
overflow	visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments	ovisi o pojedinačnim svojstvima	skupno svojstvo za prekoračenje veličine sadržaja	✗	✓	✓	wd
overflow-wrap	normal | break-word	normal	prebacivanje prevelikog sadržaja u novi red	✗	✗	✗	wd
overflow-x	visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments	visible	način prikazivanja vodoravnog prevelikog sadržaja	✗	✗	✗	wd
overflow-y	visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments	visible	način prikazivanja okomitog prevelikog sadržaja	✗	✗	✗	wd
padding	[ <dužina> | <postotak> ]{1,4}	ovisi o pojedinačnim svojstvima	skupno svojstvo za unutarnje margine	✓	✓	✓	wd
padding-bottom	[ <dužina> | <postotak> ]	0	donja unutarnja margina	✓	✓	✓	wd
padding-left	[ <dužina> | <postotak> ]	0	lijeva unutarnja margina	✓	✓	✓	wd
padding-right	[ <dužina> | <postotak> ]	0	desna unutarnja margina	✓	✓	✓	wd
padding-top	[ <dužina> | <postotak> ]	0	gornja unutarnja margina	✓	✓	✓	wd
page	auto | <identifikator>	auto	definiranje određene stranice na kojoj se element mora nalaziti	✗	✓	✗	wd
page-break-after	auto | always | avoid | left | right | inherit	auto	nova stranica iza elementa	✗	✓	✓	✓
page-break-before	auto | always | avoid | left | right | inherit	auto	nova stranica ispred elementa	✗	✓	✓	✓
page-break-inside	avoid | auto | inherit	auto	nova stranica usred elementa	✗	✓	✓	✓
page-policy	start | first | last	start	način uporabe brojača ili niza na stranici	✗	✗	✗	wd
pause	<pause-before> <pause-after>?	ovisi o pojedinačnim svojstvima	skupno svojstvo za pauzu u reprodukciji (tišine)	✗	✓	✓	cr
pause-after	<vrijeme> | none | x-weak | weak | medium | strong | x-strong	none	pauza nakon reprodukcije	✗	✓	✓	cr
pause-before	<vrijeme> | none | x-weak | weak | medium | strong | x-strong	none	pauza prije reprodukcije	✗	✓	✓	cr
perspective	none | <dužina>	none	dodavanje perspektive	✗	✗	✗	wd
perspective-origin	[ left | center | right | top | bottom | <postotak> | <dužina> ] | [ left | center | right | <postotak> | <dužina> ] [ top | center | bottom | <postotak> | <dužina> ] | [ center | [ left | right ] ] && [ center | [ top | bottom ] ]	50% 50%	podešavanje ishodišta prespektive	✗	✗	✗	wd
pitch	<frekvencija> | x-low | low | medium | high | x-high | inherit	medium	prosječna visina tona; opozvano	✗	✓	✓	✗
pitch-range	<broj> | inherit	50	odstupanje od prosječne visine tona; opozvano	✗	✓	✓	✗
play-during	<uri> [ mix || repeat ]? | auto | none | inherit	auto	reprodukcija u pozadini; opozvano	✗	✓	✓	✗
position	static | relative | absolute | sticky | center | page | fixed	static	tip pozicioniranja elementa	✗	✓	✓	wd
presentation-level	<cijeli_broj> | same | increment	0	razina (dubina) prikazivanja	✗	✗	✗	note
quotes	none | [ <niz> <niz> ]+	text	definiranje navodnika	✗	✓	✓	wd
region-fragment	auto | break	auto	prijelom posljednjeg fragmenta područja	✗	✗	✗	wd
resize	none | both | horizontal | vertical	none	promjena veličine elementa	✗	✗	✗	cr
rest	<rest-before> <rest-after>?	ovisi o pojedinačnim svojstvima	skupno svojstvo za pauzu u reprodukciji (za razliku od <pause>, smješta se između sadržaja i <cue-before> ili <cue-after>)	✗	✗	✗	cr
rest-after	<vrijeme> | none | x-weak | weak | medium | strong | x-strong	none	pauza nakon reprodukcije	✗	✗	✗	cr
rest-before	<vrijeme> | none | x-weak | weak | medium | strong | x-strong	none	pauza prije reprodukcije	✗	✗	✗	cr
richness	<broj> | inherit	50	jasnoća zvuka; opozvano	✗	✓	✓	✗
right	<dužina> | <postotak> | auto | inherit	auto	razmak pozicioniranog elementa od desne ivice	✗	✓	✓	✓
rotation	<kut>	0	rotiranje elementa oko točke definirane u <rotation-point>	✗	✗	✗	wd
rotation-point	<background-position>	50% 50%	točka oko koje element rotira	✗	✗	✗	wd
shape-image-threshold	<broj>	0.0	prag za ekstrakciju alfa kanala	✗	✗	✗	cr
shape-margin	<dužina> | <postotak>	0	dodavanje margine za svojstvo <shape-outside>	✗	✗	✗	cr
shape-outside	none | [ "<basic-shape>" || "<shape-box>" ] | "<image>"	none	definiranje oblika	✗	✗	✗	cr
size	<dužina>{1,2} | auto | [ <page-size> || [ portrait | landscape] ]	auto	veličina i orijentacija bloka	✗	✓	✗	wd
speak	auto | none | normal	auto	konverzija teksta u zvuk	✗	✓	✓	cr
speak-as	normal | spell-out || digits || [ literal-punctuation | no-punctuation	normal	način konverzije teksta u zvuk	✗	✗	✗	cr
speak-header	once | always | inherit	once	ponavljanje; opozvano	✗	✓	✓	✗
speak-numeral	digits | continuous | inherit	continuous	način izgovaranja brojeva; opozvano	✗	✓	✓	✗
speak-punctuation	code | none | inherit	none	način izgovaranja razgodaka; opozvano	✗	✓	✓	✗
speech-rate	<broj> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit	medium	brzina izgovora; opozvano	✗	✓	✓	✗
stress	<broj> | inherit	50	naglasak; opozvano	✗	✓	✓	✗
string-set	[[ <identifikator> "<content-list>"] [, <identifikator> "<content-list>"]* ] | none	none	način konstrukcije imenovanog popisa	✗	✗	✗	wd
tab-size	<broj> | <postotak>	8	veličina tabulatora	✗	✗	✗	wd
table-layout	auto | fixed | inherit	auto	način prikazivanja tablice	✗	✓	✓	✓
text-align	start | end | left | right | center | justify | match-parent | start end	start	vodoravno ravnanje sadržaja	✓	✓	✓	wd
text-align-last	auto | start | end | left | right | center | justify	auto	ravnanje posljednje linije sadržaja	✗	✗	✗	wd
text-combine-upright	none | all | [ digits <cijeli_broj>? ]	none	okomito kombiniranje teksta	✗	✗	✗	cr
text-decoration	none | [ <text-decoration-line> || <text-decoration-style> || <text-decoration-color> ]	none	skupno svosjtvo podcrtavanja teksta	✓	✓	✓	cr
text-decoration-color	<boja>	currentColor	boja crte za podcrtavanja teksta	✗	✗	✗	cr
text-decoration-line	none | [ underline || overline || line-through || blink ]	none	mjesto crte za podcrtavanje teksta	✗	✗	✗	cr
text-decoration-skip	none | [ objects || spaces || ink || edges || box-decoration ]	objects	kontinualnost crte za podvlačenje teksta	✗	✗	✗	cr
text-decoration-style	solid | double | dotted | dashed | wavy	solid	izgled crte za podcrtavanje teksta	✗	✗	✗	cr
text-indent	[ <dužina> | <postotak> ] && hanging? && each-line?	0	uvlačenje reda	✓	✓	✓	wd
text-justify	auto | none | inter-word | distribute	auto	način ravnanja desne ivice teksta (ako je u <text-align> odabrano justify)	✗	✗	✗	wd
text-orientation	mixed | upright | sideways	mixed	orijentacija teksta	✗	✗	✗	cr
text-overflow	[ clip | ellipsis | <niz> ]{1,2}	clip	postupak s preširokim tekstom (ako svojstvo <overflow> nije visible)	✗	✗	✗	cr
text-shadow	none | [ <dužina>{2,3} && <boja>? ]#	none	sjena teksta	✗	✓	✗	cr
text-space-collapse	collapse | discard | preserve | preserve-auto | preserve-trim | preserve-breaks | preserve-spaces	collapse	sažimanje bjelina	✗	✗	✗	ed
text-transform	none | capitalize | uppercase | lowercase | full-width	none	transformacija teksta	✓	✓	✓	wd
text-underline-position	auto | [ under || [ left | right ] ]	auto	položaj crte za podvlačenje teksta	✗	✗	✗	cr
top	<dužina> | <postotak> | auto | inherit	auto	razmak pozicioniranog elementa od gornje ivice	✗	✓	✓	✓
transform	"<transform-function>"+	none	2D i 3D transformacija elementa	✗	✗	✗	wd
transform-origin	[ left | center | right | top | bottom | <postotak> | <dužina> ] | [ left | center | right | <postotak> | <dužina> ] [ top | center | bottom | <percentage> | <length> ] <length>? | [ center | [ left | right ] ] && [ center | [ top | bottom ] ] <length>?	50% 50% 0	referentna točka za transformaciju	✗	✗	✗	wd
transform-style	flat | preserve-3d	flat	način transformacije	✗	✗	✗	wd
transition	[ [ none | <single-transition-property> ] || <vrijeme> || <single-transition-timing-function> || <vrijeme>] [ ',' [ [ none | <single-transition-property> ] || <vrijeme> || <single-transition-timing-function> || <vrijeme>] ]*	ovisi o pojedinačnim svojstvima	skupno svojstvo tranzicije elementa (pretvaranja iz jednog oblika u drugi)	✗	✗	✗	wd
transition-delay	<vrijeme> [, <vrijeme>]*	0s	odlaganje početka tranzicije	✗	✗	✗	wd
transition-duration	<vrijeme> [, <vrijeme>]*	0s	trajanje tranzicije	✗	✗	✗	wd
transition-property	none | [all | <identifikator>] [ ',' [all | <identifikator>] ]*	all	ime svojstva na koji se tranzicija odnosi	✗	✗	✗	wd
transition-timing-function	[ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<cijeli_broj>[, [ start | end ] ]?) | cubic-bezier(<broj>, <broj>, <broj>, <broj>)] [ ',' [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<cijeli_broj>[, [ start | end ] ]?) | cubic-bezier(<broj>, <broj>, <broj>, <broj>)] ]*	ease	međuvrijednosti u tranziciji	✗	✗	✗	wd
unicode-bidi	normal | embed | isolate | bidi-override | isolate-override | plaintext	normal	skupa s <direction> omogućava više jezika u istom dokumentu	✗	✓	✓	cr
vertical-align	<baseline-shift> || <alignment-baseline>	baseline	okomito ravnanje (preporuča se uporaba ovog svojstva umjesto pojedinačnih <baseline-shift> i <alignment-baseline>)	✓	✓	✓	ed
visibility	visible | hidden | collapse	visible	vidljivost elementa	✗	✓	✓	wd
voice-balance	<broj> | left | center | right | leftwards | rightwards	center	balans zvuka	✗	✗	✗	cr
voice-duration	auto | <vrijeme>	auto	trajanje zvuka	✗	✗	✗	cr
voice-family	[ [<niz> | [ [child | young | old]? [male | female | neutral] <cijeli_broj>?] ],]* [<niz> | [ [child | young | old]? [male | female | neutral] <cijeli_broj>?] ] | preserve	ovisi o pregledniku	parametri sinteze zvuka	✗	✓	✓	cr
voice-pitch	<frekvencija> && absolute | [[x-low | low | medium | high | x-high] || [<frekvencija> | <semitones> | <postotak> ]]	medium	osnovna visina tona	✗	✗	✗	cr
voice-range	<frekvencija> && absolute | [[x-low | low | medium | high | x-high] || [<frekvencija> | <semitones> | <postotak>]]	medium	odstupanje od osnovne visine tona	✗	✗	✗	cr
voice-rate	[normal | x-slow | slow | medium | fast | x-fast] || <postotak>	normal	brzina govora	✗	✗	✗	cr
voice-stress	normal | strong | moderate | none | reduced	normal	jačina naglaska	✗	✗	✗	cr
voice-volume	silent | [[x-soft | soft | medium | loud | x-loud] || <decibel>]	medium	jačina zvuka	✗	✗	✗	cr
volume	<broj> | <postotak> | silent | x-soft | soft | medium | loud | x-loud | inherit	medium	jačina zvuka; opozvano	✗	✓	✓	✗
white-space	normal | pre | nowrap | pre-wrap | pre-line	normal	sažimanje i prijelom blelina	✓	✓	✓	wd
widows	<cijeli_broj>	2	min. broj linija na vrhu stranice kod prijeloma	✗	✓	✓	cr
width	<dužina> | <postotak> | auto	auto	širina elementa (uključuje sadržaj, unutarnju marginu i okvir)	✓	✓	✓	wd
word-break	normal | keep-all | break-all	normal	prijelom (usred) riječi	✗	✗	✗	wd
word-spacing	[ normal | <dužina> | <postotak>]	normal	razmak između riječi	✓	✓	✓	wd
word-wrap	normal | break-word	normal	prijelom dugih riječi (isto što i <overflow-wrap>)	✗	✗	✗	wd
wrap-flow	auto | both | start | end | minimum | maximum | clear	auto	tok sadržaja oko elementa	✗	✗	✗	ed
writing-mode	horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr	horizontal-tb	pružanje linija teksta (vodoravno/okomito, smjer)	✗	✗	✗	cr
z-index	auto | <cijeli_broj> | inherit	auto	redoslijed elemeta po "dubini" (ispred/iza)	✗	✓	✓	✓
Svojstvo	Sintaksa	Zadano	Kratak opis	CSS 1	CSS 2	CSS 2.1	CSS 3
	Vrijednosti			Stanje svojstva

Napomene:

• Objašnjenje sintakse u stupcu "Sintaksa"

<vrijednost> <vrijednost>	Vrijednost (napisana hrvatskim jezikom u kurzivu, npr. <postotak>, <dužina>, <boja>...) navodi se u odgovarajućoj jedinici (vidjeti donju tablicu); Kod grupnih svojstava (napisanih engleskim jezikom) preuzima se odgovarajuća vrijednost pojedinačnog pod-svojstva (npr. vrijednost <animation-direction> svojstva animation može imati neku od vrijednosti svojstva <animation-direction>, odnosno normal, reverse itd).
vrijednost	Vrijednost (ili grupa vrijednosti) koja se mora doslovno napisati (ignorira se veličina slova), uključujući i razgotke.
"<vrijednost>"	Označava tip podatka koji sadržava nove tipove i/ili vrijednosti, te je preopširno za ubacivanje u tablicu (iako se u tablici nalaze razrađeni tipovi, npr. "<tip>" kao postotak|left|right).
A B C	Vrijednost se mora navesti, i upravo tim redoslijedom.
A && B	Moraju se javiti A i B, u bilo kom redoslijedu.
A | B	Mora se navesti A ili B.
A || B	Mora se javiti A ili B ili oba, u bilo kom redoslijedu.
[ vrijednost ]	Zagrade grupiraju vrijednosti.
vrijednost*	Vrijednost se ponavlja nula (može se izostaviti) ili više puta.
vrijednost+	Vrijednost se ponavlja jednom ili više puta.
vrijednost?	Vrijednost je opciona.
vrijednost{A,B}	Vrijednost se mora javiti najmanje A puta i najviše B puta.
vrijednost#	Vrijednost se ponavlja jednom ili više puta, razdvajaju se zarezima i opciono preciziraju s {A,B} (npr. <dužina>#{1,4}).
vrijednost!	Uskličnik iza grupe označava da je grupa obvezna i da mora proizvesti najmanje jednu vrijednost.

Jedinice za <vrijednost> iz gornje tablice

Vrijednost	Primjer jedinice	Napomena
postotak	60% , 130%
dužina	2em , 120px , 5cm
boja	gray , purple , #CD375F , rgb(29,101,209), rgb(80%,30%,40%), hsl(80%,30%,40%)	engleski nazivi ili brojna oznaka za boje
vrijeme	10s , -20ms
uri (url)	url("http://hr.wikipedia.org/wiki/Datoteka:Smiley.svg"), url(/audio/zvuk1.wav) , url('zvuk2.wav')	apsolutna ili relativna putanja; navodnici su opcioni
kut	90deg , 100grad , '1.570796326794897rad'	u primjeru je naveden isti (pravi) kut u stupnjevima, gradima i radijanima
frekvencija	512Hz (ili 512hz), 1.5kHz
niz	"hr", "HRV", "abc", 'abc'	niz znakova (proizvoljan ili predefiniran), između (računalnih) navodnika (") ili polunavodnika (')
broj	123 , 567.89 , -3.21	bilo koji broj
cijeli_broj	8, -32, 1234	samo cijeli brojevi
identifikator	id="vrijednost", id="A1234"	identifikacija određenog objekta; prvi primjer vodi na naslov iznad ove tablice
ime_obitelji	font-family: Helvetica, Verdana, sans-serif	naziv fonta; u primjeru sans-serif ne spada u <ime_obitelji> već je predefinirano <generičko_ime>
rezolucija	96dpi, 38dpcm, 2dppx	točka po inču, centimetru ili pikselu
oznake jedinica pišu se neposredno uz vrijednost (bez razmaka po hrvatskom pravopisu) decimalni brojevi pišu se po engleskom pravilu pisanja, s decimalnom točkom umjesto decimalnog zareza ako je neka vrijednost 0 (nula), oznaka jedinice može se izostavtiti (npr. 10% 0 0 10%), osim kod vrijednosti boja gdje se mora navesti, npr. hsl(50% 0% 30%).