Thiết lập cỡ chữ (Font Size) bằng Pixel trong CSS

Để thiết lập thuộc tính font-size trong CSS, bạn có thể sử dụng pixel (px). Điều này hữu ích khi bạn cần độ chính xác pixel cho văn bản.

Ví dụ 1: Kích thước khác nhau

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 { background-color: hsla(140, 100%, 50%, 0.8); }
#demo2 { background-color: hsla(130, 100%, 50%, 0.6); }
#demo3 { background-color: hsla(190, 100%, 50%, 0.4); }
#demo4 { background-color: hsla(170, 100%, 50%, 0.3); }
#demo5 { background-color: hsl(150, 100%, 60%); }
#demo6 {
  background-color: rgba(108, 111, 35, 0.6);
  font-size: 30px;
  color: yellow;
  transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>Các vận động viên Cricketer</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Các Cricketer Úc</p>
</body>
</html>

Kết quả

Ví dụ 2: Kết hợp với text-decoration

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  text-decoration: overline;
  text-decoration-color: yellow;
  font-size: 25px;
}
</style>
</head>
<body>
<h1>Chi tiết kỳ thi</h1>
<p class="demo">Kỳ thi ngày 20 tháng 12.</p>
<p class="demo2">Kỳ thi bắt đầu lúc 9AM.</p>
</body>
</html>

Kết quả

Lưu ý:

• Pixel là đơn vị tuyệt đối, không thay đổi theo cỡ chữ gốc
• Phù hợp khi cần kiểm soát chính xác kích thước
• Không khuyến khích cho thiết kế responsive (nên dùng rem/em)