Responsive Web Design - CSS PDF

II.
CSS
II.1. Uvod u osnove CSS-a

Introduction to Basic CSS
Cascading Style Sheets (CSS) govori pregledniku kako prikazati tekst i drugi sadržaj koji ste
napisali u HTML-u.
Imajte na umu da CSS razlikuje velika i mala slova, stoga pazite na način pisanja slova. CSS je
usvojen od strane svih glavnih preglednika i omogućuje vam upravljanje:
 bojom,
 fontovima,
 pozicijom,
 slobodnim prostorima,
 veličinama,
 dekoracijom,
 prijelazima, izmjenama.
Postoje tri glavna načina primjene CSS stiliziranja. Unutarlinijske - inline stilove moguće je
primijeniti izravno u sklopu HTML elemenata pomoću atributa style. Alternativno, CSS
pravila možete staviti u tag oznake style u HTML dokumentu. Konačno, možete pisati CSS
pravila na vanjskom stil listu (dokumentu), a zatim uputiti na taj file u HTML dokumentu.
Iako prve dvije opcije imaju primjenu, većina razvojnih inženjera preferira vanjske stilske
dokumente jer zadržavaju stilove odvojeno od HTML elemenata. Time se poboljšava čitljivost
i ponovna uporaba kôda. Ideja iza CSS je da možete koristiti izbornik za usmjeravanje HTML
elementa u DOM-u (Document Object Model), a zatim primijenite niz atributa za taj element
kako biste promijenili način na koji se prikazuje na stranici.
U ovom odjeljku naučiti ćete kako dodavanje CSS stilova u elemente vašeg CatPhotoApp
može izvršiti izmjenu iz jednostavnog teksta na nešto više.
II.2. Izmjena boje teksta

Change the Color of Text
Sada promijenimo boju našeg teksta.

To možemo učiniti promjenom stila style našeg h2 elementa.
Svojstvo koji je odgovorno za boju teksta nekog elementa je stilsko svojstvo color.
Evo na koji način bi boju teksta h2 elementa postavili na plavo:
<h2 style="color: blue">CatPhotoApp</h2>
Imajte na umu da je dobra praksa završiti inline style deklaracije s jednim znakom ; .
Responsive Web Design: II. CSS < 1 >

Izmijenite stil h2 elementa tako da njegova boja teksta bude crvena.
1. <h2 style="color: red;">CatPhotoApp</h2>

2. <main>
3. <p>Click here to view more <a href="#">cat photos</a>.</p>
4.
5. <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute
orange cat lying on its back."></a>
6. ...
...
II.3. Upotrijebite CSS izbornik za određivanje stila elemenata

Use CSS Selectors to Style Elements
Postoje stotine CSS svojstava - properties koje je moguće koristiti za promjenu izgleda
nekog element na vašoj stranici.
Kada ste upisali <h2 style = "color: red">CatPhotoApp</h2> , dali ste pojedinačni
inline CSS (stil u liniji) h2 elementu. CSS znači Cascading Style Sheets odnosno
padajuće stilske linije.
To je jedan od načina za dodavanje stilskog svojstva elementu, ali ima bolji način za primjenu
CSS-a.
Na vrhu kôda stvorite sljedeći style element:

<style>
</style>
Unutar tog stilskog bloka stvorite CSS selector (izbornik) za sve h2 elemente. Na primjer,
želite da svi h2 elementi budu crveni, vaš stilsko pravilo izgledat će ovako:
<style>
h2 {color: red;}
</style>
Zapamtite, važno je imati dvije vitičaste zagrade ( { i } ) oko stila svakog stilskog pravila
elementa. Također provjerite je li stil vašeg elementa između stilskih oznaka otvaranja i
zatvaranja - tagova. Konačno, svakako dodajte točka-zarez na kraju svakog stilskog pravila.
Izbrišite atribute linijskog stila u h2 elementu i umjesto toga stvorite CSS style blok. Dodajte
potrebni CSS kako biste sve h2 elemente pretvorili u plavo.

1. <style>
2. h2 {
3. color: blue;
4. }
5. </style>
6.
7. <h2>CatPhotoApp</h2>
8. <main>
10. ...
II.4. Uporaba CSS klase za definiranje stila elementa

Use a CSS Class to Style an Element
Klase su definicije stila koja se može višekratno upotrijebljavati te se dodaje u HTML

elemente.
Evo primjera izjave CSS klase:
<style>
.blue-text {
color: blue;
}
</style>
Kako vidimo, stvorili smo CSS klasu nazvanu .blue-text unutar oznaka <style>.
Klasu primjenjujete u HTML elementu na ovaj način:
<h2 class="blue-text">CatPhotoApp</h2>
Primjetimo da bi se naš CSS style element trebao izvesti u trenutku gdje je napisan u kôdu,
ali klasna HTML izjava se ne izvodi tamo gdje je napisana već gdje je primjenjena.
Unutar vašeg style elementa, promijenite h2 izbornik u klasu .red-text i ažurirajte

svojstvo boje iz plave u crvenu. Dodajte u svoj h2 element atribut klase s vrijednošću "red-
text".
1. <style>
2. .red-text {
3. color: red;
4. }
5. </style>
6.
7. <h2 class="red-text">CatPhotoApp</h2>
8. <main>
10. ...

II.5. Stilizirajte više elemenata pomoću jedne CSS klase
Style Multiple Elements with a CSS Class
Klase omogućuju korištenje istih CSS stilova na više HTML elemenata. To možete vidjeti tako
da primijenite svoju klasu red-text na prvi p element.
1. <style>
2. .red-text {
3. color: red;
4. }
5. </style>
6.
8. <main>
9. <p class="red-text">Click here to view more <a href="#">cat
photos</a>.</p>
10.
11. <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute
orange cat lying on its back."></a>
12. ...
...
II.6. Promijenite veličinu fonta jednog elementa

Change the Font Size of an Element
Veličinu fonta (garnitura štamparskih slova, pismo) kontrolira CSS svojstvo font-size,
ovako:
h1 {
font-size: 30px;
}
Unutar iste <style> oznake koji sadrži vašu red-text klasu, stvorite izbornik za p elemente i
postavite font-size svojstvo na 16 piksela (16px).
1. <style>
2. .red-text {
3. color: red;
4. }
5. p {
6. font-size: 16px;
7. }

8. </style>
9.
11. <main>
photos</a>.</p>
13. ...
II.7. Postavljanje vrste fonta jednog elementa

Set the Font Family of an Element
Za postavljanje vrste fonta jednog elementa koristi se font-family svojstvo.

Na primjer, ako želite postaviti Sans-serif kao font h2 elementa, koristite sljedeći CSS:
h2 {
font-family: Sans-serif;
}
Učinite da svi p elementi upotrebljavaju font Monospace.
1. <style>
2. .red-text {
3. color: red;
4. }
5. p {
6. font-size: 16px;
7. font-family: monospace;
8. }
9. </style>
10.
12. <main>
photos</a>.</p>
14. ...
...

