Có ba cách để thêm CSS vào một trang web
- Inline CSS
- Internal CSS
- External CSS
1. Inline CSS
Inline CSS được sử dụng để tạo kiểu cho duy nhất một phần tử
Để sử dụng cách này, ta thêm thuộc tính style vào phần tử muốn tạo kiểu. Thuộc tính style có thể chứa bất kỳ thuộc tính CSS nào
Ví dụ:
Lưu ý: bạn nên hạn chế sử dụng phương pháp này vì nếu chỉ sử dụng Inline CSS thì việc quản lý website sẽ rất khó. Inline CSS cần phải được áp dụng cho mỗi phần tử
2. Internal CSS
Internal CSS được dùng để tạo kiểu cho một trang
Thuộc tính CSS sẽ được nằm trong phần tử <style> bên trong phần tử <head>
Ví dụ:
Ở đây, tôi xác định màu chữ của phần tử <p> là màu xanh còn của tiêu đề <h1> là màu đỏ
3. External CSS
External CSS giúp bạn thay đổi giao diện của toàn bộ trang web bằng cách thay đổi một têp
Để làm được điều này bạn phải tham chiếu đến một tệp định dạng bên ngoài thông qua phần tử <link> bên trong phần tử <head>
Ví dụ:
Lưu ý: một têp định dạng bên ngoài có thể được viết trong bất kỳ trình soạn thảo văn bản nào và phải được lưu bằng phần mở rộng .css. Tệp .css bên ngoài không được chứa bất kỳ thẻ HTML nào
4. Thứ tự ưu tiên khi thêm CSS
Sẽ ra sao nếu ta sử dụng nhiều cách chỉ định CSS trên một phần tử?
Tất cả các kiểu đó sẽ sắp xếp theo chế độ ưu tiên như sau:
- Inline CSS (vì nằm bên trong phần tử)
- Internal CSS (vì nằm trong <head>)
- External CSS (vì nằm bên ngoài tài liệu)
Ví dụ:
Ở đây, tôi sử dụng cả ba cách thêm CSS nhưng nội dung bên trong trang chỉ áp dụng kiểu của cách thêm inline CSS vì nó có độ ưu tiên cao nhất
