Để tạo kiểu và định dạng trang web hoặc tài liệu HTML của bạn, việc nhúng CSS vào HTML là một bước quan trọng. Cùng theo dõi bài viết này để tìm hiểu cách thực hiện nhúng CSS vào HTML một cách chi tiết.
CSS là gì? Lợi ích khi sử dụng CSS?
Trước khi đi vào chi tiết về cách nhúng CSS vào HTML, hãy hiểu rõ về khái niệm CSS và những lợi ích mà nó mang lại.
CSS là viết tắt của Cascading Style Sheets, tức là một ngôn ngữ định kiểu. CSS có khả năng áp dụng các quy tắc định dạng lên các phần tử HTML và có thể bị ghi đè hoặc kết hợp với các quy tắc CSS khác.
Lợi ích của việc sử dụng CSS bao gồm:
- Cho phép bạn xác định kiểu hiển thị cho các phần tử HTML.
- Phân tách giữa nội dung và kiểu trình bày trang.
- Loại bỏ các định dạng khỏi văn bản HTML và lưu trữ chúng trong một tệp CSS riêng.
Để nhúng CSS vào HTML, bạn có thể thực hiện theo 2 cách:
- Inline Styles: Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ
style. - External Styles: Tạo một tệp .css riêng và nhúng vào tài liệu HTML thông qua cặp thẻ
link.
Hướng dẫn nhúng CSS vào HTML với Inline Styles
Bạn nên sử dụng nhúng CSS với Inline Styles trong những trường hợp sau:
- Khi bạn chỉ muốn áp dụng một vài quy tắc CSS ngắn.
- Khi trình duyệt không cần thời gian để tải tệp CSS.
Để sử dụng Inline Styles, bạn chỉ cần thêm cặp thẻ style vào bất kỳ vị trí nào trên trang web của bạn (thường là trong cặp thẻ head) như sau:
Cách nhúng CSS vào HTML với External Styles
Bước 1: Đầu tiên, bạn cần tạo một tệp .css với tên bất kỳ (có thể tạo bằng các trình soạn thảo văn bản).
Bước 2: Sao chép mã dưới đây và dán nó vào tệp HTML của bạn:
Trong đó, thuộc tính rel khai báo loại tệp nhúng và href là đường dẫn đến tệp .css cần nhúng vào.
Hướng dẫn nhúng tệp tin CSS vào bên trong một tệp tin CSS
Ngoài hai cách nhúng CSS vào HTML mà chúng tôi đã chia sẻ ở trên, nếu bạn có nhiều tệp tin nhưng chỉ muốn thêm một tệp tin CSS vào trang web, bạn có thể sử dụng từ khóa @import. Tuy nhiên, nhớ đặt từ khóa @import ở đầu tệp tin .css.
Lời kết
Để nhúng CSS vào HTML thực sự đơn giản, bạn chỉ cần làm theo hướng dẫn trong bài viết này. Đây là những đoạn mã quan trọng mà bạn nên quan tâm để giúp quá trình xây dựng và thiết lập trang web trở nên dễ dàng và nhanh chóng hơn.
Công ty TNHH Phần Mềm Nhân Hòa là một đơn vị chuyên cung cấp giải pháp hosting và phát triển web chuyên nghiệp. Hãy ghé thăm trang web của chúng tôi để biết thêm thông tin chi tiết.