Hướng dẫn nhanh 3 cách nhúng CSS vào HTML

Hướng dẫn chi tiết nhúng CSS vào HTML

Để minh họa, dưới đây là một đoạn mã CSS ví dụ có nội dung như sau (tạm thời bạn chưa cần hiểu về cú pháp):

Đoạn mã này sẽ định dạng chữ màu trắng và nền màu đỏ. Để áp dụng mã CSS này cho các phần tử HTML, có ba cách nhúng CSS vào HTML là Inline, Internal và External.

• Cách nhúng Inline: bạn có thể viết mã CSS trực tiếp trong thuộc tính style của phần tử HTML.
• Cách nhúng Internal: mã CSS được đặt trong cùng văn bản HTML, bên trong thẻ style.
• Cách nhúng External: mã CSS được lưu trong một file riêng biệt (thường có phần mở rộng là .css), sau đó được nạp vào tài liệu HTML bằng phần tử link.

Điều này cho phép bạn chèn CSS vào HTML trực tiếp trong văn bản HTML sử dụng kiểu nhúng Inline và Internal.

Inline CSS - nhúng CSS vào HTML

Một cách để nhúng CSS dạng inline là bằng cách đặt mã CSS trực tiếp vào thuộc tính style của phần tử. Điều này chỉ ảnh hưởng đến phần tử đó. Ví dụ, dưới đây là một ví dụ về việc áp dụng mã CSS dạng inline cho phần tử p trong HTML:

Kết quả là phần tử p sẽ có màu chữ trắng và nền màu đỏ. Bạn có thể thử thay đổi các giá trị màu khác như blue, green, navy, orange để kiểm tra.

Internal CSS - nhúng CSS vào HTML

Một cách để nhúng CSS dạng Internal là sử dụng thẻ style để tạo ra một khu vực để viết mã CSS trong tài liệu HTML. Thường thì style được đặt trong thẻ head. Dưới đây là một ví dụ, trong khối style, nó định nghĩa kiểu cho tất cả các phần tử p trong tài liệu, sẽ có màu chữ trắng và nền màu đỏ.

Kết quả là các phần tử p sẽ có màu chữ trắng và nền màu đỏ. Bạn có thể thử thay đổi các giá trị màu khác như blue, green, navy, orange để kiểm tra.

External CSS - nhúng CSS vào HTML

Một cách để nhúng CSS dạng External là sử dụng thẻ link để nạp file CSS vào tài liệu HTML. Bạn có thể viết mã CSS trong các file độc lập (thường có phần mở rộng .css) và sử dụng thẻ link trong phần head để liên kết nó với HTML. Ví dụ, để liên kết với một file ngoài có tên là demo.css, bạn có thể sử dụng cú pháp sau:

Trong file demo.css, bạn có thể viết mã CSS (không cần thẻ style), ví dụ:

Kết quả sẽ tương tự như ví dụ trên, chỉ khác là mã CSS đã được tách riêng khỏi văn bản HTML và được viết trong một file độc lập. Thuộc tính href trong thẻ link chỉ định địa chỉ URL của file CSS. Trong ví dụ trên, địa chỉ được sử dụng là địa chỉ tương đối vì file CSS và HTML nằm trong cùng thư mục (xem thêm về cách chỉ định đường dẫn tới file, URL).

Ngoài ra, bạn cũng có thể tích hợp các định nghĩa CSS đã được cung cấp bởi Framework Bootstrap. Ví dụ, để tích hợp các định nghĩa CSS của Bootstrap từ đường dẫn: https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css, bạn có thể sử dụng thẻ link như sau:

Sau khi tích hợp, bạn có thể sử dụng các lớp CSS như display-1, text-success ngay trong tài liệu HTML.

Xem thêm các bài viết hướng dẫn khác:

• 3 cách nhúng Javascript vào HTML nhanh nhất
• Mã hóa md5 là gì - Hàm mã hóa md5 trong PHP
• Hướng dẫn cài đặt SQL Server 2019 mới nhất

Như vậy bài viết trên của Topchuyengia đã hướng dẫn cho bạn cách nhúng CSS vào HTML mà bạn có thể áp dụng. Nếu tham khảo nhưng vẫn chưa thực hiện được, hãy liên hệ để được các chuyên gia CNTT tư vấn nhanh chóng nhất.