CSS ngoài và CSS nội bộ: giải thích link và style

CSS ngoài trong một dòng

CSS ngoài (external CSS) là một tệp .css riêng. Bạn liên kết tới nó từ <head> của mọi trang cần dùng:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Bản thân tệp chỉ chứa các quy tắc CSS thuần, không có thẻ HTML nào bao quanh:

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

Khung xem trước bên dưới không có tệp thứ hai để tải, nên nó đặt cùng đoạn CSS đó trong một phần tử <style>. Đó là CSS nội bộ, và nó hiển thị y hệt như tệp được liên kết:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

CSS nội bộ: phần tử style

CSS nội bộ (internal CSS, còn gọi là CSS nhúng) là một phần tử <style> bên trong trang. Đặt nó trong <head> để các style được biết trước khi phần thân trang hiển thị. Nó áp dụng cho cả trang, và các quy tắc của nó dùng selector, điều mà thuộc tính style inline không làm được.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

Di chuột lên một thẻ: :hover chạy được ở đây vì đó là một quy tắc thật. Cách thứ ba, thuộc tính style, được trình bày ở trang CSS inline.

CSS nội bộ và CSS ngoài

Độ ưu tiên (specificity) như nhau cho cả hai: một quy tắc trong phần tử <style> và cùng quy tắc đó trong tệp được liên kết có trọng lượng y hệt nhau. Khi ngang nhau, quy tắc xuất hiện sau trong tài liệu sẽ thắng.

Thứ tự: stylesheet đứng sau thắng

Các stylesheet được đọc theo thứ tự trong tài liệu, <link> hay <style> đều vậy. Với hai quy tắc có cùng độ ưu tiên, quy tắc đứng sau thắng. Hai khối <style> dưới đây đóng vai một tệp được liên kết, theo sau là phần ghi đè ở cấp trang:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

Nút giữ padding và chữ trắng từ quy tắc đầu tiên và chỉ lấy màu nền từ quy tắc thứ hai. Đó là lý do stylesheet của chính trang web đặt sau stylesheet của framework: <link> thư viện trước, rồi đến tệp của bạn.

Đường dẫn tệp trong href

href của một <link> là một URL, được tính theo vị trí của tệp HTML.

Với trang web có các trang nằm ở nhiều cấp thư mục khác nhau, dạng tương đối theo thư mục gốc (/css/styles.css) giúp một đường dẫn chạy đúng trên mọi trang.

Stylesheet cho bản in và các loại media khác

Thuộc tính media giới hạn stylesheet chỉ áp dụng khi điều kiện khớp. Cả <link> và <style> đều nhận thuộc tính này:

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

Khung xem trước là màn hình, nên biểu ngữ hiện ra. Trên một trang thật, biểu ngữ biến mất khỏi bản in, và trong DevTools bạn có thể thấy điều tương tự bằng cách giả lập loại media print (bảng Rendering).

Lỗi thường gặp

• Sai đường dẫn. Gõ nhầm trong href thì không tải được gì, và trang hiển thị không có style. Mở DevTools, tab Network, và tìm lỗi 404 trên tệp .css.
• Quên rel="stylesheet". Thiếu nó, <link href="styles.css"> không tải stylesheet.
• HTML bên trong tệp .css. Tệp .css chỉ chứa quy tắc. Thẻ <style> bên trong nó không phải CSS hợp lệ và làm hỏng quy tắc đứng cạnh.
• Đặt stylesheet của bạn trước stylesheet của framework. Khi độ ưu tiên bằng nhau, tệp đứng sau thắng, nên hãy liên kết CSS của bạn sau cùng.
• Thấy phiên bản cũ. Trình duyệt lưu đệm stylesheet. Làm mới cứng, hoặc thêm phiên bản vào URL (styles.css?v=2) khi bạn triển khai một thay đổi.