Chèn Mã CSS trong HTML

Để chèn mã CSS vào trang HTML chúng ta có thể thực hiện theo ba cách khác nhau:

  • Chèn mã CSS nội dòng hay inline CSS.
  • Chèn mã CSS nội bộ hay internal CSS.
  • Tham chiếu đến tập tin CSS bên ngoài hay external CSS.

Chèn Mã CSS Nội Dòng - Inline CSS

Chèn CSS nội dòng hay inline CSS là cách chèn mã CSS vào bên trong thẻ mở HTML thông qua thuộc tính style.

Ví dụ:

<p style="font-style: italic;">Mã CSS sẽ được chèn vào bên trong thẻ mở HTML.</p>
<p style="text-decoration: underline; color: red;">Mã CSS nội dòng chỉ áp dụng cho phần tử tương ứng mà mã CSS được thêm vào.</p>

 

Với cách chèn nội dòng thì mã CSS được chèn vào chỉ áp dụng cho phần tử duy nhất ứng với thẻ mở chứa mã CSS.

Chèn Mã CSS Nội Bộ - Internal CSS

Chèn CSS nội bộ hay internal CSS là cách chèn mã CSS vào trang bằng cách đặt chúng vào bên trong cặp thẻ <style></style>.

Ví dụ:

<style type="text/css">
body {
    background-color: #fafafa;
    color: #333;
}
h1 {
    font-size: 25px;
    text-decoration: underline;
}
</style>

 

Với kiểu chèn mã CSS nội bộ thì cùng một đoạn mã CSS có thể được áp dụng cho nhiều phần tử trên trang:

<style type="text/css">
h1 {
    font-size: 25px;
    text-decoration: underline;
}
</style>

 

Ở ví dụ trên, cùng một đoạn code CSS nhưng có thể được áp dụng cho tất cả các phần tử h1 trên trang.

Tham Chiếu Đến Tập Tin CSS Bên Ngoài - External CSS

Tham chiếu đến một tập tin CSS bên ngoài hay external CSS được thực hiện nhở sử dụng thẻ <link>. Cú pháp của kiểu chèn mã CSS tham chiếu như sau:

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

Trong đó giá trị của thuộc tính href là địa chỉ URL của tập tin CSS mà chúng ta muốn tham chiếu tới. Địa chỉ URL này có thể là địa chỉ tuyệt đối hoặc địa chỉ tương đối.

Ví dụ:

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

 

Trong trường hợp chèn CSS theo cách này thì thông thường chúng ta sẽ đặt thẻ <link> bên trong cặp thẻ <head></head> để trình duyệt tải về tập tin CSS sớm hơn giúp cải thiện tốc độ tải trang so với đặt nó ở cuối trang.