Học CSS bằng cách cải thiện website Góc học web đã xây dựng trong giáo trình HTML 16 bài. Bạn cần biết heading, liên kết, ảnh, form và cấu trúc tài liệu HTML trước khi bắt đầu.

Mỗi bài giải quyết một tình huống, có mã HTML/CSS, bản chạy trước/sau, lỗi thường gặp và phần tự kiểm tra. Không học thuộc danh sách thuộc tính; hãy thay đổi, quan sát và giải thích kết quả.

Tải trọn bộ mã 20 bài và website hoàn chỉnh · Xem website hoàn chỉnh

Bắt đầu và hiểu quy tắc

1. CSS cơ bản – Bài 01: Kết nối CSS với HTML và sửa quy tắc đầu tiên
2. CSS cơ bản – Bài 02: Selector và class: chọn đúng phần tử cần sửa
3. CSS cơ bản – Bài 03: Vì sao CSS không có tác dụng? Cascade và specificity
4. CSS cơ bản – Bài 04: Box model: vì sao phần tử rộng hơn kích thước đã đặt?
5. CSS cơ bản – Bài 05: Đơn vị và kích thước: px, rem, %, min và max

Trình bày nội dung và kiểm soát hộp

6. CSS cơ bản – Bài 06: Typography và font tiếng Việt dễ đọc
7. CSS cơ bản – Bài 07: Màu sắc, nền và đường viền có mục đích
8. CSS cơ bản – Bài 08: Normal flow, display, ẩn nội dung và overflow
9. CSS cơ bản – Bài 09: Ảnh và card: tỷ lệ, object-fit và kích thước nội tại
10. CSS cơ bản – Bài 10: Position và z-index: đặt đúng chỗ, hiểu lớp chồng

Bố cục và responsive

11. CSS cơ bản – Bài 11: Flexbox: trục chính, trục chéo và căn chỉnh
12. CSS cơ bản – Bài 12: Dùng Flexbox tạo header, menu và nhóm nút
13. CSS cơ bản – Bài 13: CSS Grid: hàng, cột và khoảng cách
14. CSS cơ bản – Bài 14: Grid linh hoạt: auto-fit, minmax và sidebar
15. CSS cơ bản – Bài 15: Responsive theo hướng mobile-first
16. CSS cơ bản – Bài 16: Hoàn thiện menu, bảng và ảnh trên màn hình nhỏ

Trạng thái, tổ chức và hoàn thiện

17. CSS cơ bản – Bài 17: Tạo kiểu form, hover, focus và trạng thái lỗi
18. CSS cơ bản – Bài 18: Biến CSS và tổ chức stylesheet dễ sửa
19. CSS cơ bản – Bài 19: Transition và animation vừa đủ, có giảm chuyển động
20. CSS cơ bản – Bài 20: Hoàn thiện website và sửa lỗi bằng DevTools

Cách sử dụng mã mẫu

Mở before.html rồi index.html trong cùng thư mục bài. HTML của hai bản giống nhau; CSS trước và sau khác nhau để thấy đúng tác dụng của quy tắc. Các bài đầu cố ý chưa xử lý hết bố cục và ảnh lớn. Thư mục website-hoan-chinh là bản đã hợp nhất cho ba trang.

Không cần cài npm, framework hoặc font ngoài. Form là ví dụ tĩnh dùng dữ liệu giả, không lưu hay gửi email. Bài 6 minh họa cách khai báo font; bộ tải về không kèm font bên ngoài.

Kết quả sau lộ trình

Bạn có thể tạo kiểu cho website nhiều trang, dùng Flexbox và Grid, xử lý màn hình nhỏ, kiểm tra focus bằng bàn phím và dùng DevTools tìm nguyên nhân khi CSS không hoạt động. Sau nền tảng HTML/CSS, có thể học JavaScript để thêm hành vi.