Pisave in razredi

Pokažem ti: lepša pisava

Privzeta pisava brskalnika je dolgočasna. Zamenjajmo jo z enim pravilom za celotno stran:

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

font-family je seznam želja: “Uporabi Verdana. Je ni? Potem Arial. Tudi te ni? Potem katero koli pisavo brez serifov (sans-serif).”

Pisave, ki jih ima skoraj vsak računalnik: Verdana, Georgia (ima nogice, dobra za daljša besedila), Trebuchet MS, Courier New (izgleda kot pisalni stroj). Preizkusi jih – sprememba pisave naredi čudeže na spletni strani.

Pokažem ti: razredi

Za zdaj lahko oblikuješ vse odstavke hkrati. Kaj pa, če mora en odstavek izgledati drugače – na primer pomembno obvestilo? Za to so razredi:

V HTML oznaki daj ime razreda:

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

V CSS pa ga ciljaj s piko:

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

• background-color – barva ozadja samo tega elementa
• border – okvir: debelina, slog, barva
• padding – razmik med besedilom in okvirjem (da besedilo ni zlepljeno na rob)
• border-radius – zaobljeni koti

Razred lahko daš na toliko elementov, kolikor želiš – vsi bodo oblačeni enako. Kot šolska uniforma, samo za oznake.

Zdaj si na vrsti 💪

1. Nastavi pisavo za celotno spletno stran z font-family na body.
2. Izmisli vsaj en razred, ki ustreza tvojemu projektu, in ga uporabi na dveh mestih.

<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;
}

Kaj si vzameš iz te lekcije

• font-family na body spremeni pisavo za celotno spletno stran.
• Razred je imenska značka: v HTML class="ime", v CSS .ime { ... }.
• padding, border in border-radius spremenijo navaden odstavek v lepo barvno značko.

© 2026 Ing. Martin Polak / AlgoRhino · Pogoji uporabe vsebine