CSS (Cascading Style Sheets) određuje izgled: boje, slova, razmake i raspored. Isti HTML može izgledati potpuno drugačije sa drugim CSS fajlom. U ovoj lekciji su pravila, selektori (element, klasa, id), boje, fontovi i kako pregledač odlučuje koje pravilo pobeđuje.
h1 { ← selektor: na koje elemente se odnosi
color: navy; ← svojstvo: vrednost;
font-size: 32px;
}| Gde se piše CSS | Primer | Kada |
|---|---|---|
| poseban fajl (najbolje) | <link rel="stylesheet" href="css/stil.css"> u head | uvek – jedan fajl za ceo sajt |
u style elementu | <style> h1 { color: navy; } </style> u head | male probe, jedna strana |
| u atributu | <p style="color: red"> | izbegavati – teško se menja |
<style>
p { color: #333; } /* svi pasusi */
.vazno { background: #fff3cd; } /* svi elementi sa class="vazno" */
#naslov { color: #2b7bb9; } /* jedan element sa id="naslov" */
li a { color: green; } /* linkovi UNUTAR li */
h2, h3 { font-family: Georgia, serif; } /* više selektora odjednom */
a:hover { color: crimson; } /* kada je miš iznad linka */
</style>
<h2 id="naslov">Selektori</h2>
<p>Običan pasus.</p>
<p class="vazno">Pasus sa klasom „vazno“.</p>
<ul><li><a href="#">link u listi</a></li></ul>
<a href="#">link van liste (pređi mišem)</a>
Rezultat:
| Selektor | Bira | Napomena |
|---|---|---|
p | sve elemente tog tipa | |
.ime | sve elemente sa class="ime" | klasa se koristi na više elemenata; element može imati više klasa: class="kartica vazno" |
#ime | element sa id="ime" | id je jedinstven na stranici |
A B | B koji je bilo gde unutar A | potomak |
A > B | B koji je direktno dete od A | |
:hover, :first-child, :nth-child(2n) | stanje ili položaj | pseudo-klase |
Za stilizovanje se najčešće koriste klase – fleksibilne su i lako se ponovo upotrebe.
| Zapis boje | Primer |
|---|---|
| ime | red, navy, white |
| heksadekadno #RRGGBB | #2b7bb9 – po dve heks cifre za crvenu, zelenu i plavu (00–ff) |
| rgb() / rgba() | rgb(43, 123, 185), rgba(0, 0, 0, 0.5) – poslednji broj je providnost |
| hsl() | hsl(205, 62%, 45%) – nijansa, zasićenost, osvetljenost |
| Jedinica | Značenje |
|---|---|
px | piksel – fiksna veličina |
% | procenat veličine roditelja |
rem | u odnosu na osnovnu veličinu slova (obično 16px): 1.5rem = 24px – preporučeno za slova |
em | u odnosu na veličinu slova roditelja |
vw, vh | procenat širine / visine prozora |
Veza sa programiranjem: u heksadekadnom zapisu ff = 255, pa je #ff0000 isto što i rgb(255, 0, 0). Kontrast teksta i pozadine mora biti dovoljan da se tekst lako čita.
<style>
body { font-family: "Segoe UI", Arial, sans-serif; line-height: 1.6; }
h1 { font-size: 2rem; text-align: center; color: #1f5f91; }
.podnaslov { font-style: italic; text-align: center; color: #666; }
.napomena { font-weight: bold; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; }
a { text-decoration: none; border-bottom: 2px solid #2b7bb9; }
</style>
<h1>Informatička sekcija</h1>
<p class="podnaslov">Svakog utorka u 14 časova</p>
<p class="napomena">Prijave su otvorene</p>
<p>Više na <a href="#">stranici sekcije</a>.</p>
Rezultat:
| Svojstvo | Primeri vrednosti |
|---|---|
font-family | lista fontova, poslednji je opšti: Arial, sans-serif |
font-size | 16px, 1.2rem |
font-weight / font-style | bold, 400, 700 / italic |
text-align | left, center, right, justify |
line-height | razmak između redova, npr. 1.6 |
text-decoration | none (bez podvlačenja), underline |
Posebni fontovi mogu se besplatno uključiti sa Google Fonts – sajt daje gotov <link> za head.
Kada se više pravila odnosi na isti element, pregledač bira po redu:
style="" > #id > .klasa > element.body.<style>
p { color: gray; }
.plavo { color: blue; }
p { color: green; } /* kasnije od prvog p pravila → pobeđuje njega */
#poseban { color: red; } /* id je specifičniji od klase */
</style>
<p>Običan pasus – zelen (kasnije pravilo).</p>
<p class="plavo">Pasus sa klasom – plav (klasa jača od elementa).</p>
<p class="plavo" id="poseban">Pasus sa klasom i id – crven.</p>
Rezultat:
Za svaki zadatak postoji primer, uputstvo i rešenje. Rešenja su provereno ispravna u pregledaču.
Napravi fajl css/stil.css, poveži ga sa stranicom „O meni“ i zadaj: font za ceo sajt, boju glavnog naslova, klasu .istaknuto sa svetlom pozadinom i linkove bez podvlačenja koji menjaju boju kada je miš iznad njih.
color: red; – bez njega se sledeće svojstvo ne primenjuje.class="vazno"), a u CSS-u sa tačkom (.vazno).<link> i u F12 pogledaj da li je pravilo precrtano (pobedilo ga je drugo).id za stilizovanje više elemenata – id je jedinstven.1. Kako se u CSS-u bira element sa class="kartica"?
2. Koja boja je #ff0000?
3. Koji selektor je najspecifičniji?
4. Gde je najbolje pisati CSS za ceo sajt?