Fontovi i klase

Pokazat ću ti: ljepši font

Zadani font preglednika je dosadan. Zamijenimo ga jednim pravilom za cijelu stranicu:

body {
  font-family: Verdana, Arial, sans-serif;
}

font-family je popis želja: “Koristi Verdana. Nemaš je? Onda Arial. Ni toga? Onda bilo koji sans-serif font (sans-serif).”

Fontovi koje gotovo svako računalo ima: Verdana, Georgia (ima male noge, dobar za duži tekst), Trebuchet MS, Courier New (izgleda kao pisaća mašina). Isprobaj nekoliko – promjena fonta čuda čini za web stranicu.

Pokazat ću ti: klase

Do sada možeš stilizirati sve odlomke odjednom. Ali što ako jedan odlomak treba izgledati drugačije – poput važne obavijesti? Za to služe klase:

U HTML-u daj tagu naziv klase:

<p class="notice">No school tomorrow!</p>

A u CSS-u ciljaj ga s točkom:

.notice {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

• background-color – boja pozadine samo tog elementa
• border – okvir: debljina, stil, boja
• padding – razmak između teksta i okvira (da tekst nije zalijepljen za rub)
• border-radius – zaobljeni kutovi

Klasu možeš staviti na koliko god elemenata želiš – svi će izgledati isto. Kao školska uniforma, ali za tagove.

Sad si ti na redu 💪

1. Postavi font za cijelu web stranicu pomoću font-family na body.
2. Smisli barem jednu klasu koja odgovara tvom projektu i koristi je na dva mjesta.

<p class="news">📢 No school on Friday – teacher training day!</p>
<p class="news">📢 Paper drive starts Monday.</p>

body {
  font-family: Verdana, Arial, sans-serif;
}

.news {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

<p class="favorite">⭐ Favorite game: Minecraft</p>
<p class="favorite">⭐ Favorite food: pancakes</p>

body {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

.favorite {
  background-color: #ffedd5;
  border: 2px solid #ea580c;
  padding: 10px;
  border-radius: 8px;
}

<p class="tip">🎒 Trip tip: head up the mountain early, before it gets hot.</p>
<p class="tip">🎒 Tip: bring water shoes to the beach!</p>

body {
  font-family: Georgia, "Times New Roman", serif;
}

.tip {
  background-color: #dcfce7;
  border: 2px solid #16a34a;
  padding: 10px;
  border-radius: 8px;
}

<li class="win">Eagles – Hawks 3 : 1</li>
<li>Falcons – Eagles 2 : 2</li>
<li class="win">Eagles – Wildcats 4 : 0</li>

body {
  font-family: Verdana, Arial, sans-serif;
}

.win {
  background-color: #dcfce7;
  font-weight: bold;
}

Što ćeš ponijeti iz ove lekcije

• font-family na body mijenja font za cijelu web stranicu.
• Klasa je oznaka: u HTML-u class="name", u CSS-u .name { ... }.
• padding, border i border-radius pretvaraju običan odlomak u lijepu obojenu značku.

© 2026 Ing. Martin Polak / AlgoRhino · Uvjeti korištenja sadržaja