CSS có thể được áp dụng vào HTML theo ba cách chính, mỗi cách có ưu điểm và nhược điểm riêng tùy theo mục đích sử dụng.
1. Inline CSS
CSS được viết trực tiếp vào bên trong thẻ HTML thông qua thuộc tính style.
Ví dụ:
<p style=”color: blue; font-size: 18px;”>Đây là đoạn văn có màu xanh. </p>
Ưu điểm:
Dễ hiểu, dễ áp dụng cho các chỉnh sửa nhỏ.
Không cần file CSS riêng.
Nhược điểm:
Khó bảo trì nếu có nhiều phần tử.
Không tách biệt nội dung và trình bày.
2. Internal CSS
CSS được viết trong thẻ <style> bên trong phần <head> của tài liệu HTML.
Ví dụ:
<head>
<style>
p {
color: green;
font-size: 16px;
}
</style>
</head>
🔹 Ưu điểm:
Dễ quản lý trong các trang nhỏ.
Không cần file CSS riêng.
🔹 Nhược điểm:
Không tái sử dụng được cho nhiều trang.
Gây rối nếu có nhiều quy tắc CSS.
3. External CSS
CSS được viết trong một file riêng có phần mở rộng .css, sau đó liên kết vào HTML bằng thẻ <link>.
Ví dụ:
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
File style.css:
p {
color: red;
font-size: 14px;
}
🔹 Ưu điểm:
Tái sử dụng cho nhiều trang web.
Dễ bảo trì, dễ tổ chức.
Tăng tốc độ tải trang nhờ cache.
🔹 Nhược điểm:
Cần thêm bước quản lý file.
Phụ thuộc vào đường dẫn chính xác.