CSS Fundamentals

Mở đầu — vì sao bài này quan trọng

Hãy tưởng tượng bạn vừa xây xong một ngôi nhà chỉ với gạch và bê tông: tường đã dựng, phòng đã chia, nhưng chưa sơn, chưa lát gạch, chưa có cửa sổ đẹp. Đó chính là một trang web chỉ có HTML. Nó hoạt động được, nội dung hiển thị đầy đủ, nhưng nhìn vào thì thô ráp, đơn điệu và gần như không ai muốn ở lại quá ba giây.

Ở Bài 1, bạn đã học cách dựng "khung xương" của trang web bằng HTML — các thẻ <h1>, <p>, <div> để xác định nội dung là gì. Nhưng HTML không trả lời được những câu hỏi mà một designer luôn quan tâm: chữ này nên màu gì, to bao nhiêu, cách lề bao nhiêu, đặt ở đâu trên màn hình? Đó chính là lúc CSS bước vào.

CSS — viết tắt của Cascading Style Sheets (Bảng định kiểu phân tầng) — là ngôn ngữ dùng để trang trí và bố trí trang web. Nếu HTML là nội dung, thì CSS là vẻ ngoài. Mọi màu sắc đẹp mắt, mọi khoảng cách thoáng đãng, mọi font chữ tinh tế bạn thấy trên Tiki, Shopee, hay The Coffee House đều đến từ CSS.

Với một người làm Web Design, CSS không phải là "phần của lập trình viên" mà bạn có thể bỏ qua. Đây là cây cọ vẽ của bạn. Bạn có thể có con mắt thẩm mỹ tuyệt vời, nhưng nếu không biết cách diễn đạt ý tưởng đó qua CSS, thiết kế của bạn sẽ mãi nằm trên giấy. Bài học này sẽ cho bạn nền tảng vững chắc để bắt đầu cầm cây cọ ấy.

Khái niệm cốt lõi

CSS hoạt động như thế nào

CSS làm việc theo một nguyên tắc rất đơn giản: chọn một phần tử (element) trên trang, rồi áp dụng kiểu dáng cho nó. Mỗi câu lệnh CSS được gọi là một rule (quy tắc), và có cấu trúc như sau:

selector {
  property: value;
}

Cụ thể hơn, ví dụ:

h1 {
  color: #c0392b;
  font-size: 32px;
}

Hãy đọc đoạn này như một câu tiếng Việt: "Với mọi thẻ <h1>, hãy đặt màu chữ thành đỏ gạch và cỡ chữ thành 32 pixel." Trong đó:

h1 là selector — phần tử bạn muốn nhắm tới.
color và font-size là property (thuộc tính) — đặc điểm bạn muốn thay đổi.
#c0392b và 32px là value (giá trị) — bạn muốn thay đổi thành cái gì.
Cặp property–value gọi là một declaration (khai báo), nằm trong dấu ngoặc nhọn { }, mỗi khai báo kết thúc bằng dấu chấm phẩy ;.

Ba cách gắn CSS vào HTML

Có ba cách để đưa CSS vào trang web, và việc chọn đúng cách rất quan trọng:

1. Inline CSS — viết trực tiếp trong thẻ qua thuộc tính style:

<p style="color: blue;">Đoạn văn màu xanh</p>

Cách này tiện cho thử nghiệm nhanh nhưng không nên dùng trong dự án thật vì rối và khó bảo trì.

2. Internal CSS — đặt trong thẻ <style> ở phần <head> của trang:

<head>
  <style>
    p { color: blue; }
  </style>
</head>

3. External CSS — viết trong một file .css riêng rồi liên kết vào. Đây là cách chuẩn mực và được khuyến nghị nhất:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Tại sao external CSS lại tốt nhất? Vì nó tách biệt nội dung (HTML) khỏi hình thức (CSS), giúp bạn sửa giao diện của hàng trăm trang chỉ bằng cách chỉnh một file duy nhất.

