Písma a triedy · Programuj s Martinom

Vyber si poriadne písmo pre svoju webovú stránku a nauč sa triedy – najužitočnejší trik v celom CSS.

Ukážem ti: krajšie písmo

Predvolené písmo prehliadača je nudné. Vymeňme ho jedným pravidlom pre celú stránku:

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

font-family je zoznam prianí: „Použi Verdana. Nemáš ju? Tak Arial. Ani to nie? Tak akékoľvek písmo bez pätiek (sans-serif).”

Písma, ktoré má takmer každý počítač: Verdana, Georgia (má päticky, dobré na dlhší text), Trebuchet MS, Courier New (vyzerá ako písací stroj). Vyskúšaj pár – zmena písma na webe robí zázraky.

Ukážem ti: triedy

Zatiaľ vieš naštýlovať všetky odstavce naraz. Čo ak jeden odstavec má vyzerať inak – napríklad dôležité oznámenie? Na to sú triedy:

V HTML daj tagu názov triedy:

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

A v CSS ho zaciel pomocou bodky:

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

background-color – farba pozadia len toho jedného prvku
border – rám: hrúbka, štýl, farba
padding – priestor medzi textom a rámom (aby text nebol nalepený na okraj)
border-radius – zaoblené rohy

Triedu môžeš dať na koľko prvkov chceš – všetky budú vyzerať rovnako. Ako školská uniforma, ale pre tagy.

Teraz ty 💪

Nastav písmo pre celú webovú stránku pomocou font-family na body.
Vymysli aspoň jednu triedu, ktorá pasuje k tvojmu projektu, a použi ju na dvoch miestach.

🏫 Webová stránka školy – riešenie (trieda „news")

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

🙋 Osobná webová stránka – riešenie (trieda „favorite")

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

🌍 Cestovný denník – riešenie (trieda „tip")

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

⚽ Webová stránka klubu – riešenie (trieda „win")

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

Výhry sa hneď zvýraznia zelenou – ako v skutočnej tabuľke!

✅

Skontroluj sa: Tvoja webová stránka má nové písmo a aspoň jeden prvok s vlastnou triedou, ktorý vyzerá inak ako zvyšok.

Čo si z tejto lekcie odnášaš

font-family na body zmení písmo pre celú webovú stránku.
Trieda je menovka: v HTML class="nazov", v CSS .nazov { ... }.
padding, border a border-radius z obyčajného odstavca spravia peknú farebnú bublinku.