Inline styles
CSS hỗ trợ inline styles (styles nội dòng), embedded (hay internal) styles (styles nhúng) và external styles
(styles bên ngoài). Với styles nội dòng, bạn thêm một style vào tag mở cho một phần tử, như đề mục hay đoạn
văn, sử dụng thuộc tính style. Style thay đổi nội dung được đánh dấu bởi một cặp tag cụ thể, nhưng không
ảnh hưởng tới nội dung khác trong tài liệu. Vì inline styles được ưu tiên so với các dạng styles khác và ảnh
hưởng đến style của đoạn nội dung riêng rẽ, chúng là hữu dụng khi bạn cần định dạng chỉ một khu vực của trang
web. Tuy nhiên, inline styles không giúp cho mục đích và lợi thế của việc chia tách style khỏi nội dung, nên
chúng hiếm khi được sử dụng. Ví dụ:
<h1 style=”font-color:navy”>Special Note</h1>
Trong ví dụ, quy tắc style chỉ áp dụng cho nội dung trong phần tử h1, text “Special Note”. Trong tag h1 mở, bạn
bắt đầu viết một inline style sử dụng thuộc tính style. Inline style được thể hiện trong ví dụ định nghĩa màu
font của text “Special Note”. như navy blue.
Embedded style sheets
Embedded style sheets (style sheets nhúng), cũng được gọi là internal style sheet, bao gồm style sheet bên
trong thẻ <head> mở và thẻ </head> đóng của tài liệu HTML. Sử dụng style sheet nhúng khi bạn muốn tạo styles
cho một trang web đơn cái khác với phần còn lại của website. Style sheet nhúng được ưu tiên hơn so với style
sheet bên ngoài. Ví dụ:
<head>
<title>My Website</title>
<style>
body{
background-color:green
}
</style>
</head>
Trong style sheet nhúng, bạn đặt các quy tắc style giữa tag <style> mở và tag </style> đóng. Quy tắc style trong
ví dụ thiết lập màu nền cho khu vực body (thân) thành green chỉ cho trang web hiện tại.
External style sheets
Một external style sheet (style sheet bên ngoài), cũng được gọi là một linked style sheet là một file CSS cái chứa
tất cả các styles bạn muốn áp dụng cho nhiều hơn một trang web trong một website. Một style sheet bên ngoài là một
text file với mở rộng file .css. Để áp dụng một external style sheet, bạn liên kết nó (hay gắn nó) vào một trang
web sử dụng một link tag trong thẻ <head> của trang web. Ví dụ:
<head>
<link rel=”stylesheet” href=”stylesheet.css” type=”text/css”>
</head>
External style sheets cung cấp cho bạn sự linh động nhất để nhanh chóng thay đổi định dạng trang web vì các styles
trong một style sheet bên ngoài được áp dụng cho mọi trang web cái liên kết với style sheet đó. Sau đây là một ví dụ
về quy tắc style cho một style sheet bên ngoài:
CSS viết
body{
background-color:green
}
Cái này thiết lập màu nền của khu vực body thành green.