CSS chính là công cụ làm việc chính của Frontend Developer và là ngôn ngữ giúp hiện thực hóa các bản thiết kế của Designer/PD.

Dưới đây là bức tranh toàn cảnh về CSS:

1. CSS là gì?

CSS viết tắt của Cascading Style Sheets (Danh sách các định kiểu xếp chồng).

  • Bản chất: CSS không phải là ngôn ngữ lập trình, nó là một ngôn ngữ định kiểu.

  • Nhiệm vụ: Nếu HTML là "khung xương" (quy định đâu là tiêu đề, đâu là đoạn văn), thì CSS là "da thịt, quần áo" (quy định màu sắc, kích thước, vị trí).

2. Sức mạnh của CSS: Làm được những gì?

CSS kiểm soát mọi khía cạnh thị giác của một trang web:

  • Bố cục (Layout): Sắp xếp các thành phần nằm ngang, dọc, hoặc chồng lên nhau (thông qua Flexbox, Grid).

  • Màu sắc & Phông chữ: Thay đổi màu nền, màu chữ, kiểu chữ, cỡ chữ.

  • Hiệu ứng (Effects): Tạo đổ bóng, bo góc tròn, làm mờ, hoặc độ trong suốt.

  • Chuyển động (Animations): Tạo ra các hiệu ứng di chuyển, phóng to thu nhỏ khi di chuột vào (hover) hoặc khi tải trang.

  • Độ tương thích (Responsive): Giúp trang web tự co giãn để trông đẹp mắt trên cả Mobile, Tablet và PC (nhóm nền tảng chúng ta vừa nhắc đến).

3. Tại sao gọi là "Cascading" (Xếp chồng)?

Đây là đặc tính quan trọng nhất của CSS. Nó có nghĩa là các quy tắc định kiểu sẽ được ưu tiên theo thứ tự:

  1. Thứ tự ưu tiên (Specificity): Quy tắc nào càng chi tiết thì càng được ưu tiên.

  2. Thứ tự xuất hiện: Nếu hai quy tắc có cùng độ ưu tiên, quy tắc nào nằm ở dưới (viết sau) sẽ thắng.

  3. Thừa kế (Inheritance): Một số thuộc tính (như màu chữ) của "cha" sẽ tự động được truyền xuống cho các thành phần "con" bên trong.

4. Các công cụ hỗ trợ CSS hiện đại

Trong các dự án thực tế, thay vì viết CSS thuần (Native CSS), các Dev thường dùng các công cụ giúp viết nhanh và gọn hơn:

  • SASS / SCSS: Cho phép viết CSS có biến, có cấu trúc lồng nhau (như ngôn ngữ lập trình).

  • Tailwind CSS: Một cách viết CSS cực nhanh bằng cách gắn các lớp (class) có sẵn vào HTML.

  • Bootstrap: Một "thư viện" có sẵn các nút bấm, menu, bạn chỉ cần lấy ra dùng mà không cần thiết kế lại từ đầu.

5. Ví dụ đơn giản

Hãy xem cách CSS thay đổi một đoạn mã HTML:

HTML:

HTML
<h1 class="tieude">Chào bạn!</h1>

CSS:

CSS
.tieude {
  color: blue;        /* Chữ màu xanh */
  font-size: 24px;    /* Cỡ chữ 24 pixel */
  text-align: center; /* Căn giữa màn hình */
  font-weight: bold;  /* In đậm */
}

6. Vai trò của CSS trong mối quan hệ với các vị trí khác

  • Với Designer: CSS là công cụ để Dev tôn trọng bản vẽ của Designer đến từng pixel.

  • Với Tech Lead: Tech Lead sẽ quy định cách tổ chức file CSS sao cho sạch sẽ, dễ quản lý, tránh việc code chồng chéo gây lỗi giao diện.

  • Với QA/QC: QC sẽ kiểm tra xem CSS có bị vỡ trên trình duyệt Safari của Mac hay Chrome của PC không.