II.8. Uvoz Google fonta
Import a Google Font
Osim određivanja uobičajenih fontova koji se nalaze na većini operativnih sustava, možemo
odrediti i nestandardne, prilagođene web-fontove za upotrebu na našoj web stranici. Postoje
razni izvori za internetske fontove na internetu, ali za ovaj ćemo primjer usredotočiti se na
knjižnicu Google Fonts.
Google fontovi besplatna su knjižnica web-fontova koje možete koristiti u svom CSS-u tako
što ćete uputiti URL od fonta.
Sada uvezimo i primijenimo jedan od Google fontova (ako je Google blokiran u vašoj zemlji,
morat ćete preskočiti ovaj izazov).
Kako biste uvezli Google font, kopirati ćete URL fonta iz biblioteke Google fontova, a zatim ga
zalijepiti u svoj HTML. Za ovaj izazov uvest ćemo font Lobster. Kako biste to učinili, kopirajte
sljedeći isječak kôda i zalijepite ga na vrh uređivača (prije otvornika elementa style):
<link href="https://fonts.googleapis.com/css?family=Lobster"
rel="stylesheet" type="text/css">
Sada možete postaviti Lobster font u svom CSS-u koristei Lobster kao FAMILY_NAME kako
je prikazano u slijedećem primjeru: font-family: FAMILY_NAME, GENERIC_NAME; .
GENERIC_NAME je opcionalan i je zamjenski font ako drugi font nije dostupan. Ovo je
objašnjeno u sljedećem izazovu.
Imena uvezenih fontova razlikuju velika i mala slova i trebaju biti umotana u navodnike ako
postoji razmak u imenu. Na primjer, trebate navodnike za upotrebu fonta "Open Sans", ali ne
i za upotrebu fonta Lobster.
Stvorite font-family CSS pravilo koje će koristiti font Lobster, i pobrinite se da se

primijeni na vaš h2 element.
1. <link href="https://fonts.googleapis.com/css?family=Lobster"
2. <style>
3. .red-text {color: red;}
4. h2 {
5. font-family: Lobster;
6. }
7. p {font-size: 16px; font-family: monospace;}
8. </style>
9.
11. <main>
photos</a>.</p>
13. ...

...
II.9. Degradacija fontova

Specify How Fonts Should Degrade
Postoji nekoliko zadanih fontova koji su dostupni u svim preglednicima. To je generička

porodica fontova i uključuje Monospace, Serif i Sans-Serif.
Kada željeni font nije dostupan, možete reći pregledniku da ga "degradira" u drugi font.
Na primjer, ako želite na elementu koristiti font Helvetica, ako Helvetica nije dostupna
degradirati će te ga u font sans-serif. Za to upotrijebiti će te kako slijedi:
p {
font-family: Helvetica, Sans-Serif;
}
Generička font porodica nije osjetljiva na velika i mala slova. Također, ne zahtjeva navodnike
jer su ključne riječi CSS-a.
Za početak, primijenite monospace font u elementu h2, tako da sada ima dva fonta -
Lobster i monospace.
U zadnjem smo izazovu uvezli font Lobster pomoću oznake veze. Sada komentirajte vezu
prema Google fontu (pomoću HTML komentara kako ste ranije naučili), tako da će uvezeni
font biti nedostupan. Primjetite kako se vaš h2 element degradira na font Monospace.
Bilješka: Ako na računalu imate instaliran Lobster font, nećete vidjeti degradaciju jer vaš
preglednik može pronaći font.
1. 
4. <style>
5. .red-text {
6. color: red;
7. }
8. h2 {
9. font-family: Lobster, monospace;
10. }
11. p {
12. font-size: 16px;

14. }
15. </style>
16.
18. <main>
photos</a>.</p>
20. ...
II.10. Određivanje veličine slike

Size Your Images
CSS ima svojstvo nazvano width koje kontrolira širinu elementa. Baš kao i kod fontova,
koristit ćemo px (piksel) kako bismo odredili širinu slike.
Na primjer, kada bismo stvorili CSS klasu nazvanu larger-image koja daje HTML
elementima širinu od 500 piksela, koristili bismo:
<style>
.larger-image {
width: 500px;
}
</style>
Izradite klasu s nazivom smaller-image i upotrijebite ju za promjenu veličine slike tako da

odredite njenu širinu od 100 piksela.
Bilješka: Zbog razlika u implementaciji preglednika možda ćete morati zumirati na 100%
kako biste proveli testove za ovaj izazov.
2. <style>
4. h2 {font-family: Lobster, monospace;}
6. .smaller-image {
7. width: 100px;
8. }
9. </style>
10.
12. <main>
photos</a>.</p>
14. <a href="#"><img class="smaller-image" src="https://bit.ly/fcc-
relaxing-cat" alt="A cute orange cat lying on its back."></a>

15. ...
...
II.11. Dodavanje granične linije oko vaših elemenata

Add Borders Around Your Elements
CSS borders (granična linija) ima svojstva poput style, color i width.
Na primjer, ako bismo htjeli stvoriti temeljnu crvenu liniju debljine 5 piksela oko HTML
elementa, upotrijebiti ćemo ovu klasa:
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
Izradite klasu zvanu thick-green-border. Ova klasa treba dodati temeljnu (solid) zelenu
graničnu liniju debljine 10px oko HTML elementa. Primijenite tu klasu na fotografiju mačke.
Imajte na umu da možete dodijeliti više klasa elementu na način što ćete razdvojiti svaku
klasu s razmakom (backspace) unutar class atributa. Na primjer:
<img class="class1 class2">
2. <style>
6. .smaller-image {width: 100px;}
7. .thick-green-border {
8. border-color: green;
9. border-width: 10px;
10. border-style: solid;

11. }
12. </style>
13.
15. <main>
photos</a>.</p>
17. <a href="#"><img class="smaller-image thick-green-border"
src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on
its back."></a>
18. ...
...
II.12. Dodavanje zakrivljenih kutova pomoću svojstva border-radius

Add Rounded Corners with border-radius
Vaša fotografija mačke trenutačno ima oštre kutove. Možete zaokružiti te kutove s CSS
svojstvom koje se naziva border-radius.
Svojstvo border-radius se određuje u pikselima. Dajte vašoj fotografiji mačke border-

radius zaobljenost od 10px.
Bilješka: Ovu vježbu moguće je izvršiti na više načina. Na primjer, moguće je dodati border-
radius u klasu .thick-green-border ili u klasu .smaller-image.
2. <style>
10. border-radius: 10px;
11. }
13. </style>

14.
16. <main>
photos</a>.</p>
its back."></a>
19. ...
...
II.13. Načinite sliku u krugu pomoću svojstva border-radius

Make Circular Images with a border-radius
Pored piksela, moguće je odrediti border-radius i pomoću postotka.
Dajte vašoj fotografiji mačke border-radius od 50%.
2. <style>
10. border-radius: 50%;
11. }
13. </style>
14.
16. <main>
photos</a>.</p>
its back."></a>

...
II.14. Dodavanje boje pozadini u div element

Give a Background Color to a div Element
Pozadinsku boju elementa možete postaviti pomoću svojstva background-color.

Primjerice, ako želite pozadinsku boju elementa postaviti kao zeleno green, stavili biste to u
svoj style element kao:
.green-background {
background-color: green;
}
Stvorite klasu nazvanu silver-background s background-color: silver, te je dodijelite

