Làm thế nào để thêm tệp CSS trong HTML?

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. 

Cách tham chiếu tệp CSS trong HTML
Cách tham chiếu tệp CSS trong HTML

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:

Ví dụ với External CSS
Ví dụ với External CSS

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. 

File styles.css
File styles.css

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ụ với Internal CSS
Ví dụ với Internal CSS

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. 

Ví dụ với Inline CSS
Ví dụ với Inline CSS

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é. 

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

https://d1iv5z3ivlqga1.cloudfront.net/wp-content/uploads/2021/04/29235048/1_QAG9RXQyyMAY7i9OYo84FA.png
Got It Vietnam
February 06, 2021
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
CSS là gì? Kinh nghiệm giúp bạn tự học CSS tại nhà không nên bỏ qua!

CSS là gì? Kinh nghiệm giúp bạn tự học CSS tại nhà không nên bỏ qua!

Tự học CSS là một quy trình không có điểm dừng, vì thế những người mới bắt đầu sẽ dễ bị rối trong thư viện kiến thức về CSS. Vậy tự học CSS nên bắt đầu với những điều gì? Cùng tìm hiểu nhé! Mục lụcCSS là gì?Bạn nên chuẩn bị gì trước khi tự […]
Những code HTML cơ bản nhất

Những code HTML cơ bản nhất

Loại code HTML cơ bản dễ học nhất hiện nay là gì? Những người lập trình viên mới vào nghề thường khá lúng túng không biết nên bắt đầu học từ đâu và học gì dễ hiểu dễ thực hành nhất. Bài viết này sẽ chia sẻ đến bạn những thẻ HTML đơn giản và […]
Ngôn ngữ HTML là gì? Tìm hiểu cấu trúc HTML

Ngôn ngữ HTML là gì? Tìm hiểu cấu trúc HTML

Cấu trúc HTML mạch lạc, khoa học giúp cho website hoạt động ổn định. Hiện nay, mỗi website đều được xây dựng với những cấu trúc khác nhau. Vậy khi phát triển website, lập trình viên nên xây dựng cấu trúc ngôn ngữ web HTML như thế nào? Got It sẽ chia sẻ những thông […]
Giới thiệu về HTML – ngôn ngữ web phổ biến nhất hiện nay

Giới thiệu về HTML – ngôn ngữ web phổ biến nhất hiện nay

Những thông tin giới thiệu về HTML sẽ giúp những người mới học lập trình trau dồi kiến thức cơ bản. Hiện nay có rất nhiều loại ngôn ngữ web mới với những ưu điểm nổi bật, nhưng HTML vẫn là loại ngôn ngữ được nhiều lập trình viên ưu tiên sử dụng. Cùng tìm […]
Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style

Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style

Style trong HTML là một thuộc tính đặc biệt dùng để khai báo các định dạng cho thẻ HTML như màu sắc, font chữ, cỡ chữ, màu nền,… Bài viết này sẽ chia sẻ những kiến thức cơ bản về thẻ style và một số thuộc tính của thẻ này.    Mục lục1. Thẻ style trong […]
Stylesheet là gì? Chức năng và lợi ích của Stylesheet

Stylesheet là gì? Chức năng và lợi ích của Stylesheet

Trước đây, khi mỗi trang web được hiển thị, người ta không thể thay đổi bất cứ thứ gì trên đó. Bài viết này sẽ chia sẻ kiến thức Stylesheet là gì và khả năng hỗ trợ của nó trong HTML động nhằm thực hiện những thay đổi trên trang. Mục lục1. Khái niệm Stylesheet […]