Skrifttyper og klasser · Kode med Martin

Velg en ordentlig skrifttype til din nettside, og lær om klasser – det mest nyttige trick i al CSS.

Jeg viser deg: en pænere skrifttype

Nettleserens standardskrifttype er kedelig. La oss bytte den ud med én regel for hele siden:

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

font-family er en ønskeliste: “Bruk Verdana. Har du den ikke? Så Arial. Heller ikke den? Så hver sans-serif-skrifttype (sans-serif).”

Skrifttyper nesten alle datamaskine har: Verdana, Georgia (har små fødder, god til længere tekst), Trebuchet MS, Courier New (ligner en skrivemaskine). Prøv et par – at endre skrifttypen gjør underværker på en nettside.

Jeg viser deg: klasser

Foreløpig kan du style hvert avsnitt på én gang. Men hva hvis ét avsnitt skal se anderledes ud – som en vigtig meddelelse? Det er det, klasser er til:

I HTML, giv et tag et klassenavn:

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

Og i CSS, ret det med et punktum:

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

background-color – baggrundsfargen på akkurat det ene element
border – en ramme: tykkelse, stil, farge
padding – plads mellom teksten og rammen (så teksten ikke er klistret til kanten)
border-radius – afrundede hjørner

Du kan sette en klasse på så mange elementer, du vil – de klæder sig alle ens. Det er som en skoleuniform, men for tags.

Nå er det din tur 💪

Sett en skrifttype for hele din nettside med font-family på body.
Finn på mindst én klasse, der passer til prosjektet ditt, og bruk den to steder.

🏫 Skolenettside – løsning (en "news"-klasse)

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

🙋 Personlig nettside – løsning (en "favorite"-klasse)

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

🌍 Reisejournal – løsning (en "tip"-klasse)

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

⚽ Klubnettside – løsning (en "win"-klasse)

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

Sejre fremhæves med en gang i grønt – som i en ekte stillingstabel!

✅

Sjekk deg selv: Din nettside har en ny skrifttype, og mindst ét element med sin egen klasse, der ser anderledes ud end resten.

Dette tar du med deg fra leksjonen

font-family på body endrer skrifttypen for hele nettsiden.
En klasse er et navneskilt: i HTML class="navn", i CSS .navn { ... }.
padding, border og border-radius forvandler et vanligt avsnitt til et pænt lille farget badge.