CSS là ngôn ngữ được sử dụng để định kiểu cho các phần tử HTML, giúp trang web trở nên bắt mắt hơn. CSS cho phép bạn thay đổi màu sắc, font chữ, bố cục và nhiều thuộc tính khác của trang web. Trong bài viết này, chúng ta sẽ cùng tìm hiểu các cách để thêm CSS vào tài liệu HTML, bao gồm: CSS nội tuyến (inline CSS), CSS nội bộ (internal CSS), và CSS ngoài (external CSS).

1. Tổng quan

CSS được sử dụng để điều chỉnh giao diện của các phần tử trên trang web. Bằng cách áp dụng các thuộc tính CSS, bạn có thể thay đổi:

  • Màu sắc
  • Kiểu font chữ
  • Kích thước và vị trí các phần tử
  • Khoảng cách giữa các phần tử
  • Và nhiều thuộc tính khác liên quan đến thiết kế.

Có ba cách chính để thêm CSS vào tài liệu HTML:

  1. CSS nội tuyến (Inline CSS): Được sử dụng trực tiếp trong các thẻ HTML.
  2. CSS nội bộ (Internal CSS): Được thêm vào trong phần <style> bên trong tài liệu HTML.
  3. CSS ngoài (External CSS): Được liên kết qua một tệp CSS riêng biệt.

Bây giờ, chúng ta sẽ đi chi tiết từng phương pháp.

2. CSS Inline (nội tuyến)

CSS nội tuyến được sử dụng trực tiếp trong các phần tử HTML bằng cách thêm thuộc tính style ngay bên trong thẻ HTML. Phương pháp này hữu ích khi bạn chỉ muốn áp dụng một số thay đổi nhỏ cho một phần tử cụ thể.

Cú pháp:

html
Thử online
<element style="property: value;">
    Nội dung của phần tử
</element>

Ví dụ:

html
Thử online
<p style="color: red; font-size: 20px;">Đây là đoạn văn có màu đỏ và cỡ chữ 20px.</p>

Trong ví dụ trên:

  • color: red; đặt màu chữ của đoạn văn thành màu đỏ.
  • font-size: 20px; thay đổi kích thước chữ thành 20px.

Khi nào nên sử dụng Inline CSS?

  • Khi bạn chỉ cần thay đổi một vài phần tử đơn lẻ trên trang web.
  • Không cần thay đổi toàn bộ bố cục của trang.

Hạn chế:

  • Inline CSS không lý tưởng cho các trang web lớn vì khó bảo trì và quản lý.
  • Không khuyến khích sử dụng để quản lý giao diện của nhiều phần tử.

3. CSS Internal (CSS nội bộ)

CSS nội bộ được đặt trong thẻ <style> bên trong phần <head> của tài liệu HTML. Phương pháp này rất hữu ích khi bạn muốn áp dụng các kiểu cho toàn bộ trang, nhưng không muốn hoặc không cần sử dụng tệp CSS bên ngoài.

Cú pháp:

html
index.html
<head>
    <style>
        selector {
            property: value;
        }
    </style>
</head>

Ví dụ:

html
Thử online
index.html
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ví dụ về CSS nội bộ - codetuthub.com</title>
    <style>
        body {
            background-color: lightblue;
        }

        h1 {
            color: navy;
            font-family: Arial, sans-serif;
        }

        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Tiêu đề trang</h1>
    <p>Đây là đoạn văn có cỡ chữ 18px.</p>
</body>
</html>

Giải thích:

  • background-color: lightblue;: Đặt màu nền của trang thành màu xanh nhạt.
  • h1 { color: navy; }: Đổi màu chữ của tất cả các thẻ <h1> thành màu xanh đậm.
  • p { font-size: 18px; }: Đặt kích thước chữ cho tất cả các đoạn văn thành 18px.

Khi nào nên sử dụng Internal CSS?

  • Khi bạn chỉ cần áp dụng CSS cho một trang cụ thể.
  • Trang web không quá phức tạp, không cần dùng lại kiểu trên nhiều trang.

Hạn chế:

  • Không phù hợp cho các trang web lớn với nhiều trang vì bạn phải lặp lại mã CSS trên từng trang.
  • Khi cần thay đổi kiểu chung cho toàn bộ trang web, việc sử dụng CSS nội bộ có thể gây khó khăn trong quản lý.

4. CSS External (CSS bên ngoài)

