Da bi HTML-elementi bili vidljivi, može im se postaviti boja (odnosno boja pozadine).
Za postavljanje boje pozadine koristi se svojstvo background-color.
Kao i kod svojstva color, vrijednosti se mogu postaviti na više načina.
Može se koristiti naziv boje:
background-color: red;
Najčešće je korišteni način postavljanja vrijednosti, kao i kod svojstva color, heksadecimalni kod:
background-color: #f5412a;
Umjesto heksadecimalnog zapisa mogu se rabiti i RGB-vrijednosti:
background-color: rgb(245, 65, 42);
Ako je potrebno, moguće je postaviti i prozirnost i to tako da se navede vrijednost komponente a (kao decimalni broj između 0 i 1):
background-color: rgba(245, 65, 42, 0.5);
Također se za odabir boje može rabiti i model HSL:
background-color: hsl(7, 91%, 56%);
U njemu se također može postaviti prozirnost:
background-color: hsl(7, 91%, 56%, 0.5);
Prema načinu prikaza u HTML-u postoje dvije osnovne vrste elemenata.
Prva vrsta su blok-elementi (block elements).
Oni zauzimaju cijeli redak u kojem se nalaze.
Moguće im je odrediti visinu i širinu.
Čak i ako im se smanji širina, oni će i dalje zauzimati cijeli red tako da sljedeći element mora započeti u novom redu.
Primjeri takvih elemenata su div, p i h1.
Druga vrsta su linijski elementi (inline elements).
Ti elementi su prikazani unutar trenutačne linije teksta.
Oni ne zauzimaju cijeli red nego onoliko prostora koliko zauzima njihov sadržaj (štoviše, njihova se širina i visina ne mogu postaviti).
Primjeri su takvih elemenata span, em i strong
Pomoću CSS-svojstva display moguće je promijeniti tip prikaza na elementu.
Postavi li se blok-elementima to svojstvo na inline, oni će se ponašati kao da su linijski elementi.
Postavi li se linijskim elementima vrijednost svojstva display na block, oni će se ponašati kao da su blok-elementi.
Širina se može podešavati samo kod blok-elemenata (i elemenata inlineblock).
Ako im se ne postavi određena širina, blok-elementi će zauzeti svu širinu roditeljskog elementa.
S druge strane, širina je linijskog elementa određena njegovim sadržajem. Postavljanje širine na tim elementima neće imati nikakav učinak.
Blok-elementi inicijalno zauzimaju svu širinu roditeljskog elementa.
Za definiranje širine elementa koristi se svojstvo width.
Vrijednost tog svojstva postavlja se u jednoj od mjernih jedinica duljine (pikseli, točke, jedinice em ili rem) ili u postotcima.
Svojstvo width može se postaviti i na vrijednost auto, što je inicijalna vrijednost tog svojstva. Ta ključna riječ predstavlja vrijednost koju preglednik sam dodjeljuje elementu (kod blok-elemenata to će biti širina roditeljskog elementa).
Ključna riječ auto eksplicitno se navodi samo u slučajevima kad se želi zaobići neko drugo CSS-pravilo koje je postavilo širinu na neku vrijednost.
Ako se vrijednost širine navede u postotcima, širina se računa kao postotak širine roditeljskog elementa.
Postavljanjem širine elemenata u postotcima, može se postići da se ona se automatski prilagođava količini raspoloživog prostora.
No često se takvo smanjivanje širine elementa želi ograničiti.
Pomoću svojstva min-width moguće je definirati minimalnu širinu koju element mora zauzimati:
min-width: 200px;
Vrijednost minimalne širine također se može postaviti u mjernim jedinicama za duljinu ili u postotcima. Inicijalna vrijednost za ovo svojstvo je 0.
Osim minimalne širine elementu se može definirati i maksimalna širina koju smije zauzeti.
Maksimalnu širinu postavljamo pomoću svojstva
max-width: max-width: 400px;
Vrijednost maksimalne širine također se može postaviti u mjernim jedinicama za duljinu ili u postotcima.
Inicijalna vrijednost za ovo svojstvo je none, tj. maksimalna širina nije postavljena.
Visinu također možemo podešavati samo kod blok-elemenata (i elemenata inline-block).
Visina se postavlja pomoću svojstva height.
Vrijednost za to svojstvo također se može postaviti u mjernim jedinicama za duljinu ili u postotcima.
height: 200px;
Ako visina elementa nije postavljena, imat će vrijednost auto, što znači da će je preglednik sam izračunati na temelju visine sadržaja koji se nalazi unutar elementa (npr. teksta ili slike).
Ako je vrijednost visine postavljena u postotcima, visina će biti izračunata kao postotak visine roditeljskog elementa.
Dakle, tako se može postići da se visina prilagođava količini raspoloživog prostora:
height: 50%;
Minimalnu visinu elementa moguće je, kao i minimalnu širinu, postaviti kada se želi ograničiti smanjivanje visine elementa zajedno s količinom raspoloživog prostora.
No minimalna se visina najčešće koristi kad postoji dinamički sadržaj čija visina može varirati.
U takvom se slučaju ne želi ograničiti visina elementa, nego se želi da se ona automatski prilagodi visini sadržaja.
Najčešće je međutim poželjno da element ima neku minimalnu visinu u slučaju kad korisnik unese malu količinu teksta.
Tada se neće postaviti svojstvo height na elementu (čime će ono imati vrijednost auto), već će se postaviti samo minimalna visina pomoću svojstva min-height:
min-height: 100px;
Vrijednost minimalne visine također se može postaviti u mjernim jedinicama za duljinu ili u postotcima. Inicijalna vrijednost za to svojstvo je 0, a od ključnih se riječi može rabiti samo ključna riječ inherit.
I kod visine se elementu može definirati maksimum koji smije zauzeti.
Maksimalna se visina postavlja pomoću svojstva max-height:
max-height: 500px;
Vrijednost maksimalne visine može se također postaviti u mjernim jedinicama za duljinu ili u postotcima. Inicijalna vrijednost za to svojstvo je none, tj. maksimalna širina nije postavljena.
Iz estetskih je razloga potreban određeni razmak između ruba elementa i teksta (ili drugog sadržaja) koji se nalazi u elementu.
Taj razmak postavlja se korištenjem svojstva padding.
Padding se može postaviti i blok-elementima i linijskim elementima.
Inicijalno padding na elementu nije postavljen (njegova vrijednost je 0).
Vrijednost svojstva padding ne može se naslijediti s roditeljskog elementa.
Ako se svojstvu padding navede samo jedna vrijednost, gornji, desni, donji i lijevi padding dobit će istu vrijednost.
Ako je potrebno postaviti različite veličine paddinga na ta četiri mjesta, navedu se četiri različite vrijednosti.
Vrijednosti se navode u smjeru kazaljke na satu.
Prva je vrijednost za gornji položaj, zatim desni pa donji i na kraju lijevi.
padding: 5px 10px 15px 30px.
Čini se potpuno nemogućim zapamtiti na koji se položaj odnosi koja vrijednost, ali ovdje pomaže mnemotehnička kratica TRBL (koju pamtimo pomoću engleske riječi trouble).
Slova TRBL predstavljaju pojedine položaje i pomažu da se zapamti njihov redoslijed.
Zapravo, kreće se u smjeru kazaljke na satu, a započinje se s gornjim položajem.
U slučaju kad postoje tri vrijednosti, prva se ponovo odnosi na gornji položaj (Top), druga na desni (Right), treća na donji (Bottom). Četvrta vrijednost (Left) ne postoji, a kad vrijednost za lijevi položaj nije navedena, on će imati jednaku vrijednost kao i desni.
U slučaju kad postoje samo dvije vrijednosti, prva se odnosi na gornji položaj (Top), a druga na desni (Right). Vrijednosti za Bottom i Left nisu navedene pa će lijevi položaj imati istu vrijednost kao i desni, a donji istu kao i gornji.
Svojstvo padding zapravo je skraćeni način postavljanja vrijednosti za četiri odvojena svojstva koja postoje za svaki pojedinačni položaj: padding-top, padding-right, padding-bottom,padding-left.
Primjer u kojem su postavljene četiri vrijednosti svojstvu padding mogao bi se napisati i ovako:
padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 30px;
Između HTML-elemenata moguće je definirati razmak, odnosno marginu.
Neki elementi (npr. elementi p i h1) imaju inicijalno postavljenu marginu, dok je drugi (elementi div) nemaju.
Margina se može postavljati i blok-elementima i linijskim elementima, s tim da je kod linijskih elemenata moguće postaviti samo lijevu i desnu marginu, dok postavljanje gornje i donje margine nema učinka.
Elementi bez margina međusobno se dodiruju.
Margina elementa postavlja se pomoću svojstva margin, kojem se kao vrijednost postavlja iznos u mjernim jedinicama duljine ili u postotcima. Ako se koriste postotci, oni se odnose na širinu roditeljskog elementa.
margin: 10px;
Prilikom postavljanja margine moguće je rabiti i ključnu riječ auto, koja znači da će preglednik sam dodijeliti vrijednost margine.
Za gornju, desnu, donju i lijevu marginu moguće je navesti različite vrijednosti:
margin: 10px 15px 20px 5px;
Ovako navedene vrijednosti odnose se na gornju, desnu, donju i lijevu marginu (u smjeru kazaljke na satu, počevši od gornje margine)
Postoje i svojstva pomoću kojih se odvojeno mogu postaviti veličine pojedinih margina. To su svojstva margin-top, margin-right, margin bottom i margin-left.
Na HTML-elementima može se pomoću CSS-a iscrtati rub.
U tu se svrhu rabi više svojstava CSS-a s prefiksom border.
Izgled, odnosno stil ruba definira se pomoću svojstva border-style.
Kao vrijednost za to svojstvo navodi se ključna riječ.
Najčešće se koristi ključna riječ solid, koja postavlja izgled ruba na punu crtu:
border-style: solid;
Ključne riječi koje se mogu rabiti: dotted, dashed, solid, double, groove, ridge, inset, outset, hidden, none.
Svojstvo border-style zapravo je skraćeni način postavljanja vrijednosti za četiri odvojena svojstva koja postoje za svaki pojedinačni rub: border-top-style, border-right-style, border-bottom-style, borderleft-style.
Širina ruba postavlja se pomoću svojstva border-width.
Kao vrijednost može se predati ključna riječ ili vrijednost u nekoj od jedinica duljine (pikseli, jedinice em i rem, točke).
Širina ruba ne može se navesti pomoću postotaka.
Ovako se postavlja širinu ruba pomoću ključne riječi:
border-width: thick;
Ključne riječi: thin, medium, thick
Boja ruba postavlja se pomoću svojstva border-color.
Kao i kod svojstava color i background-color, vrijednost se može postaviti pomoću naziva boje, heksadecimalnog ili kôda RGBa ili HSLa.
border-color: lightgray;
Osim već spomenutih skraćenih načina pisanja, koristiti se može i svojstvo border pomoću kojeg se istovremeno mogu postaviti stil, širina i boja ruba.
border: 1px dashed gray;
Redoslijed navođenja vrijednosti nije važan pa bi ovaj primjer dao isti rezultat:
border: gray dashed 1px;
HTML-elementi su pravokutnici, ali im se uglovi mogu zaobliti.
Za postavljanje zaobljenih uglova koristi se svojstvo border-radius, a vrijednost se može postaviti korištenjem mjerne jedinice duljine (pikseli, točke, jedinice em ili rem), a moguće je koristiti se i postotcima.
border-radius: 20px;
Osim boje u pozadinu elementa možemo staviti i sliku.
Za postavljanje pozadinske slike koristi se svojstvo background-image.
Vrijednost se postavlja pozivom funkcije url, kojoj predajemo putanju do slike.
background-image: url('drvo.png');
Slika će se na početku ponavljati vodoravno i okomito dok ne popuni cijeli element.
Da bi se promijenio način na koji se slika ponavlja, rabi se svojstvo background-repeat.
Vrijednosti koje se mogu postaviti tom svojstvu su:
Pozadinska slika inicijalno je smeštena u gornjem lijevom uglu elementa.
Ako je ponavljanje slike isključeno, moguće je promijeniti položaj slike pomoću svojstva background-position.
Tom se svojstvu najčešće predaju dvije vrijednosti, pri čemu prva vrijednost predstavlja vodoravni, a druga okomiti pomak od početnog položaja (gornjeg ruba elementa).
Vrijednosti se mogu postaviti u mjernim jedinicama duljine, u postotcima ili se mogu rabiti ključne riječi.
Ovako se pozadinska slika može pomaknuti 20 piksela udesno i 10 piksela prema dolje:
background-position: 20px 10px;
Također se mogu koristiti i ovdje navedene ključne riječi:
Pozadinska slika prema potrebi se može povećati ili smanjiti korištenjem svojstva background-size.
Tom se svojstvu može postaviti vrijednost pomoću jedinica duljine, postotaka (koji se odnose na širinu, odnosno visinu elementa) ili pomoću ključnih riječi.
Ovako se može rastegnuti širina slike na pola širine elementa, a visina slike na ukupnu visinu elementa:
background-size: 50% 100%;
Ključne riječi:
Glavna svojstva za oblikovanje pozadine mogu se postaviti u skraćenom načinu pisanja pomoću svojstva background.
To svojstvo objedinjuje ova pojedinačna svojstva:
Sva su svojstva opcionalna, tj. mogu se izostaviti.
Redoslijed navođenja svojstava je proizvoljan, s time da svojstvo background-size mora biti navedeno poslije svojstva background-position i odvojeno kosom crtom (/).