Fontit ja luokat

Näytän sinulle: kivempi fontti

Selaimen oletusfontti on tylsä. Vaihdetaan se yhdellä säännöllä koko sivulle:

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

font-family on toivelista: “Käytä Verdanaa. Ei ole? Sitten Arial. Ei sitäkään? Sitten mikä tahansa sans-serif-fontti (sans-serif).”

Fontteja joita lähes jokaisella tietokoneella on: Verdana, Georgia (pienet jalat, hyvä pidemmälle tekstille), Trebuchet MS, Courier New (näyttää kirjoituskoneelta). Kokeile muutamaa – fontin vaihtaminen tekee ihmeitä verkkosivulle.

Näytän sinulle: luokat

Tähän asti voit tyylitellä jokaisen kappaleen kerralla. Mutta entä jos yksi kappale pitää näyttää erilaiselta – kuten tärkeä ilmoitus? Siihen ovat luokat:

HTML:ssä anna tagille luokan nimi:

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

Ja CSS:ssä kohdista siihen pisteellä:

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

• background-color – vain sen yhden elementin taustaväri
• border – kehys: paksuus, tyyli, väri
• padding – tila tekstin ja reunan välissä (ettei teksti ole kiinni reunassa)
• border-radius – pyöristetyt kulmat

Voit laittaa luokan niin monelle elementille kuin haluat – ne kaikki pukeutuvat samalla tavalla. Kuin koulupuku, mutta tageille.

Nyt sinun vuorosi 💪

1. Aseta fontti koko verkkosivullesi käyttämällä font-family:a body:ssä.
2. Keksi vähintään yksi luokka joka sopii projektiisi, ja käytä sitä kahdessa paikassa.

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

Mitä opit tästä oppitunnista

• font-family body:ssä vaihtaa fontin koko verkkosivulle.
• Luokka on nimilappu: HTML:ssä class="nimi", CSS:ssä .nimi { ... }.
• padding, border ja border-radius muuttavat tavallisen kappaleen kivaksi värilliseksi merkiksi.

© 2026 Ing. Martin Polak / AlgoRhino · Sisällön käyttöehdot