Czcionki i klasy · Koduj z Martinem

Wybierz ładną czcionkę na stronę i poznaj klasy – najprzydatniejszy trik w całym CSS.

Pokażę ci: ładniejsza czcionka

Domyślna czcionka przeglądarki jest nudna. Zmieńmy ją regułą dla całej strony:

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

font-family to lista życzeń: „Użyj Verdana. Nie masz? To Arial. Też nie? To dowolnej bezszeryfowej (sans-serif).”

Czcionki, które ma prawie każdy komputer: Verdana, Georgia (szeryfowa, dobra do długich tekstów), Trebuchet MS, Courier New (jak maszyna do pisania). Przetestuj kilka – zmiana czcionki robi cuda na stronie.

Pokażę ci: klasy

Do tej pory możesz stylować wszystkie akapity naraz. A co, gdy jeden akapit ma wyglądać inaczej – jak ważne ogłoszenie? Do tego służą klasy:

W HTML daj tagowi nazwę klasy:

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

A w CSS celuj w nią kropką:

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

background-color – kolor tła tylko tego elementu
border – ramka: grubość, styl, kolor
padding – odstęp między tekstem a ramką (żeby tekst nie kleił się do brzegu)
border-radius – zaokrąglone rogi

Klasy możesz dać wielu elementom – wszystkie ubrają się tak samo. Jak mundurek szkolny, tylko dla tagów.

Teraz ty 💪

Ustaw czcionkę dla całej strony przez font-family w body.
Wymyśl co najmniej jedną klasę pasującą do projektu i użyj jej w dwóch miejscach.

🏫 Strona szkoły – rozwiązanie (klasa „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;
}

🙋 Strona osobista – rozwiązanie (klasa „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;
}

🌍 Dziennik podróży – rozwiązanie (klasa „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;
}

⚽ Strona klubu – rozwiązanie (klasa „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;
}

Zwycięstwa od razu świecą na zielono – jak w prawdziwej tabeli!

✅

Sprawdź się: Twoja strona ma nową czcionkę i co najmniej jeden element z własną klasą, który wygląda inaczej niż reszta.

Co wyniesiesz z tej lekcji

font-family w body zmienia czcionkę całej strony.
Klasa to tag z nazwą: w HTML class="nazwa", w CSS .nazwa { ... }.
padding, border i border-radius zamieniają zwykły akapit w ładną kolorową odznakę.