Phông chữ và class

Xem này: phông chữ đẹp hơn

Phông mặc định của trình duyệt nhàm chán. Hãy đổi bằng một quy tắc cho cả trang:

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

font-family là danh sách mong muốn: “Dùng Verdana. Không có? Thì Arial. Cũng không? Bất kỳ phông sans-serif (sans-serif).”

Phông hầu hết máy tính đều có: Verdana, Georgia (có chân, tốt cho văn bản dài), Trebuchet MS, Courier New (trông như máy đánh chữ). Thử vài cái – đổi phông tạo khác biệt lớn cho website.

Xem này: class

Đến giờ bạn có thể tô kiểu mọi đoạn cùng lúc. Nhưng nếu một đoạn cần khác – như thông báo quan trọng? Đó là lúc dùng class:

Trong HTML, gán tên class cho thẻ:

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

Và trong CSS, nhắm vào bằng dấu chấm:

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

• background-color – màu nền của riêng phần tử đó
• border – khung: độ dày, kiểu, màu
• padding – khoảng cách giữa chữ và khung (để chữ không dính mép)
• border-radius – góc bo tròn

Bạn có thể gán class cho bao nhiêu phần tử cũng được – chúng trang trí giống nhau. Giống đồng phục trường, nhưng cho thẻ HTML.

Lượt của bạn 💪

1. Đặt phông cho cả website bằng font-family trên body.
2. Nghĩ ít nhất một class phù hợp dự án, và dùng ở hai chỗ.

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

Điều cần nhớ từ bài này

• font-family trên body đổi phông cho cả website.
• Class là nhãn tên: trong HTML class="name", trong CSS .name { ... }.
• padding, border, và border-radius biến đoạn văn thường thành huy hiệu màu đẹp.

© 2026 Ing. Martin Polak / AlgoRhino · Điều khoản sử dụng nội dung