CSS (Cascading Style Sheets) là ngôn ngữ stylesheet mô tả trình bày (presentation) của tài liệu HTML/XML: màu sắc, font, khoảng cách, layout, responsive, animation...
Tại sao dùng CSS?
| Không có CSS (HTML only) | Có CSS |
|---|---|
Style lặp lại trên mỗi tag (<font>, bgcolor) | Một rule áp dụng cho nhiều element (selector) |
| Cấu trúc & trình bày lẫn lộn → khó bảo trì | Tách biệt: HTML = cấu trúc, CSS = giao diện |
| Thay đổi giao diện phải sửa mọi trang | Sửa 1 file CSS → cập nhật toàn site |
| Không responsive, không media query | Media queries, Flexbox, Grid thích ứng màn hình |
| Dùng table layout → semantic kém, accessibility thấp | Semantic HTML + CSS layout hiện đại |
Lợi ích cốt lõi
- Separation of Concerns: HTML semantic, CSS presentational.
- Reusability: Class/ID dùng lại nhiều nơi.
- Maintainability: Tập trung style, dễ refactor.
- Performance: CSS cache riêng, browser optimize paint.
- Accessibility: Screen reader đọc HTML, không bị nhiễu style.
- Responsive: Một codebase, mọi màn hình.
CSS dễ học, mạnh mẽ
Cú pháp đơn giản (selector { prop: val; }), nhưng kết hợp selector, cascade, inheritance, box model, formatting context, layout module... tạo ra sức mạnh lớn. Kết hợp phổ biến nhất: HTML + CSS (hoặc XHTML/XML + CSS).