[Học CSS] Bài 04: Nhúng CSS vào HTML

Để CSS có thể áp dụng trên website hoặc tài liệu HTML  thì chúng ta phải nhúng nó vào. Có 02 cách nhúng như sau:

  • Inline Styles – Nhúng trực tiếp vào tài liệu HTML. Nội dung CSS đặt trong cặp thẻ <style> </style>.
  • 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ẻ <link>.

Tùy trường hợp mà chúng ts sẽ xem xét và sử dụng cho phù hợp. Ví dụ CSS ngắn và đơn giản thì chúng ta dùng cách 1, nếu nó phức tạp và dài thì tốt nhất nên tạo một file CSS riêng và nhúng theo cách 2. Đây là những ưu nhược điểm của 02 cách này:

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.

trong serie này chúng ta sẽ sử dụng kiểu Inline Styles để nhúng CSS để các bạn dễ hình dung, vì CSS ví dụ nên nó ngắn và đơn giản thôi. Kiểu External Styles các bạn tự tìm hiểu sau nhé !

Nhúng CSS kiểu Inline Styles

Để nhúng CSS vào website thông qua kiểu Inline Styles, bạn sẽ khai báo cặp thẻ <style> vào vị trí bất kỳ của website (tốt nhất là bên trong cặp thẻ <head>) như sau.

Để hình dung bạn tham khảo ví dụ sau đây:

Các bạn copy và dán vào Codepen để xem nó như thế nào nhé ! Bài này nội dung như vậy thôi, bắt đầu từ bây giờ các bạn đã có thể tự tạo cho mình một văn bản HTML có định dạng CSS rồi. Còn để thực hiện nhiều tùy chỉnh hơn chúng ta sẽ tiếp tục với những bài tiếp theo.

Bài học trước đó và tiếp theo

[Học CSS] Bài 04: Nhúng CSS vào HTML
5 (100%) 1 vote
Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Viết bình luận theo mẫu

(Các mục bắt buộc được đánh dấu * )