Hướng dẫn link css vào html




Trước khi tiến hành viết CSS và để CSS có thể thực thi trên website hoặc tài liệu HTML của bạn thì bạn phải tiến hành nhúng CSS vào website. Nói về nhúng CSS vào website thì chúng ta có hai cách là:

  • Inline Styles – Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ .
  • External Styles – 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ẻ .

Mỗi cách nhúng đều có ưu và nhược điểm khác nhau, cũng như tùy theo trường hợp mà ta sử dụng nó.

Inline Styles

  • Thích hợp với việc chèn một vài đoạn CSS ngắn.
  • Trình duyệt không mất thời gian tải tập tin CSS.

External Styles

  • Thích hợp với việc chèn nhiều đoạn CSS, dễ quản lý.
  • Nhưng trình duyệt sẽ mất thêm thời gian để tải tập tin CSS.

Và trong các bài học CSS trong serie này bạn có thể sử dụng kiểu Inline Styles để nhúng CSS vào website vì sẽ không mất thời gian tạo tập tin, do chúng ta chỉ viết vài đoạn CSS mà thôi. Anyway, bạn có thể sử dụng kiểu bạn thích.

Cách nhúng CSS với Inline Styles

Để nhúng CSS vào website thông qua kiểu Inline Styles, bạn sẽ khai báo cặp thẻ

[/html]

Và trong cặp thẻ

Unitop.vn - Học lập trình web đi làm

External Css

Với hình thức này tất cả những code css được đưa vào trong file có đuôi mở rộng .css (ví dụ: main.css).

Ưu điểm: Giúp Css có thể dùng chung cho nhiều page khác nhau của website và dễ dàng quản lý.

Ví dụ bên dưới giúp thiết lập màu sắc cho thẻ p thông qua file main.css

Cấu trúc file thư mục:

index.html
css
----main.css

File main.css nằm trong thư mục css/

p{
    color: #f15c25;
}

Nội dung file index.html




    
    Unitop.vn - Học lập trình web đi làm
    


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem doloribus officia reiciendis sed similique sit sunt suscipit tempore! Eaque, possimus?

Trong đó dòng code

    

giúp liên kết đến file main.css nằm trong thư mục css của dự án.

Tổng kết

Qua bài này tôi chia sẻ đến bạn 3 cách thêm css vào tài liệu html. Tùy vào từng trường hợp cụ thể bạn có thể lựa chọn cách thích hợp.

Nếu website chỉ có một page bạn có thể sử dụng internal css là đủ. Nhưng nếu dự án có hệ thống file lớn thì bạn nên sử dụng cách external css.