svojem div elementu.
2. <style>
3. .silver-background {background-color: silver;}
7. .thick-green-border {border-color: green; border-width: 10px; border-
style: solid; border-radius: 50%;}
9. </style>
10.
12. <main>
photos</a>.</p>
its back."></a>
15. <div class="silver-background">
16. <p>Things cats love:</p>
17. ...

II.15. Postavljanje ID elementa
Set the id of an Element
Osim klasa, svaki HTML element također može imati id svojstvo.

Postoji nekoliko prednosti za korištenje id svojstva: id možete koristiti za stiliranje jednog
elementa i kasnije ćete saznati da ih možete koristiti za odabir i izmjenu pojedinih elemenata
pomoću JavaScript-a.
id svojstva moraju biti unikatna. Preglednici to neće provesti, ali to je široko prihvaćena
praksa. Stoga nemojte imati više od jednog elementa istog id svojstva.
Evo primjera na koji način ćete svom h2 elementu dodati neko id svojstvo kao što je cat-
photo-app:
<h2 id="cat-photo-app">
Dodajte svom form elementu id cat-photo-form.
2. <style>
3. ... ...
4. <form id="cat-photo-form" action="/submit-cat-photo">
5. <label><input type="radio" name="indoor-outdoor" checked>
Indoor</label>
6. <label><input type="radio" name="indoor-outdoor">
Outdoor</label><br>
7. <label><input type="checkbox" name="personality" checked>
Loving</label>
8. <label><input type="checkbox" name="personality"> Lazy</label>

9. <label><input type="checkbox" name="personality">
Energetic</label><br>
10. <input type="text" placeholder="cat photo URL" required>
11. <button type="submit">Submit</button>
12. </form>
13. </main>
II.16. Upotrijebite ID svojstvo za stiliziranje elementa

Use an id Attribute to Style an Element
Jedna cool stvar o id svojstvima je, da kao i klase, moguće ih je stilirati pomoću CSS-a.
Jedan id se ne bi trebao upotrijebljavati više puta tj. trebao bi se primijeniti samo na jedan
element. id također ima veću specifičnost (važnost) od klase pa ako se oba primjenjuju na
isti element i imaju proturječne stilove, primijenit će se stilovi id-a.
Evo primjera na koji način ćete svom elementu s id svojstvom cat-photo-element dodati
pozadinsku boju zelene boje. U style element dodaje se:
#cat-photo-element {
background-color: green;
}
Imajte na umu, da se u style elementu klasa uvijek referira stavljanjem . ispred imena. Kod
id-ova stavlja se znak # ispred imena.
Dodajte svom form elementu, koji sada ima id svojstvo cat-photo-form, zelenu (green)
pozadinu.
2. <style>
9. #cat-photo-form {
10. background-color: green;
11. }
12. </style>
13.
15. <main>
16. ... ...
17. </div>
18. <form action="/submit-cat-photo" id="cat-photo-form">
19. ...