Chữ "Cascading" nghĩa là gì

Từ "Cascading" (phân tầng, đổ xuống như thác) là phần quan trọng nhất nhưng cũng dễ gây bối rối nhất. Nó mô tả cách trình duyệt quyết định kiểu nào thắng khi có nhiều quy tắc cùng tác động lên một phần tử. Quy tắc đổ xuống theo thứ tự ưu tiên đại khái như sau:

Quy tắc viết sau sẽ ghi đè quy tắc viết trước (nếu cùng độ ưu tiên).
Inline CSS mạnh hơn internal/external CSS.
Selector càng cụ thể thì càng có sức nặng (đây gọi là specificity — bạn sẽ học sâu ở Bài 24).

Tạm thời, bạn chỉ cần nhớ: nếu chữ không đổi màu như bạn mong muốn, rất có thể có một quy tắc khác "mạnh hơn" đang ghi đè lên nó.

Những property bạn sẽ dùng hàng ngày

Để tạo phong cách cho trang web, có một nhóm property mà bất kỳ designer nào cũng phải thuộc nằm lòng:

Màu sắc: color (màu chữ), background-color (màu nền).
Font chữ: font-family (kiểu chữ), font-size (cỡ chữ), font-weight (độ đậm).
Khoảng cách: margin (lề ngoài, đẩy các phần tử ra xa nhau), padding (lề trong, tạo khoảng đệm bên trong phần tử).
Kích thước: width (chiều rộng), height (chiều cao).
Đường viền: border.

Riêng margin và padding là nền tảng của cái gọi là Box Model — mọi phần tử HTML đều được trình duyệt coi như một chiếc hộp chữ nhật. Khái niệm này quan trọng đến mức có hẳn một bài riêng (Bài 20) dành cho nó. Ở đây, bạn chỉ cần nắm: padding là khoảng đệm bên trong, margin là khoảng cách bên ngoài.

Cách viết giá trị màu

Trong CSS có nhiều cách để diễn đạt một màu, và bạn nên quen với cả ba:

Tên màu: red, blue, white — dễ đọc nhưng giới hạn.
Mã HEX: #c0392b — phổ biến nhất, là chuẩn bạn sẽ thấy trong file thiết kế Figma.
RGB / RGBA: rgb(192, 57, 43) hoặc rgba(192, 57, 43, 0.5) — chữ "A" cuối là độ trong suốt (alpha), rất hữu ích khi cần màu mờ.

Tình huống thực tế

Ví dụ 1: The Coffee House đổi bộ nhận diện thương hiệu

