Có 4 cách khác nhau để nhúng CSS vào trong tài liệu HTML và hai cách được sử dụng phổ biến nhất đó là Inline CSS và External CSS.
Cách này đơn giản và nên chỉ áp dụng với những ứng dụng webpage nhỏ. Bạn có thể nhúng CSS vào trong tài liệu HTML của bạn bởi sử dụng phần tử style. Thẻ này được đặt bên trong các thẻ <head>...</head>. Style Rule được định nghĩa trong khu vực này sẽ chỉ tác động đến các phần tử trong nội bộ trang đó. Ví dụ sau minh họa cú pháp sử dụng chung và vị trí nhúng CSS vào trong HTML:
Kết quả là:
Tiếp theo, mình sẽ giải thích các thuộc tính trong CSS đã áp dụng cho thẻ style được sử dụng trong ví dụ trên:
Ở trên, bạn đã nhúng CSS vào trong HTML bởi sử dụng thẻ style, và sử dụng cách này thì style rule sẽ là có sẵn (có sẵn tức là bạn có thể áp dụng cho phần tử nào cũng được) cho tất cả các phần tử trong trang đó. Tiếp theo, mình trình bày cách nhúng CSS trong HTML bởi sử dụng thuộc tính style của các thẻ HTML. Làm theo cách này thì style rule sẽ chỉ được áp dụng cho phần tử đó. Cú pháp chung như sau:
Ví dụ sau minh họa Inline CSS theo cú pháp trên:
Kết quả là:
Vi du ve Inline CSS
Tuy nhiên, sử dụng cách này có thể làm nội dung trình bày của bạn có thể bị xáo trộn, do đó bạn nên ít sử dụng.
Với những ứng dụng Website lớn mà có nhiều page, thì cách tốt nhất là bạn nên sử dụng phần tử <link> để include (hay nhúng) CSS file vào trong tài liệu HTML. Làm theo cách này, bạn chỉ cần sửa đổi một file, thì bạn đã có thể sửa đổi toàn bộ phần Look và Feel cho cả Website.
CSS file này là một text file và có đuôi là .css. Bạn định nghĩa tất cả style rule bên trong file này và sau đó bạn có thể include file vào trong bất kỳ trang HTML nào bởi sử dụng thẻ <link>.
Cú pháp cho thẻ <link> để nhúng CSS vào trong HTML như sau:
Ghi chú:
Giải thích các thuộc tính được sử dụng trong cú pháp trên:
Thuộc tínhGiá trịMiêu tảtypetext/cssThuộc tính type trong CSS này là bắt buộc. Nó báo cho tài liệu HTML của bạn biết rằng bạn đang nhúng CSS vào trong tài liệu HTML.hrefURLThuộc tính href xác định đường link tới css file có chứa style rule mà bạn đã định nghĩa. Thuộc tính này là bắt buộc.mediascreen
tty
tv
projection
handheld
braille
aural
all
Thuộc tính media trong CSS nói cho HTML biết về kiểu thiết bị mà tài liệu này sẽ được hiển thị trên đó. Giá trị mặc định là _all_. Đây là một thuộc tính tùy ý trong CSS.