CSS ngoài được lưu trữ trong một tệp riêng biệt có phần mở rộng .css. Bạn có thể liên kết tệp CSS này với một hoặc nhiều tài liệu HTML bằng thẻ <link> trong phần <head>. Đây là phương pháp tốt nhất để áp dụng CSS cho các dự án lớn vì tính tổ chức và dễ bảo trì.

Cú pháp:

1. Tạo tệp CSS ngoài (ví dụ: styles.css):

css
styles.css
body {
    background-color: #f0f0f0;
}

h1 {
    color: green;
    text-align: center;
}

p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
}

2. Liên kết tệp CSS với trang HTML:

html
Thử online
index.html
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ví dụ về CSS ngoài - codetuthub.com</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Tiêu đề trang</h1>
    <p>Đây là đoạn văn có font chữ Verdana và cỡ chữ 16px.</p>
</body>
</html>

Giải thích:

  • Thẻ <link> liên kết tệp CSS ngoài với tài liệu HTML. href="styles.css" chỉ định đường dẫn đến tệp CSS.
  • Khi trang được tải, trình duyệt sẽ tự động tải và áp dụng các quy tắc CSS từ tệp styles.css.

Khi nào nên sử dụng External CSS?

  • Khi bạn có nhiều trang web muốn sử dụng cùng một kiểu CSS.
  • Khi muốn dễ dàng quản lý và bảo trì mã CSS, đặc biệt là đối với các dự án lớn.

Ưu điểm:

  • Dễ quản lý: Mọi quy tắc CSS được giữ trong một tệp duy nhất, giúp việc thay đổi giao diện toàn bộ trang web trở nên dễ dàng.
  • Tái sử dụng: Một tệp CSS có thể được sử dụng trên nhiều trang khác nhau.

Hạn chế:

  • Nếu tệp CSS ngoài không được tải thành công (vì lý do mạng), trang web có thể không được định dạng đúng cách.

5. Kết hợp các phương pháp thêm CSS

Bạn có thể kết hợp cả ba phương pháp trên trong một trang web. Tuy nhiên, hãy lưu ý rằng:

  • CSS nội tuyến có độ ưu tiên cao nhất, tức là nếu có xung đột giữa các quy tắc CSS, thì CSS nội tuyến sẽ được áp dụng.
  • CSS nội bộ có độ ưu tiên cao hơn CSS ngoài nhưng thấp hơn CSS nội tuyến.
  • CSS ngoài có độ ưu tiên thấp nhất nhưng lại dễ quản lý nhất.

Ví dụ về kết hợp CSS:

html
Thử online
index.html
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ví dụ kết hợp CSS - codetuthub.com</title>
    <link rel="stylesheet" href="styles.css"> <!-- CSS ngoài -->
    <style>
        p {
            color: blue;
        }
    </style> <!-- CSS nội bộ -->
</head>
<body>
    <h1 style="color: red;">Tiêu đề trang</h1> <!-- CSS nội tuyến -->
    <p>Đoạn văn này sẽ có màu xanh dương (CSS nội bộ).</p>
</body>
</html>

Kết quả:

  • Tiêu đề <h1> sẽ có màu đỏ vì sử dụng CSS nội tuyến.
  • Đoạn văn <p> sẽ có màu xanh dương vì sử dụng CSS nội bộ, ghi đè lên quy tắc CSS từ tệp ngoài.

6. Kết luận

CSS là một phần không thể thiếu trong việc thiết kế giao diện trang web, giúp làm cho nội dung trở nên đẹp mắt và chuyên nghiệp hơn. Bạn có thể thêm CSS vào tài liệu HTML thông qua nhiều phương pháp khác nhau: CSS nội tuyến, CSS nội bộ, và CSS ngoài. Tuy nhiên, đối với các dự án lớn và phức tạp, việc sử dụng CSS ngoài là phương pháp tối ưu nhất vì tính tổ chức và khả năng tái sử dụng.

Việc hiểu rõ từng phương pháp thêm CSS sẽ giúp bạn dễ dàng kiểm soát và tối ưu hóa việc quản lý giao diện trang web của mình. Hãy tiếp tục luyện tập và khám phá các thuộc tính CSS để tạo ra những trang web ấn tượng!

Hy vọng bài viết này đã giúp bạn hiểu rõ cách thêm CSS vào tài liệu HTML. Chúc bạn thành công trong việc học và phát triển kỹ năng CSS của mình!