II.17. Podešavanje ispune elementa
Adjust the Padding of an Element
Sada ćemo malo odložiti naš Cat Photo App i saznati više o HTML styling-u.
Možda ste već primijetili, svi HTML elementi su u osnovi mali pravokutnici.
Tri važna svojstva upravljaju prostorom koji okružuje svaki HTML element: padding (ispuna),
margin (margina) i border (linija, granica).
Element padding određen je količinom prostora između elementa i njegove granične linije
(border).
Ovdje možemo vidjeti da su plavi i crveni četverokut ugniježđeni unutar žutog četverokuta.
Primjetimo kako je crveni četverokut ima viši padding od plavog.
Kada povećamo padding plavog četverokuta, povećat će se udaljenost (padding) između
ispune teksta i obruba oko njega.
Promijenite padding plavog četverokuta kako bi odgovarao crvenom četverokutu.
1. <style>
2. .injected-text {margin-bottom: -25px; text-align: center;}
3. .box {border-style: solid; border-color: black; border-width: 5px;
text-align: center;}
4. .yellow-box {background-color: yellow; padding: 10px;}
5. .red-box {background-color: crimson; color: #fff; padding: 20px;}
6. .blue-box {background-color: blue; color: #fff; padding: 20px;}
7. 
8. </style>
9.
10. <h5 class="injected-text">margin</h5>

11. <div class="box yellow-box">
12. <h5 class="box red-box">padding</h5>
13. <h5 class="box blue-box">padding</h5>
14. </div>
II.18. Podešavanje margine elementa

Adjust the Margin of an Element
Margina elementa (margin) kontrolira veličinu prostora između granice elementa (border) i
okolnih elemenata.
Ovdje možemo vidjeti da su plavi i crveni četverokut ugniježđeni unutar žutog četverokuta.
Napominjemo kako crveni četverokut ima veću vrijednost margine - margin nego plavi
četverokut, što ga čini manjim.
Pri povećanju vrijednosti margine (margin) plavog četverokuta, povećat će se udaljenost
između granice i okolnih elemenata.
Promijenite margin plavog četverokuta kako bi odgovarala crvenom.
1. <style>
5. .red-box {background-color: crimson; color: #fff; padding: 20px;
margin: 20px;}
6. .blue-box {background-color: blue; color: #fff; padding: 20px; margin:
20px;}
7. 
8. </style>
13. </div>

II.19. Dodavanje negativne margine elementu
Add a Negative Margin to an Element
Margina elementa (margin) kontrolira količinu prostora između granice elementa (border) i
okolnih elemenata.
Ako marginu elementa postavite na negativnu vrijednost, element će se povećati.
Postavite marginu na negativnu vrijednost poput one za crveni četverokut.

Promijenite margin plavog četverokuta na -15px, tako da ispunjava cijelu vodoravnu širinu
žutog četverokuta oko sebe.
1. <style>
5. .red-box {background-color: crimson; color: #fff; padding: 20px;
margin: -15px;}
6. .blue-box {background-color: blue; color: #fff; padding: 20px; margin:
-15px;}
7. 
8. </style>
9.
13. </div>
II.20. Dodavanje različitih ispuna sa svake strane elementa

Add Different Padding to Each Side of an Element
Ponekad ćete htjeti prilagoditi element tako da ima različiti padding na svakoj strani.
CSS omogućuje kontrolu ispune elementa (padding) na sve četiri strane pomoću padding-
top, padding-right, padding-bottom, i padding-left svojstava.
Odredite plavom četverokutu padding od 40px na gornjoj i lijevoj strani i 20px na dnu i
desnoj strani.

1. <style>
2. .injected-text {
3. margin-bottom: -25px;
4. text-align: center;
5. }
6. .box {
8. border-color: black;
11. }
12. .yellow-box {
13. background-color: yellow;
14. padding: 10px;
15. }
16. .red-box {
17. background-color: crimson;
18. color: #fff;
19. padding-top: 40px;
20. padding-right: 20px;
21. padding-bottom: 20px;
22. padding-left: 40px;
23. }
24. .blue-box {
25. background-color: blue;
26. color: #fff;
27. padding-top: 40px;
28. padding-right: 20px;
29. padding-bottom: 20px;
30. padding-left: 40px;
31. }
32. </style>
33.
38. </div>

II.21. Dodavanje različitih margina na svakoj strani elementa
Add Different Margins to Each Side of an Element
Ponekad ćete htjeti prilagoditi element tako da ima različite margine (margin) sa svake
strane.
CSS vam omogućuje kontrolu margine elementa sa sve četiri strane pomoću margin-top,
margin-right, margin-bottom i margin-left svojstava.
Dajte plavom četverokutu marginu od 40px na gornjoj i lijevoj strani, te na dnu i desnoj
strani od 20px.
1. <style>
5. .red-box {background-color: crimson; color: #fff; margin-top: 40px;
margin-right: 20px; margin-bottom: 20px; margin-left: 40px;}
6. .blue-box {background-color: blue; color: #fff; margin-top: 40px;
margin-right: 20px; margin-bottom: 20px; margin-left: 40px;}
7. </style>
12. </div>
II.22. Odredite vrijednosti ispune elementa u smjeru kazaljke na satu

Use Clockwise Notation to Specify the Padding of an Element
Umjesto određivanja ispune elementa pomoću padding-top, padding-right, padding-

bottom i padding-left svojstva, možete ih sve specificirati u jednom retku, na ovaj način:
padding: 10px 20px 10px 20px;
Ove četiri vrijednosti rade u smjeru kretanja kazaljki na satu: gornji, desni, donji, lijevi, i
učiniti će isti rezultat kao i upotreba padding + određeni smjer instrukcije.
Upotrijebite Clockwise Notation (oznaku za smjer kazaljke na satu) kako biste podesili
".blue-box" klasu na vrijednosti padding na gornjoj i lijevoj strani od 40px odnosno 20px na
donjoj i desnoj stranu.

1. <style>
4. .yellow-box {background-color: yellow; padding: 20px 40px 20px 40px;}
5. .red-box {background-color: crimson; color: #fff; padding: 20px 40px
20px 40px;}
6. .blue-box {background-color: blue; color: #fff; padding: 40px 20px
20px 40px;}
7. </style>
12. </div>
II.23. Odredite vrijednosti margine elementa u smjeru kazaljke na satu

Use Clockwise Notation to Specify the Margin of an Element
Pokušajmo ovo ponovo, ali s margin ovaj put.

Umjesto određivanja margine elementa pomoću margin-top, margin-right, margin-
bottom i margin-left svojstva, možete ih sve specificirati u jednom retku, na ovaj način:
margin: 10px 20px 10px 20px;
Ove četiri vrijednosti rade u smjeru kretanja kazaljke na satu: gornji, desni, donji, lijevi, i
učiniti će isti rezultat kao i upotreba margin + određeni smjer svojstava.
Upotrijebite Clockwise Notation (oznaku za smjer kazaljke na satu) kako biste podesili blue-
box klasu na vrijednosti margine na gornjoj i lijevoj strani od 40px odnosno 20px na donjoj i
desnoj stranu.
1. <style>
2. .injected-text {
3. margin-bottom: -25px;
5. }
6. .box {

8. border-color: black;
11. }
12. .yellow-box {
13. background-color: yellow;
14. padding: 20px 40px 20px 40px;
15. }
16. .red-box {
17. background-color: crimson;
18. color: #fff;
19. margin: 20px 40px 20px 40px;
20. }
21. .blue-box {
22. background-color: blue;
23. color: #fff;
25. }
26. </style>
27.
32. </div>
II.24. Koristite atributne izbornike za stiliziranje elemenata

Use Attribute Selectors to Style Elements
Dali smo id ili class atribute elementima koje želite specifično stilizirati. Oni su poznati kao
ID i klasni izbornici. Postoje i drugi CSS izbornici s kojima možete odabrati prilagođene
skupine elemenata za stiliziranje.
Pozovimo CatPhotoApp kako bismo ponovo prakticirali CSS izbornike.
Za ovaj izazov koristit ćete odabir atributni izbornik [attr = value] kako biste označili
potvrdne okvire u CatPhotoApp. Ovaj izbornik odabire i stilizira elemente s određenom
vrijednosti atributa. Na primjer, kôd u nastavku mijenja margine svih elemenata s atributom
type i odgovarajućom vrijednošću radio:
[type='radio'] {
margin: 20px 0px 20px 0px;

}
Upotrijebite atributni izbornik type i pokušajte potvrdnim okvirima u CatPhotoApp-u dodati

gornju marginu od 10px i donju marginu od 15px.
2. <style>
9. [type='checkbox'] {margin: 10px 0px 15px 0px;}
10. </style>
11.
13. <main>
... ...
14. </div>
15. <form action="/submit-cat-photo" id="cat-photo-form">
16. <label><input type="radio" name="indoor-outdoor" checked>
Indoor</label>
17. <label><input type="radio" name="indoor-outdoor">
Outdoor</label><br>
18. <label><input type="checkbox" name="personality" checked>
Loving</label>
19. <label><input type="checkbox" name="personality"> Lazy</label>
20. <label><input type="checkbox" name="personality">
Energetic</label><br>
21. <input type="text" placeholder="cat photo URL" required>
22. <button type="submit">Submit</button>
23. </form>
24. </main>

II.25. Razumjevanje apsolutnih u odnosu na relativne jedinice
Understand Absolute versus Relative Units
U posljednjih nekoliko izazova postavili smo marginu ili ispunu elementa u pikselima (px).
Pikseli su duljinska jedinica koja govori pregledniku veličinu ili razmak neke stavke. Uz px, u
CSS-u postoji čitav niz različitih opcija za duljinu koje je moguće koristiti.
Dva glavna tipa jedinica za duljinu su apsolutne i relativne. Apsolutne jedinice vezuju se za
fizičke jedinice za duljinu. Na primjer, in i mm odnose se na inče i milimetre. Apsolutne
duljinske jedinice odgovaraju stvarnoj mjeri na zaslonu, ali postoje razlike ovisno o
razlučivosti zaslona.
Relativne jedinice za duljinu, kao što su em ili rem, odnose se na drugačije vrijednosti za
duljinu. Na primjer, em se temelji na veličini fonta nekog elementa. Ako ga koristite za
postavljanje svoga svojstva font-size, to je relativan odnos prema roditeljskom svojstvu
font-size.
Bilješka: Postoji nekoliko opcija relativnih jedinica koje su povezane s veličinom prozora. One
su objašnjene u odjeljku Responsive Web Design Principles.
Dodajte svojstvo padding na element s klasom red-box i postavite ga na 1.5em.
1. <style>
4. .yellow-box {background-color: yellow; padding: 20px 40px 20px 40px;}
5. .red-box {
6. background-color: red;
8. padding: 1.5em;
9. }
10. .green-box {background-color: green; margin: 20px 40px 20px 40px;}
11. </style>
12.
16. <h5 class="box green-box">padding</h5>
17. </div>

II.26. Oblikovanje HTML body elementa
Style the HTML Body Element
Započnimo iz početka i naučimo nešto o CSS naslijeđu.

Svaka HTML stranica ima element tijelo – body.
Dokazati ćemo kako body element postoji, na način da ćemo mu odrediti crnu boju pozadine
(background-color).
To možemo učiniti dodavanjem sljedećeg elementa u style:
body {
background-color: black;
}
1. <style>
2. body {
3. background-color: black;
4. }
5. </style>
II.27. Nasljeđivanje stilova iz body elementa

Inherit Styles from the Body Element
Nakon što smo dokazali da svaka HTML stranica ima body element i kako se taj body
element može oblikovati sa CSS-om.
Prisjetimo se kako je moguće oblikovati body element baš kao i svaki drugi HTML element i
kako svi drugi elementi nasljeđuju stilove iz body elementa.
Prvo, stvorimo h1 element s tekstom Hello World.

Zatim, dodajmo svim elementima na našoj stranici zelenu boju na način: color: green; kao
stilsku izjavu u body elementu.
Na kraju, dodajmo našem body elementu vrstu pisma Monospace dodajući font-family:
Monospace; kao stilsku deklaraciju body elementa.

1. <style>
2. body {
4. color: green;
6. }
7. </style>
8.
9. <h1>Hello World</h1>
II.28. Odredite prioritet jednog stila nad ostalima

Prioritize One Style Over Another
Ponekad će vaši HTML elementi dobiti više stilova koji se međusobno sukobljavaju.
Na primjer, vaš h1 element ne može biti istodobno zelen i ružičast.
Pogledajmo što se događa kada stvorimo klasu koja čini tekst ružičastim, a zatim ga
primijenimo na element. Hoće li naša klasa nadjačati boju body elementa kojem je
dodjeljena, kao CSS svojstvo color: green;?
Napravite CSS klasu nazvanu pink-text koji elementu daje ružičastu boju.
Dajte svom h1 elementu klasu pink-text.
1. <style>
2. body {
5. color: green;
6. }
7. .pink-text {
8. color: pink;
9. }
10. </style>
11.
12. <h1 class="pink-text">Hello World!</h1>

II.29. Nadjačavanje stilova u naknadnom CSS
Override Styles in Subsequent CSS
Naša klasa "pink-text" nadjačala je CSS deklaraciju body elementa!

Upravo smo dokazali da će klase nadjačati osnovni CSS body elementa. Zato je sljedeće
logičko pitanje: što možemo učiniti kako bismo nadjačali pink-text klasu?
Izradite dodatnu CSS klasu nazvanu blue-text koji elementu daje plavu boju. Pazite da se
nalazi ispod pink-text deklaracije.
Primijenite klasu blue-text na svoj h1 element uz postojeću pink-text klasu i vidjet ćemo
tko će pobjediti.
Primjena višestrukih atributa klase u HTML elementu obavlja se ovako:
class = "class1 class2"
Bilješka: Nije bitno kojim redoslijedima su klase navedene u HTML elementu.

Međutim, redoslijed deklaracija klasa class u odjeljku <stil> je važan. Druga izjava uvijek
će imati prednost nad prvom. Zato što je klasa .blue-text napisana kao druga izjava, ona
nadjačava atribute .pink-text izjave.
1. <style>
2. body {
5. color: green;
6. }
7. .pink-text {
8. color: pink;
9. }
10. .blue-text {
11. color: blue;
12. }
13. </style>
14.
15. <h1 class="pink-text blue-text">Hello World!</h1>

II.30. Nadjačavanje klasnih izjava pomoću atributa ID stilova
Override Class Declarations by Styling ID Attributes
Dokazali smo kako preglednici čitaju CSS od vrha prema dnu. To znači da će, u slučaju
sukoba, preglednik koristiti posljednju napisanu CSS izjavu.
Ali to nije sve. Postoje i drugi načini kojima je moguće nadjačati CSS. Sjećate li se ID atributa?
Nadjačat ćemo naše klase pink-text i blue-text, te učiniti h1 element narančastim
dodajući h1 elementu jedan stilizirani ID.
Dodajmo h1 elementu id atribut nazvan orange-text. Prisjetimo se, ID stilovi izgledaju

ovako:
<h1 id="orange-text">
Ostavite klase blue-text i pink-text u svojem h1 elementu.

Izradite CSS izjavu za ID orange-text u svojem style elementu. Evo jednog primjera na koji
način treba izgledati:
#brown-text {
color: brown;
}
Napomena: Nije bitno je li ova CSS izjava iznad ili ispod klase pink-text, budući da ID
atributi uvijek imaju prednost.
1. <style>
2. body {background-color: black; font-family: monospace; color: green;}
3. #orange-text {color: orange;}
4. .pink-text {color: pink;}
5. .blue-text {color: blue;}
6. </style>
7.
8. <h1 class="pink-text blue-text" id="orange-text">Hello World!</h1>

II.31. Poništavanje klasnih izjava pomoću stilova u retku
Override Class Declarations with Inline Styles
Dokazali smo kako ID deklaracije nadjačavaju izjave klasa, bez obzira na to gdje su
deklarirane u CSS syle elementu.
Postoje i drugi načini kojima je moguće nadjačati CSS. Sjećate li se in-line stilova (stilovi u
retku)?
Upotrijebite in-line style kako biste naš element h1 učinili bijelim. Prisjetite se, stil u
retku izgleda ovako:
<h1 style="color: green">
Ostavite klase blue-text i pink-text u svojem h1 elementu.
1. <style>
4. .pink-text {color: pink;}
6. </style>
7.
8. <h1 style="color: white;" id="orange-text" class="pink-text blue-
text">Hello World!</h1>
II.32. Poništavanje svih ostalih stilova uporabom značajke Important

Override All Other Styles by using Important
Dokazali smo kako će in-line stilovi nadjačati sve CSS deklaracije u style elementu.
Ali čekaj. Postoji još jedan način za nadjačavanje unutar CSS-a. Ovo je najmoćnija metoda. Ali
prije nego što to učinimo, idemo vidjeti zašto biste ikada željeli nadjačati CSS.
U većini situacija koristit ćete CSS biblioteke. One mogu slučajno nadjačati vaš CSS. Dakle,
ako ste potpuno sigurni kako element ima određen CSS stil, koristiti ćete !important.
Hajdemo natrag u našu pink-text deklaraciju. Prisjetimo se kako je pink-text klasa
nadjačana naknadnim klasnim izjavama, ID deklaracijama i in-line stilovima.
Dodajte ključnu riječ !important u deklaraciju vašeg pink-text elementa kako biste 100%
bili sigurni kako će vaš h1 element biti ružičast.
Primjer kako ćete to učiniti jest:

color: red !important;
1. <style>
4. .pink-text {color: pink !important;}
6. </style>
7.
8. <h1 id="orange-text" class="pink-text blue-text" style="color:
white">Hello World!</h1>
II.33. Korištenje Hex kôda za određivanje boja

Use Hex Code for Specific Colors
Jeste li znali da postoje drugi načini za definiranje boja u CSS-u? Jedan od tih načina naziva se
heksadecimalni kôd ili ukratko hex kôd.
Obično upotrebljavamo decimalne brojeve (decimals) ili brojevni sustav s bazom 10, koji
koriste simbole 0 do 9 za svaku znamenku. Heksadecimalni brojevi (hexadecimals ili hex )
imaju brojevnu bazu 16. To znači da koriste šesnaest različitih simbola. Poput decimalnih
brojeva, simboli 0-9 predstavljaju vrijednosti od 0 do 9. A slova A, B, C, D, E, F predstavljaju
vrijednosti od 10 do 15. Ukratko, 0 do F predstavlja znamenku u heksadecimalnom
brojevnom sustavu (hexadecimal), dajući nam 16 ukupno mogućih vrijednosti. Ovdje
možete pronaći više o heksadecimalnim brojevima.
U CSS-u upotrebljavamo niz od šest heksadecimalnih znamenki za prikaz boje: po dvije za
crvenu (R -red), dvije za zelenu (G - green) i po dvije za plavu (B - blue) komponentu. Na
primjer, #000000 je crna boja i također je najniža moguća vrijednost. Ovdje možete pronaći
više informacija o RGB sustavu boja.
body {
color: #000000;
}
Zamijenite riječ black u pozadinskoj boji našeg body elementa s heksadecimalnim prikazom
– hex code, #000000.

1. <style>
2. body {
3. background-color: #000000;
4. }
5. </style>
II.34. Korištenje Hex kôda za miješanje boja

Use Hex Code to Mix Colors
Kako smo vidjeli, hex kodovi koriste šest heksadecimalnih znamenki za prikaz boja: po dvije
za crvenu (R - red), dvije za zelenu (G - green) i po dvije za plavu (B - blue) komponentu.
Od ove tri osnovne boje: crvena, zelena i plava, mijenjajući njihov intenzitet, moguće je
stvoriti više od 16 milijuna drugih boja!
Na primjer, narančasta je čista crvena boja pomiješana s nešto zelene i bez plave
komponente. U heksadecimalnom kodu ova boja predstavljena je kôdom #FFA500.
Broj 0 je najmanji broj u heksadecimalnom kodu i predstavlja potpunu odsutnost boje.
Brojka F je najveći broj u heksadecimalnom kodu i predstavlja maksimalnu moguću boju.
Zamijenite nazive boja u našem style elementu s njihovim ispravnim hex kodovima.
Color Hex Code

Dodger Blue #1E90FF
Green #00FF00
Orange #FFA500
Red #FF0000
1. <style>
2. .red-text {color: #FF0000;}
3. .green-text {color: #00FF00;}
4. .dodger-blue-text {color: #1E90FF;}
5. .orange-text {color: #FFA500;}
6. </style>
7. <h1 class="red-text">I am red!</h1>

8. <h1 class="green-text">I am green!</h1>
9. <h1 class="dodger-blue-text">I am dodger blue!</h1>
10. <h1 class="orange-text">I am orange!</h1>
II.35. Korištenje skraćenog Hex kôda

Use Abbreviated Hex Code
Mnogi se ljudi osjećaju preplavljeni s mogućnošću korišćenja više od 16 milijuna boja. A osim
toga, teško je zapamtiti heksadecimalni kod za određenu boju. Srećom, možete ga skratiti.
Na primjer, heksadecimalni broj za crvenu boju je #FF0000, a može se skratiti na #F00. Ovaj
skraćeni oblik daje jednu znamenku za crvenu boju, jednu znamenku za zelenu i jednu
znamenku za plavu boju.
To smanjuje ukupan broj mogućih boja na oko 4.000. No, preglednici će interpretirati
#FF0000 i #F00 kao iste boje.
Pokušajte upotrijebiti skraćene heksadecimalne kodove za bojanje elemenata.
Color Hex Code

Cyan #0FF
Green #0F0
Red #F00
Fuchsia #F0F
1. <style>
2. .red-text {color: #F00;}
3. .fuchsia-text {color: #F0F;}
4. .cyan-text {color: #0FF;}
5. .green-text {color: #0F0;}
6. </style>
7.
9. <h1 class="fuchsia-text">I am fuchsia!</h1>
10. <h1 class="cyan-text">I am cyan!</h1>
11. <h1 class="green-text">I am green!</h1>

II.36. Korištenje RGB vrijednosti za bojanje elemenata
Use RGB values to Color Elements
Drugi način na koji možete predstavljati boje u CSS-u jest korištenje RGB vrijednosti.
RGB vrijednost za crnu boju izgleda ovako:
rgb(0, 0, 0)
RGB vrijednost za bijelu boju izgleda ovako:

rgb(255, 255, 255)
Umjesto uporabe šest heksadecimalnih znamenki kao što to činite s heksadecimalnim

kôdom, u RGB sustavu odredite intenzitet svake boje brojem između 0 i 255.
Idemo to matematički izračunati, dvije znamenke za jednu boju jednake su 16 puta 16, što
daje 256 kao ukupnu vrijednost. Tako RGB, koji počinje računati od nule, ima isti broj
mogućih vrijednosti kao i hex kôd.
Evo primjera kako biste „body“ pozadinu promijenili u narančasto pomoću RGB koda.
body {
background-color: rgb(255, 165, 0);
}
Zamijenimo heksadecimalni kod u pozadinskoj boji našeg body elementa s RGB vrijednošću
za crnu boju: rgb (0, 0, 0).
1. <style>
2. body {
3. background-color: rgb(0, 0, 0);
4. }
5. </style>

II.37. Korištenje RGB za miješanje boja
Use RGB to Mix Colors
Baš kao i kod heksadecimalnog kôda, moguće je kombinirati boje i u RGB sustavu pomoću
kombinacije različitih vrijednosti.
Zamijenite nazive boja u našem style elementu s njihovim ispravnim RGB vrijednostima.
Color RGB
Blue rgb(0, 0, 255)
Red rgb(255, 0, 0)
Orchid rgb(218, 112, 214)
Sienna rgb(160, 82, 45)
1. <style>
2. .red-text {color: rgb(255, 0, 0);}
3. .orchid-text {color: rgb(218, 112, 214);}
4. .sienna-text {color: rgb(160, 82, 45);}
5. .blue-text {color: rgb(0, 0, 255);}
6. </style>
7.
9. <h1 class="orchid-text">I am orchid!</h1>
10. <h1 class="sienna-text">I am sienna!</h1>
11. <h1 class="blue-text">I am blue!</h1>
II.38. Koristite CSS varijable kako biste promijenili nekoliko elemenata odjednom
Use CSS Variables to change several elements at once
CSS varijable su snažan način za promjenu više CSS svojstava odjednom mijenjajući samo
jednu vrijednost.
Slijedite upute u nastavku kako biste vidjeli kako promjena samo tri vrijednosti može
promijeniti stil mnogih elemenata.

U klasi penguin promijenite vrijednost black na gray, vrijednost gray na white i vrijednost
yellow na orange.
1. <style>
2. .penguin {
3. /* change code below */
4. --penguin-skin: gray;
5. --penguin-belly: white;
6. --penguin-beak: orange;
7. /* change code above */
8. position: relative;
9. margin: auto;
10. display: block;
11. margin-top: 5%;
12. width: 300px;
13. height: 300px;
14. }
15. .penguin-top {top: 10%; left: 25%; background: var(--penguin-skin,
gray); width: 50%; height: 45%; border-radius: 70% 70% 60% 60%;}
16. .penguin-bottom {top: 40%; left: 23.5%; background: var(--penguin-
skin, gray); width: 53%; height: 45%; border-radius: 70% 70% 100% 100%;}
17. .right-hand {top: 0%; left: -5%; background: var(--penguin-skin,
gray); width: 30%; height: 60%; border-radius: 30% 30% 120% 30%;
transform: rotate(45deg); z-index: -1;}
18. .left-hand {top: 0%; left: 75%; background: var(--penguin-skin, gray);
width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform:
rotate(-45deg); z-index: -1;}
19. .right-cheek {top: 15%; left: 35%; background: var(--penguin-belly,
white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%;}
20. .left-cheek {top: 15%; left: 5%; background: var(--penguin-belly,
white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%;}
21. .belly {top: 60%; left: 2.5%; background: var(--penguin-belly, white);
width: 95%; height: 100%; border-radius: 120% 120% 100% 100%;}
22. .right-feet {top: 85%; left: 60%; background: var(--penguin-beak,
orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg); z-index: -2222;}
23. .left-feet {top: 85%; left: 25%; background: var(--penguin-beak,
orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%;
transform: rotate(80deg); z-index: -2222;}
24. .right-eye {top: 45%; left: 60%; background: black; width: 15%;
height: 17%; border-radius: 50%;}
25. .left-eye {top: 45%; left: 25%; background: black; width: 15%; height:
17%; border-radius: 50%;}
26. .sparkle {top: 25%; left: 15%; background: white; width: 35%; height:
35%; border-radius: 50%;}
27. .blush-right {top: 65%; left: 15%; background: pink; width: 15%;
28. .blush-left {top: 65%; left: 70%; background: pink; width: 15%;
29. .beak-top {top: 60%; left: 40%; background: var(--penguin-beak,
orange); width: 20%; height: 10%; border-radius: 50%;}
30. .beak-bottom {top: 65%; left: 42%; background: var(--penguin-beak,
orange); width: 16%; height: 10%; border-radius: 50%;}
31. body {background:#c6faf1;}

32. .penguin * {position: absolute;}
33. </style>
34.
35. <div class="penguin">
36. <div class="penguin-bottom">
37. <div class="right-hand"></div>
38. <div class="left-hand"></div>
39. <div class="right-feet"></div>
40. <div class="left-feet"></div>
41. </div>
42. <div class="penguin-top">
43. <div class="right-cheek"></div>
44. <div class="left-cheek"></div>
45. <div class="belly"></div>
46. <div class="right-eye">
47. <div class="sparkle"></div>
48. </div>
49. <div class="left-eye">
50. <div class="sparkle"></div>
51. </div>
52. <div class="blush-right"></div>
53. <div class="blush-left"></div>
54. <div class="beak-top"></div>
55. <div class="beak-bottom"></div>
56. </div>
57. </div>
II.39. Izradite prilagođenu CSS varijablu

Create a custom CSS Variable
Kako biste stvorili CSS varijablu, trebate joj dati ime s dvije crtice (name with two dashes)
ispred nje i dodijeliti joj vrijednost (value) kao što je ova:
--penguin-skin: gray;
To će stvoriti varijablu pod nazivom --penguin-skin i dodijeliti joj vrijednost gray.

Sada tu varijablu možete koristiti i drugdje u vašem CSS-u kako biste promijenili vrijednost
ostalih elemenata na sivo.

U klasi pinguin, stvorite varijablu imena --penguin-skin i dajte joj vrijednost gray.
1. <style>
2. .penguin {
3. /* add code below */
5. /* add code above */
7. margin: auto;
8. display: block;
9. margin-top: 5%;
10. width: 300px;
11. height: 300px;
12. }
13. ...
II.40. Upotrijebite prilagođenu CSS varijablu

Use a custom CSS Variable
Nakon što stvorite svoju varijablu, možete dodijeliti njegovu vrijednost drugim CSS
svojstvima pozivom na ime koje ste joj dali.
background: var(--penguin-skin);
Ovo će promijeniti pozadinu bilo kojeg elementa na koji ciljate u sivo, jer to je vrijednost
--penguin-skin varijable.
Imajte na umu kako se stilovi neće primijeniti ako nazivi varijabli nisu podudarni.
Upotrijebite --penguin-skin varijablu na svojstvo background klasa penguin-top,

penguin-bottom, right-hand i left-hand.
1. <style>
2. .penguin {--penguin-skin: gray; position: relative; margin: auto;
display: block; margin-top: 5%; width: 300px; height: 300px;}
3. .penguin-top {top: 10%; left: 25%;
5. background: var(--penguin-skin);
7. width: 50%; height: 45%; border-radius: 70% 70% 60% 60%;}
8. .penguin-bottom {top: 40%; left: 23.5%;
13. .right-hand { top: 0%; left: -5%;

17. width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform:
rotate(45deg); z-index: -1;}
18. .left-hand {top: 0%; left: 75%;
22. width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform:
rotate(-45deg); z-index: -1;}
23. .right-cheek {
24. ...
II.41. Priložite povratnu vrijednost CSS varijabli

Attach a Fallback value to a CSS Variable
Kada upotrebljavate vašu stvorenu varijablu kao vrijednost CSS svojstva, moguće joj je
pridružiti rezervnu vrijednost koju će stranica vratiti ako iz nekog razloga ne može dobiti vašu
varijablu.
Moguće je da netko koristi stariji preglednik koji još nije usvojio CSS varijable, ili možda
njegov uređaj ne podržava vrijednost koju ste naveli. Evo na koji način ćete to raditi:
background: var(--penguin-skin, black);
Ovo će postaviti pozadinu u crnu ako postoji problem s vašom varijablom.

Imajte na umu kako to može biti korisno kod uklanjanja pogrešaka.
Dodajte zamjensku vrijednost black u osobinu background kod klasa penguin-top i

penguin-bottom. Ovaj stil će se primijeniti zbog pogreške u nazivu varijable.
1. <style>
2. .penguin {--penguin-skin: black; --penguin-belly: gray; --penguin-
beak: yellow; position: relative; margin: auto; display: block; margin-
top: 5%; width: 300px; height: 300px;}
3. .penguin-top {top: 10%; left: 25%;
5. background: var(--pengiun-skin, black);

8. .penguin-bottom {top: 40%; left: 23.5%;
10. background: var(--pengiun-skin, black);
13. .right-hand {
14. ...
II.42. Poboljšajte kompatibilnost prema preglednicima

Improve Compatibility with Browser Fallbacks
Prilikom rada s CSS-om vjerojatno ćete u nekom trenutku naići na probleme s

kompatibilnošću preglednika. To je razlog zašto je važno osigurati kompatibilnost za razne
preglednike kako bi se izbjegli potencijalni problemi.
Kada preglednik analizira CSS web-stranice, zanemaruje sva ona svojstva koja ne prepoznaje
ili ne podržava. Na primjer, ako koristite CSS varijablu za dodjeljivanje boje pozadine na web-
lokaciji, Internet Explorer će zanemariti boju pozadine jer ne podržava CSS varijable. U tom
slučaju preglednik će upotrijebiti bilo koju vrijednost za tu osobinu. Ako ne može pronaći
nijednu drugu postavljenu vrijednost za to svojstvo, vratit će se na zadanu vrijednost, koja
obično nije idealna.
To znači da morate pregledniku pružiti rezervnu verziju, što znači dati mu šire podržanu
vrijednosti neposredno prije vaše deklaracije. Tako će stariji preglednici imati nešto na što će
se osloniti, dok će noviji preglednik samo interpretirati svaku deklaraciju koja dolazi kasnije u
kaskadi.
U našem primjeru varijabla se koristi za postavljanje boje pozadine unutar klase .red-box.
Poboljšamo kompatibilnost preglednika dodajući još jednu background izjavu neposredno
prije postojeće izjave te postavimo njezinu vrijednost na crveno - red.

1. <style>
2. :root {
3. --red-color: red;
4. }
5. .red-box {
6. background: red;
7. background: var(--red-color);
8. height: 200px;
9. width:200px;
10. }
11. </style>
12. <div class="red-box"></div>
II.43. Kaskadne CSS varijable

Cascading CSS variables
Kada ste izradili varijablu, ona postaje dostupna za uporabu unutar elementa u kojem ste je
izradili. Također postaje dostupna u svim elementima unutar njega. Ovaj efekt poznat je kao
kaskada.
Zbog toga CSS varijable često su definirane u :root elementu.
Zamislite :root element kao kontejner za cijeli HTML dokument, na isti način kao što je html
element kontejner za body element.
Izradom vaših varijabli u :root-u, bit će dostupne na cijeloj web stranici.
Definirajte varijablu pod nazivom --penguin-belly u izborniku :root i dajte joj vrijednost
pink. Zatim možete vidjeti kako će se vrijednost kaskadirati kako bi se promijenila vrijednost
na ružičastu, svugdje gdje se ta varijabla upotrebljava.
1. <style>
2. :root {
4. --penguin-belly: pink;

6. }
7. body {
8. background: var(--penguin-belly, #c6faf1);
9. }
10. .penguin {--penguin-skin: gray; --penguin-beak: orange; position:
relative; margin: auto; display: block; margin-top: 5%; width: 300px;
height: 300px;}
11. .right-cheek {
12. ...
II.44. Promijenite varijablu za određeno područje

Change a variable for a specific area
Nakon što izradite svoje varijable u :root-u, postavit će se vrijednost te varijable na cijeloj
stranici.
Zatim možete pisati preko te varijable kako bi je ponovno postavili unutar određenog
elementa.
Promijenite vrijednost varijable --penguin-belly u white u klasi penguin.
1. <style>
2. :root {
4. --penguin-belly: pink;
6. }
7. body {
8. background: var(--penguin-belly, #c6faf1);
9. }
10. .penguin {
15. margin: auto;
16. display: block;

17. margin-top: 5%;
18. width: 300px;
19. height: 300px;
20. }
21. .right-cheek {
22. ...
II.45. Upotrijebite upit za medij da biste promijenili varijablu

Use a media query to change a variable
CSS varijable mogu pojednostaviti način korištenja medijskih upita.

Na primjer, kada je vaš zaslon manji ili veći od točke prekida medijskog upita, možete
promijeniti vrijednost varijable i primijeniti ćete novi stil gdje god da se upotrebljava.
U media query :root izborniku, promjenite --penguin-size varijablu tako da ju

redefinirate i dajte joj novu vrijednost od 200px. Također, redefinirati --penguin-skin
varijablu i dajte joj novu vrijednost black. Zatim promijenite veličinu pregleda kako biste
vidjeli tu promjenu u akciji.
1. <style>
2. :root {
3. --penguin-size: 300px;
7. }
8. @media (max-width: 350px) {
9. :root {
11. --penguin-size: 200px;
12. --penguin-skin: black;
14. }
15. }
16. .penguin {
17. ...

Responsive Web Design - CSS PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Responsive Web Design - CSS PDF

Uploaded by

Copyright:

Available Formats

II.

II.1. Uvod u osnove CSS-a

II.2. Izmjena boje teksta

Sada promijenimo boju našeg teksta.

Responsive Web Design: II. CSS < 1 >

1. <h2 style="color: red;">CatPhotoApp</h2>

II.3. Upotrijebite CSS izbornik za određivanje stila elemenata

Na vrhu kôda stvorite sljedeći style element:

Responsive Web Design: II. CSS < 2 >

II.4. Uporaba CSS klase za definiranje stila elementa

Klase su definicije stila koja se može višekratno upotrijebljavati te se dodaje u HTML

Unutar vašeg style elementa, promijenite h2 izbornik u klasu .red-text i ažurirajte

Responsive Web Design: II. CSS < 3 >

II.6. Promijenite veličinu fonta jednog elementa

Responsive Web Design: II. CSS < 4 >

II.7. Postavljanje vrste fonta jednog elementa

Za postavljanje vrste fonta jednog elementa koristi se font-family svojstvo.

Učinite da svi p elementi upotrebljavaju font Monospace.

Responsive Web Design: II. CSS < 5 >

Stvorite font-family CSS pravilo koje će koristiti font Lobster, i pobrinite se da se

Responsive Web Design: II. CSS < 6 >

II.9. Degradacija fontova

Postoji nekoliko zadanih fontova koji su dostupni u svim preglednicima. To je generička

Responsive Web Design: II. CSS < 7 >

II.10. Određivanje veličine slike

Izradite klasu s nazivom smaller-image i upotrijebite ju za promjenu veličine slike tako da

Responsive Web Design: II. CSS < 8 >

II.11. Dodavanje granične linije oko vaših elemenata

Responsive Web Design: II. CSS < 9 >

II.12. Dodavanje zakrivljenih kutova pomoću svojstva border-radius

Svojstvo border-radius se određuje u pikselima. Dajte vašoj fotografiji mačke border-

Responsive Web Design: II. CSS < 10 >

II.13. Načinite sliku u krugu pomoću svojstva border-radius

Pored piksela, moguće je odrediti border-radius i pomoću postotka.

Dajte vašoj fotografiji mačke border-radius od 50%.

Responsive Web Design: II. CSS < 11 >

II.14. Dodavanje boje pozadini u div element

Pozadinsku boju elementa možete postaviti pomoću svojstva background-color.

Stvorite klasu nazvanu silver-background s background-color: silver, te je dodijelite

Responsive Web Design: II. CSS < 12 >

Osim klasa, svaki HTML element također može imati id svojstvo.

Dodajte svom form elementu id cat-photo-form.

Responsive Web Design: II. CSS < 13 >

II.16. Upotrijebite ID svojstvo za stiliziranje elementa

Responsive Web Design: II. CSS < 14 >

Promijenite padding plavog četverokuta kako bi odgovarao crvenom četverokutu.

Responsive Web Design: II. CSS < 15 >

II.18. Podešavanje margine elementa

Promijenite margin plavog četverokuta kako bi odgovarala crvenom.

Responsive Web Design: II. CSS < 16 >

Postavite marginu na negativnu vrijednost poput one za crveni četverokut.

II.20. Dodavanje različitih ispuna sa svake strane elementa

Responsive Web Design: II. CSS < 17 >

Responsive Web Design: II. CSS < 18 >

II.22. Odredite vrijednosti ispune elementa u smjeru kazaljke na satu

Umjesto određivanja ispune elementa pomoću padding-top, padding-right, padding-

padding: 10px 20px 10px 20px;

Responsive Web Design: II. CSS < 19 >

II.23. Odredite vrijednosti margine elementa u smjeru kazaljke na satu

Pokušajmo ovo ponovo, ali s margin ovaj put.

margin: 10px 20px 10px 20px;

Responsive Web Design: II. CSS < 20 >

II.24. Koristite atributne izbornike za stiliziranje elemenata