Khi xây dựng website, HTML tạo cấu trúc còn CSS chịu trách nhiệm về giao diện và trải nghiệm người dùng. Việc hiểu và áp dụng CSS đúng cách sẽ giúp bạn dễ dàng kiểm soát màu sắc, bố cục và phong cách của trang web.
Bài viết này sẽ hướng dẫn bạn các cách sử dụng CSS trong HTML - từ External, Internal đến Inline CSS, đồng thời giới thiệu cách dùng thẻ <link> để thêm CSS, favicon và tối ưu tốc độ tải trang.
Các cách áp dụng CSS vào HTML
External CSS
Sử dụng file .css riêng liên kết qua thẻ <link>. Áp dụng cho nhiều trang.
- Ưu điểm: Bóc tách rõ ràng, tái sử dụng dễ, quản lý dễ, trình duyệt có thể cache.
- Nhược điểm: Tăng số lượng request, có thể chậm hơn ở lần tải đầu.
p {
color: green;
}
<h1>External CSS</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Internal CSS
Sử dụng thẻ <style> trong chính file HTML, áp dụng cho một trang duy nhất.
- Ưu điểm: Giảm request, tải trang nhanh hơn.
- Nhược điểm: Không tái sử dụng cho nhiều trang, code CSS khó tách biệt.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Internal CSS</title>
<style>
p {
color: green;
}
</style>
</head>
<body>
<h1>Internal CSS</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>
Inline CSS
Sử dụng thuộc tính style trực tiếp trên thẻ HTML.
- Ưu điểm: Dùng để test nhanh hoặc làm ví dụ.
- Nhược điểm: Không tái sử dụng được, code xen lẫn HTML khó bảo trì.
<p style="color: green">Đây là một đoạn văn bản màu xanh.</p>
External CSS thường được sử dụng nhiều nhất vì lợi ích tái sử dụng và bóc tách code.
Sử dụng thẻ <link> trong HTML
Liên kết file CSS
Thẻ <link> phổ biến nhất để liên kết CSS bên ngoài (External CSS):
<link
href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;700&display=swap"
rel="stylesheet"
/>
Thêm favicon
Favicon (viết tắt từ Favorite Icon) là biểu tượng nhỏ hiển thị trên tab trình duyệt, thanh bookmark hoặc danh sách trang đã ghim. Đây chính là “dấu hiệu nhận diện” giúp người dùng dễ dàng phân biệt website của bạn giữa nhiều tab đang mở.
Để thêm favicon cho trang web, bạn sử dụng thẻ <link> trong phần <head>:
<link rel="icon" href="favicon.ico" type="image/x-icon" />
Bạn có thể tạo favicon cho nhiều thiết bị bằng Favicon.ico & App Icon Generator.
Preconnect - tối ưu tải font và tài nguyên
Dùng <link rel="preconnect"> để "kết nối trước" với server, giảm độ trễ tải tài nguyên:
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;700&display=swap"
rel="stylesheet"
/>
</head>
Quy trình khi preconnect:
- Phân giải DNS
- Khởi tạo TCP
- Bắt tay HTTPS
Nhờ vậy, tải tài nguyên sẽ nhanh hơn.
Vị trí đặt thẻ <link>
Theo chuẩn HTML, <link> nên đặt trong <head>. Một số trường hợp đặc biệt có thể đặt trong <body>, nhưng phải theo quy định cụ thể. Xem chi tiết tại HTML Standard - Link.
Kết luận
- External CSS: Tách riêng file
.css→ tái sử dụng, dễ quản lý, trình duyệt cache tốt. - Internal CSS: Dùng
<style>trong HTML → giảm request nhưng khó tái sử dụng. - Inline CSS: Dùng
styletrực tiếp trên thẻ → chỉ phù hợp test nhanh hoặc ví dụ nhỏ. - Thẻ
<link>: Liên kết CSS ngoài, thêm favicon, tải font nhanh hơn vớipreconnect. - Vị trí
<link>: Đặt trong<head>để tối ưu tải trang.