Cách để chèn CSS
Có ba cách để chèn những đoạn CSS:
- External (liên kết với file bên ngoài thông qua thẻ <link>)
- Internal (viết những đoạn CSS bên trong thẻ <style> của trang HTML)
- Inline (viết trực tiếp CSS cho từng thẻ HTML thông qua thuộc tính style của thẻ)
External CSS
Với cách thêm CSS bằng external, bạn có thể thay đổi cái nhìn của toàn bộ trang web bằng cách thay đổi chỉ một file!
Mỗi trang HTML phải liên kết với file CSS bên ngoài bằng thẻ <link> được đặt trong phần <head> của trang.
Ví dụ
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
External file phải được lưu với phần mở rộng (.css).
External .css file không nên chứa bất kỳ thẻ HTML nào.
Đây là nội dung của file "mystyle.css" được liên kết ở đoạn code bên trên:
"mystyle.css"
body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; }Chú ý: Không thêm khoảng trắng giữa giá trị thuộc tính và đơn vị:
Đúng: margin-left: 20 px;
Sai: margin-left: 20px;
Internal CSS
Thêm CSS bằng internal chỉ được dùng khi trang web chỉ có một style duy nhất.
Internal style được viết ở thẻ <style> nằm ở phần head của trang HTML.
Ví dụ
<!DOCTYPE html> <html> <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>Inline CSS
Chỉ nên dùng inline CSS khi một thẻ chỉ có một style duy nhất.
Để sử dụng inline CSS, ta viết nội dung CSS vào thuộc tính style của thẻ. Thuộc tính style có thể chứa bất kỳ thuộc tính CSS nào.
Ví dụ
<!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body> </html>Tip: Hạn chế sử dụng inline CSS vì tốn thời gian cho việc chỉnh sửa và phát triển trang web sau này.
Style nhiều lần trong CSS
Với cùng một selector, ta thực hiện css một thuộc tính với nhiều giá trị khác nhau trong nhiều lần, thì chỉ lần thực hiện css cuối cùng được thực thi.
Giả sử ta có một đoạn code css thực hiện style thuộc tính color với giá trị "navy"cho thẻ <h1> như bên dưới:
h1 { color: navy; }
Sau đó, ta cũng có một đoạn code css thực hiện style thuộc tính color cho thẻ <h1> nhưng với giá trị là "orange" :
h1 { color: orange; }
Ví dụ
Nếu style theo kiểu internal được viết sau thẻ <link> dùng cho việc external , thẻ <h1> sẽ có màu chữ là "orange":
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> h1 { color: orange; } </style> </head>
Ví dụ
Ngược lại, thẻ <h1> sẽ có màu chữ là "navy":
<head> <style> h1 { color: orange; } </style> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>Thứ tự ưu tiên
Điều gì sẽ xảy ra khi chúng ta thực hiện style một thẻ HTML bằng nhiều cách?
Dưới đây là thứ tự ưu tiên của những cách css, giảm dần từ trên xuống:
- Inline style (bên trong thẻ HTML)
- External and internal style (trong phần head của trang)
- Browser default
Vậy, cách inline style có mức độ ưu tiên cao nhất, nó sẽ ghi đè những cách style còn lại.