Typsnitt och klasser · Koda med Martin

Välj ett riktigt typsnitt för din webbplats och lär dig om klasser – det mest användbara knepet i all CSS.

Jag visar: ett snyggare typsnitt

Webbläsarens standardtypsnitt är tråkigt. Låt oss byta ut det med en regel för hela sidan:

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

font-family är en önskelista: “Använd Verdana. Har du inte det? Då Arial. Inte det heller? Då vilket sans-serif-typsnitt som helst (sans-serif).”

Typsnitt som nästan alla datorer har: Verdana, Georgia (har små fötter, bra för längre text), Trebuchet MS, Courier New (ser ut som en skrivmaskin). Prova några – att byta typsnitt gör underverk för en webbplats.

Jag visar: klasser

Hittills kan du styla alla stycken på en gång. Men vad om ett stycke ska se annorlunda ut – som en viktig notis? Det är det klasser är till för:

I HTML, ge en tagg ett klassnamn:

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

Och i CSS, rikta in dig på den med en punkt:

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

background-color – bakgrundsfärgen på just det elementet
border – en ram: tjocklek, stil, färg
padding – utrymme mellan texten och ramen (så texten inte sitter fast i kanten)
border-radius – rundade hörn

Du kan sätta en klass på hur många element du vill – de klär sig alla likadant. Det är som en skoluniform, men för taggar.

Nu är det din tur 💪

Sätt ett typsnitt för hela din webbplats med font-family på body.
Hitta på minst en klass som passar ditt projekt, och använd den på två ställen.

🏫 Skolwebbplats – lösning (en "news"-klass)

<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 webbplats – lösning (en "favorite"-klass)

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

🌍 Resejournal – lösning (en "tip"-klass)

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

⚽ Klubbwebbplats – lösning (en "win"-klass)

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

Vinster markeras direkt i grönt – precis som i en riktig tabell!

✅

Kolla själv: Din webbplats har ett nytt typsnitt, och minst ett element med sin egen klass som ser annorlunda ut än resten.

Det här tar du med dig från lektionen

font-family på body ändrar typsnittet för hela webbplatsen.
En klass är en namnskylt: i HTML class="name", i CSS .name { ... }.
padding, border och border-radius förvandlar ett vanligt stycke till en snygg liten färgad bricka.