Giả sử The Coffee House quyết định làm mới website, chuyển tông màu chủ đạo từ đỏ sang một sắc cam ấm hơn (#E87722) để gần với cảm giác "ấm áp khi uống cà phê". Trang web của họ có hơn 200 trang: trang chủ, danh sách cửa hàng, menu, blog...

Nếu họ dùng inline CSS, mỗi nút bấm "Đặt hàng" trên 200 trang đều phải sửa thủ công — một cơn ác mộng có thể mất cả tuần và đầy rủi ro sót lỗi. Nhưng vì đội ngũ đã dùng external CSS ngay từ đầu, họ chỉ cần mở file theme.css, đổi một dòng:

.btn-primary {
  background-color: #E87722;
}

Toàn bộ 200 trang cập nhật ngay lập tức.

Bài học rút ra: Quyết định kiến trúc CSS từ ban đầu (chọn external CSS) tạo ra khác biệt khổng lồ về chi phí bảo trì sau này. Một designer giỏi nghĩ xa hơn cái đẹp trước mắt — họ nghĩ đến khả năng thay đổi trong tương lai.

Ví dụ 2: Bạn Lan và nút bấm "vô hình"

Lan, một học viên ở Đà Nẵng, làm trang giới thiệu sản phẩm. Bạn ấy viết:

button {
  color: white;
}

Nhưng nút lại hiện ra với chữ trắng trên nền trắng — gần như không nhìn thấy gì. Lan loay hoay cả buổi tối. Vấn đề là: bạn ấy đã đặt màu chữ (color) nhưng quên đặt màu nền (background-color). Nền mặc định của nút là trắng nhạt, nên chữ trắng "biến mất".

Khi thêm:

button {
  color: white;
  background-color: #1a73e8;
}

Nút lập tức hiện rõ ràng, chuyên nghiệp.

Bài học rút ra: Phân biệt rạch ròi giữa color (chữ) và background-color (nền) là một trong những nhầm lẫn phổ biến nhất của người mới. Luôn nghĩ về cặp màu chữ–nền cùng nhau để đảm bảo độ tương phản (bạn sẽ học sâu về tương phản và khả năng đọc ở Bài 6).

Ví dụ 3: Tiki và sức mạnh của `class`

Trên một trang sản phẩm của Tiki, có hàng chục tiêu đề <h2>: "Sản phẩm tương tự", "Đánh giá", "Câu hỏi thường gặp". Nhưng riêng tiêu đề "Flash Sale" cần màu đỏ nổi bật, còn các tiêu đề khác giữ màu đen bình thường.

Nếu dùng selector h2 { color: red; }, tất cả tiêu đề đều đỏ — không đúng ý. Giải pháp là dùng class — một selector tùy chỉnh đặt tên bằng dấu chấm:

.flash-sale-title {
  color: #d0021b;
}

<h2 class="flash-sale-title">Flash Sale</h2>
<h2>Sản phẩm tương tự</h2>

Chỉ tiêu đề có gắn class="flash-sale-title" mới đổi màu.

Bài học rút ra: class là công cụ mạnh nhất để áp dụng kiểu một cách có chọn lọc. Trong thực tế, các designer chuyên nghiệp dùng class cho gần như mọi thứ, thay vì nhắm trực tiếp vào thẻ HTML.

Hướng dẫn từng bước

Hãy cùng tạo trang web có style đầu tiên của bạn:

Bước 1 — Tạo file HTML. Tạo file index.html với nội dung cơ bản:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Chào mừng đến với khóa học</h1>
  <p class="intro">Đây là đoạn giới thiệu đầu tiên.</p>
  <button class="btn">Bắt đầu học</button>
</body>
</html>

Bước 2 — Tạo file CSS. Trong cùng thư mục, tạo file styles.css. Lưu ý tên phải khớp chính xác với đường dẫn trong thẻ <link>.

Bước 3 — Định kiểu cho tiêu đề:

h1 {
  color: #2c3e50;
  font-size: 36px;
  font-family: Arial, sans-serif;
}

Bước 4 — Định kiểu cho đoạn văn bằng class:

.intro {
  color: #555555;
  font-size: 18px;
  line-height: 1.6;
}

Bước 5 — Tạo một nút bấm đẹp:

.btn {
  background-color: #1a73e8;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
}

Bước 6 — Mở index.html bằng trình duyệt và quan sát thành quả. Mỗi lần sửa CSS, hãy lưu file rồi tải lại trang (F5) để thấy thay đổi.

Bước 7 — Thử nghiệm. Đổi background-color của nút sang #E87722, đổi font-size của h1 sang 48px, xem trang biến đổi thế nào. Đây là cách học CSS hiệu quả nhất: thay đổi, quan sát, lặp lại.

Lỗi thường gặp & mẹo

Quên dấu chấm phẩy hoặc dấu ngoặc nhọn. Đây là lỗi số một. Thiếu một dấu ; có thể làm hỏng cả khối quy tắc phía sau. Mẹo: luôn kết thúc mỗi declaration bằng ;, kể cả declaration cuối cùng.

Nhầm color với background-color. Như câu chuyện của Lan ở trên — luôn nhớ color dành cho chữ.

Quên dấu chấm trước tên class. Trong CSS, class phải có dấu chấm: .btn { }. Nhưng trong HTML thì không có dấu chấm: class="btn". Người mới rất hay viết nhầm .btn trong thuộc tính HTML.

Sai đường dẫn file CSS. Nếu style không áp dụng, kiểm tra ngay thẻ <link> — tên file và đường dẫn có khớp không? CSS phân biệt chữ hoa/thường: Styles.css khác styles.css.

Mẹo dùng DevTools. Nhấn F12 (hoặc chuột phải → Inspect) trong trình duyệt Chrome để mở Developer Tools. Đây là người bạn thân nhất của designer: bạn có thể click vào bất kỳ phần tử nào để xem CSS đang áp dụng, thậm chí sửa trực tiếp để thử nghiệm mà không cần lưu file. Hãy tập thói quen dùng nó từ hôm nay.

Mẹo về quy ước đặt tên. Đặt tên class bằng tiếng Anh, viết thường, dùng dấu gạch ngang: .product-card, .nav-link. Tránh tiếng Việt có dấu và khoảng trắng. Tên class nên mô tả vai trò của phần tử, không phải vẻ ngoài — nên đặt .btn-primary thay vì .btn-blue, vì màu có thể đổi nhưng vai trò thì không.

Bài tập thực hành

Tạo "name card" cá nhân. Làm một trang HTML đơn giản gồm tên bạn (<h1>), nghề nghiệp (<p>), và một nút "Liên hệ". Dùng external CSS để: đặt màu nền trang, định kiểu tiêu đề với font-size lớn, và tạo nút bấm có background-color, padding và border-radius.

Thử nghiệm Cascading. Viết hai quy tắc cho cùng một đoạn văn: một đặt color: red, một đặt color: blue, với quy tắc xanh viết sau. Mở trang xem màu nào thắng, rồi đảo thứ tự để kiểm chứng nguyên tắc "viết sau ghi đè".

Bài tập màu sắc. Viết cùng một màu cam (#E87722) bằng ba cách: tên màu gần nhất, mã HEX, và RGB. Áp dụng cho ba phần tử khác nhau và so sánh.

Thử thách DevTools. Vào trang chủ Tiki hoặc Shopee, nhấn F12, click vào một nút bấm bất kỳ và quan sát những property CSS nào đang được áp dụng. Ghi lại 3 property bạn thấy thú vị.

Tóm tắt

CSS là ngôn ngữ định kiểu giúp bạn biến một trang HTML thô ráp thành một sản phẩm có thẩm mỹ. Hãy ghi nhớ những điểm cốt lõi:

Mỗi quy tắc CSS gồm selector, property và value, đóng gói trong cấu trúc selector { property: value; }.
Có ba cách gắn CSS, trong đó external CSS (file .css riêng) là chuẩn mực nên dùng vì dễ bảo trì và tái sử dụng.
"Cascading" mô tả cách trình duyệt giải quyết xung đột giữa các quy tắc — quy tắc cụ thể hơn và viết sau thường thắng.
Các property nền tảng gồm color, background-color, font-family, font-size, margin, padding.
Class (đặt tên bằng dấu chấm) là công cụ mạnh nhất để áp dụng kiểu một cách có chọn lọc.
DevTools (F12) là người bạn đồng hành giúp bạn học và gỡ lỗi CSS mỗi ngày.

Bạn vừa cầm trong tay cây cọ vẽ của nghề thiết kế web. Ở những bài tiếp theo, chúng ta sẽ học cách chọn màu thông minh, bố cục bằng Flexbox và Grid, và xây những component đẹp mắt. Nhưng tất cả đều đứng trên nền tảng CSS mà bạn vừa nắm được hôm nay. Hãy thực hành thật nhiều — vì với CSS, mỗi dòng code bạn viết là một nét vẽ trên trang.