Cách nhúng CSS vào website

Cách nhúng CSS vào website

Để CSS có thể thực thi trên website hoặc HTML Documents thì phải tiến hành nhúng CSS vào website. Nếu không, các định dạng CSS sẽ không thực thi trên HTML. Có 3 cách nhúng CSS vào website:

  1. Inline CSS – Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ <style></style>.
  2. Internal CSS – dùng thẻ <style> bên trong thẻ <head> của HTML để tạo ra nơi viết mã CSS.
  3. External CSS – Tạo một tập tin .css riêng và nhúng vào tài liệu HTML thông qua cặp thẻ <link>.

Inline CSS
Đặt thuộc tính style vào thẻ mở của phần tử HTML, giá trị của thuộc tính style là các cặp thuộc tính định dạng CSS. Mã CSS chỉ tác động nên chính phần tử đó.

<p style="color:red">This is a sentence.</p>

Internal CSS
Đặt các cặp thuộc tính định dạng CSS vào bên trong cặp thẻ <style type=”text/css”></style>.

<head>
   <style type="text/css">
     body {
        background: #fff;
        font-size: 14px;
     }
   </style>
</head>

External CSS
Với External CSS: Ta đặt các thuộc tính định dạng vào bên trong tập tin CSS. Đây là một tập tin hoàn toàn độc lập so với file (File này thường được đặt phần mở rộng là .css) sau đó dùng thẻ link <link rel=”stylesheet” type=”text/css” href=”đường dẫn đến tập tin CSS”> đặt ở phần head (cặp thẻ <head></head> của các tập tin HTML) để có thể thực hiện nhúng tập tin CSS vào trang web.

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