Giới thiệu loạt bài

CSS quyết định giao diện của mọi trang web. Loạt bài đi từ cú pháp, bộ chọn, mô hình hộp đến Flexbox, Grid, responsive, hiệu ứng, animation và CSS hiện đại (biến, nesting, :has, container query). Mỗi bài có ví dụ chạy trực tiếp ngay dưới đoạn mã để bạn thấy kết quả.

22 bài, khoảng 18 giờCơ bản đến nâng cao
Bạn sẽ học được
  • Viết CSS đúng chuẩn, hiểu cascade và độ ưu tiên
  • Dựng bố cục bằng Flexbox, Grid, thiết kế responsive
  • Tạo hiệu ứng, chuyển động mượt và giao diện chế độ tối
  • Tự xây thành phần giao diện và một landing page hoàn chỉnh

Dành cho ai?

  • Người đã học HTML cơ bản (loạt HTML).
  • Sinh viên học Thiết kế Web, Lập trình ứng dụng Web.
  • Người muốn hiểu sâu CSS trước khi dùng Bootstrap, Tailwind.

Cần chuẩn bị gì?

  • VS Code, trình duyệt Chrome/Edge/Firefox bản mới.
  • Kiến thức HTML: thẻ, thuộc tính, class, id.

Lộ trình gợi ý

Giai đoạnBàiKết quả
Nền tảng1–9Định dạng chữ, màu, hộp, bảng
Bố cục10–15Dựng mọi bố cục, responsive
Nâng cao16–21Hiệu ứng, animation, thành phần
Dự án22Landing page hoàn chỉnh

Nội dung loạt bài

Bài 1. CSS là gì?Cú pháp, 3 cách chèn CSSBài 2. Bộ chọnClass, id, kết hợp, thuộc tínhBài 3. Pseudo-class, pseudo-element:hover, :nth-child, ::before, :hasBài 4. Cascade và độ ưu tiênSpecificity, kế thừa, @layerBài 5. Đơn vị và giá trịrem, %, vw, calc, clampBài 6. Màu sắc, nền, gradientHSL, OKLCH, ảnh nềnBài 7. Mô hình hộpmargin, padding, border-boxBài 8. Văn bản và fontGoogle Fonts tiếng Việt, iconBài 9. Liên kết, danh sách, bảngMenu ngang, bảng đẹpBài 10. Display và overflowblock, inline, ẩn phần tửBài 11. Position, z-indexabsolute, sticky, fixedBài 12. Căn giữa mọi thứmargin auto, flex, gridBài 13. FlexboxTrục, co giãn, mẫu bố cụcBài 14. CSS Gridfr, areas, auto-fitBài 15. ResponsiveMedia query, container queryBài 16. Hình ảnhobject-fit, filter, galleryBài 17. Bóng đổ và hiệu ứngshadow, kính mờ, chữ gradientBài 18. Transform, transitionVi tương tác, lật thẻ 3DBài 19. Animation@keyframes, theo thanh cuộnBài 20. Biến và CSS hiện đạiChế độ tối, nesting, color-mixBài 21. Thành phần giao diệnNút, menu, tooltip, formBài 22. Dự án landing pageBEM, tổ chức mã, kiểm tra

Cách học hiệu quả

  • Sửa trực tiếp các giá trị trong ví dụ bằng DevTools (F12) để thấy thay đổi.
  • Gõ lại ví dụ vào tệp của bạn, không sao chép.
  • Thu nhỏ cửa sổ trình duyệt ở các bài bố cục để quan sát responsive.
  • Chơi Flexbox Froggy và Grid Garden sau bài 13, 14.
Mẹo hay

Học xong loạt này, chuyển sang Bootstrap 5 (làm nhanh giao diện theo thành phần) hoặc Tailwind CSS (thiết kế bằng lớp tiện ích); cả hai đều dễ hơn nhiều khi bạn đã hiểu CSS.

Tóm tắt
  • 22 bài từ cơ bản đến dự án.
  • Ví dụ chạy trực tiếp trong bài.
  • Bước tiếp: Bootstrap 5, Tailwind CSS, JavaScript.