Font dan kelas

Tunjukkan pada saya: font yang lebih bagus

Font default browser membosankan. Mari kita tukar dengan satu aturan untuk keseluruhan halaman:

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

font-family adalah daftar keinginan: “Gunakan Verdana. Tidak punya? Lalu Arial. Bukan itu juga? Lalu font sans-serif apa pun (sans-serif).”

Font yang dimiliki hampir setiap komputer: Verdana, Georgia (memiliki kaki yang kecil, cocok untuk teks yang lebih panjang), Trebuchet MS, Courier New (terlihat seperti mesin tik). Cobalah beberapa – mengubah font akan menghasilkan keajaiban di situs web.

Tunjukkan pada saya: kelas

Sejauh ini kamu dapat menata setiap paragraf sekaligus. Namun bagaimana jika satu paragraf perlu terlihat berbeda – seperti pemberitahuan penting? Itulah gunanya kelas:

Dalam HTML, beri tag nama kelas:

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

Dan di CSS, targetkan dengan sebuah titik:

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

• background-color – warna latar belakang dari satu elemen saja
• border – bingkai: ketebalan, gaya, warna
• padding – spasi antara teks dan tepi (sehingga teks tidak menempel pada tepinya)
• border-radius – sudut membulat

kamu dapat menempatkan kelas pada elemen sebanyak yang kamu suka – semuanya akan berpakaian dengan cara yang sama. Ini seperti seragam sekolah, tapi untuk tag.

Giliran kamu 💪

1. Tetapkan font untuk seluruh situs web kamu menggunakan font-family di body.
2. Buatlah setidaknya satu kelas yang sesuai dengan proyek kamu, dan gunakan di dua tempat.

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

Apa yang bisa diambil dari pelajaran ini

• font-family di body mengubah font untuk keseluruhan situs web.
• Kelas adalah tag nama: dalam HTML class="name", dalam CSS .name { ... }.
• padding, border, dan border-radius mengubah paragraf biasa menjadi lencana kecil berwarna yang bagus.

© 2026 Ing. Martin Polak / AlgoRhino · Ketentuan penggunaan konten