CSS và HTML vốn là 2 ngôn ngữ hoàn toàn độc lập. Thêm tệp CSS trong HTML chính là cách tốt nhất để tạo nên sự giao tiếp giữa chúng. Trong bài viết dưới đây, bạn sẽ biết được những cách thức thường được sử dụng để kết nối một tệp CSS với HTML.
Mục lục
Lợi ích của việc thêm tệp CSS trong HTML
CSS thường được sử dụng với các ngôn ngữ đánh dấu như HTML. Nó cho phép lập trình viên tạo kiểu cho từng phần tử HTML và tạo nên một giao diện ưa nhìn, hấp dẫn cho tổng thể website. Việc kết nối một tệp CSS với HTML sẽ:
- Tối ưu thời gian hiệu quả: Bạn chỉ cần tạo duy nhất một tệp CSS để tạo kiểu cạc cho tất cả tệp HTML.
- Tăng tốc độ tải trang: Site sẽ lưu lại tệp CSS vào bộ nhớ đệm cho lần truy cập tiếp theo của người dùng.
- Cải thiện SEO: Nhờ việc lưu trữ các kiểu CSS trong một tệp khác mà tệp HTML sẽ ngắn gọn, súc tích hơn, đồng thời các công cụ tìm kiếm cũng dễ đọc hơn.
3 cách nhúng CSS vào HTML
Để thêm CSS vào tài liệu HTML, bạn có thể áp dụng 3 phương pháp dưới đây:
External CSS
Đây là cách phổ biến nhất để thêm tệp CSS trong HTML. Bằng việc sử dụng một file có tên gồm phần đuôi .css ở bên ngoài (ví dụ styles.css), bạn có thể thêm CSS style cho trang web. Nhờ thế, giao diện của toàn bộ website có thể được thay đổi thông qua sự thay đổi của một tệp.
Ưu điểm của cách thức này là tạo nên một trang HTML nhỏ gọn về kích thước và cấu trúc, một file mystyle.css có thể dùng chung cho nhiều trang, đẩy nhanh tốc độ tải trang,… Vì vậy, External CSS phù hợp với những trang web lớn.
Để sử dụng style sheet External, bạn thêm một đường dẫn đến nó trong mục <head> của mỗi trang HTML:
Style sheet External thân thiện với mọi trình soạn thảo văn bản. Chỉ cần tệp không chứa bất kỳ mã HTML nào, và được lưu dưới tên có phần đuôi là .css là bạn có thể thêm CSS cho trang HTML với External.
Internal CSS
Ta ứng dụng phương pháp này khi muốn xác định kiểu cách cho một trang HTML. Internal CSS sẽ được định nghĩa trong mục <head> của mỗi trang HTML, cụ thể là trong phần tử <style>.
Ví dụ trên cho thấy, màu văn bản của tất cả phần tử <h1> đề là xanh lam, còn toàn bộ phần tử <p> đều có màu văn bản là màu đỏ. Thêm vào đó, toàn bộ trang sẽ được hiển thị với màu nền là màu xanh thủy tinh (xanh lơ).
Với Internal, bạn có thể sử dụng các bộ chọn class và id trong style sheet này. Tuy nhiên, Internal CSS có thể làm cho kích thước và thời gian tải trang bị tăng lên.
Inline CSS
Khi bạn muốn mỗi phần tử HTML chỉ có một kiểu cách duy nhất thì hãy áp dụng Inline CSS. Phương pháp này sử dụng thuộc tính style của một phần tử HTML.
Trong ví dụ trên, phần tử <h1> của trang HTML có màu văn bản được đặt màu xanh lam, phần tử <p> có màu văn bản được đặt là màu đỏ.
Phương pháp này sẽ rất hữu ích nếu bạn không có quyền truy cập vào một tệp CSS, hoặc nếu bạn chỉ muốn áp dụng một kiểu cách cho một phần tử duy nhất. Tuy nhiên Inline CSS không được ưa chuộng phổ biến bằng 2 cách trên. Lý do là bởi nó khiến việc quản lý website trở nên cồng kềnh, khó khăn hơn.
Mặc dù có nhiều cách để liên kết một tệp CSS đến HTML, nhưng sử dụng External vẫn là phương pháp hiệu quả và được ưa chuộng rộng rãi nhất. Bạn hãy căn cứ vào nhu cầu thiết kế website để lựa chọn cách thêm CSS trong HTML phù hợp với mình nhé.
