Liên kết External Style Sheets (File CSS ngoài) trong CSS

CSS cho phép chúng ta liên kết các file style sheet bên ngoài vào tài liệu HTML. Điều này giúp tách biệt CSS ra riêng, dễ dàng bảo trì, và cải thiện thời gian tải trang nhờ caching trình duyệt. File CSS ngoài được chỉ định trong thẻ <link> bên trong <head> của tài liệu.

Cú pháp

<link rel="stylesheet" href="#location">

Ví dụ 1: HTML file và CSS file riêng biệt

HTML file (index.html):

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h2>Demo Text</h2>
  <div>
    <ul>
      <li>This is demo text.</li>
      <li>This is demo text.</li>
      <li>This is demo text.</li>
      <li>This is demo text.</li>
      <li>This is demo text.</li>
    </ul>
  </div>
</body>
</html>

CSS file (style.css):

h2 { color: red; }
div { background-color: lightcyan; }

Kết quả

Ví dụ 2: External CSS với background image

HTML file:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h2>Demo Heading</h2>
  <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
</body>
</html>

CSS file (style.css):

p {
  background: url("https://www.tutorialspoint.com/images/QAicon.png");
  background-origin: content-box;
  background-size: cover;
  box-shadow: 0 0 3px black;
  padding: 20px;
  background-origin: border-box;
}

Kết quả

Thuộc tính quan trọng của <link>:

• rel="stylesheet" - Bắt buộc, chỉ định mối quan hệ là stylesheet
• href - Đường dẫn đến file CSS (relative hoặc absolute)
• type="text/css" - MIME type (tùy chọn trong HTML5)
• media - Media type/query (screen, print, (max-width: 768px))
• title - Cho alternate stylesheets

Best practices:

• Đặt <link> trong <head> (không phải body)
• Gộp nhiều file CSS nhỏ thành một file để giảm HTTP requests
• Minify CSS cho production
• Sử dụng preload cho critical CSS: <link rel="preload" as="style" href="critical.css">
• Tránh @import trong CSS (chặn rendering, tải tuần tự)