Liên Kết CSS Với HTML Để Mã Dễ Đọc Hơn

Phát triển web thường trải qua 3 giai đoạn thêm CSS: Inline → Internal → External.

1. Inline Style (CSS Nội Tuyến)

Viết trực tiếp trên thẻ qua thuộc tính style:

<h1 style="color:blue; text-align:center;">Tiêu Đề</h1>

Nhược điểm: lặp code, khó bảo trì, mélange HTML/CSS.

2. Internal CSS (CSS Nội Bộ)

Viết trong <style> bên trong <head>:

<head>
  <style>
    h1, h4 { text-align: center; }
    h1 { color: blue; }
    h4 { color: red; }
  </style>
</head>

HTML gọn hơn, nhưng file HTML phình to nếu CSS nhiều.

3. External CSS (CSS Ngoại Bộ) - Khuyến Nghị

Tách file .css riêng, liên kết bằng <link>.

Các Bước Thiết Lập

1. Tạo file index.css cùng thư mục index.html.
2. Di chuyển toàn bộ CSS từ <style> sang file .css (không bao gồm thẻ <style>).
3. Trong <head> của HTML, thêm:

<link rel="stylesheet" type="text/css" href="./index.css">

Giải thích 3 phần:

• rel="stylesheet": mối quan hệ là stylesheet.
• type="text/css": loại MIME.
• href="./index.css": đường dẫn tương đối đến file CSS.

Nhiều File CSS

Có thể link nhiều file. Thứ tự link quyết định độ ưu tiên (cascading): file sau ghi đè file trước nếu cùng selector.

Kết Luận

External CSS giúp mã HTML sạch, CSS tập trung, dễ bảo trì, cache trình duyệt. Đây là tiêu chuẩn chuyên nghiệp cho mọi dự án.