CSS là gì và khác HTML thế nào?

HTML là bộ khung nội dung (tiêu đề, đoạn văn, ảnh); CSS là phần trang trí quyết định trang trông thế nào (màu sắc, font chữ, khoảng cách, bố cục). Nói gọn: HTML là 'nội dung', CSS là 'diện mạo'. Cùng một HTML, đổi CSS là đổi cả giao diện mà không phải sửa nội dung.

Nên viết CSS ở đâu — trong HTML hay file riêng?

Với người mới nên tách CSS ra file riêng (ví dụ style.css) rồi liên kết vào HTML bằng thẻ . Cách này gọn gàng, dễ quản lý và dùng chung cho nhiều trang. Viết CSS trực tiếp trong thẻ (inline) chỉ nên dùng cho thử nhanh, không nên dùng lâu dài.

Box model trong CSS là gì?

Box model mô tả mỗi phần tử HTML như một chiếc hộp gồm bốn lớp từ trong ra ngoài: nội dung (content), padding (đệm bên trong, giữa nội dung và viền), border (viền), và margin (lề bên ngoài, khoảng cách với phần tử khác). Hiểu box model là hiểu cách tạo khoảng cách và bố cục trong CSS.

Web cơ bản Bài 5: CSS — màu sắc, font, box model (30 phút)

Bài 4 bạn đã có trang cá nhân đủ nội dung nhưng trông còn trơ trụi. Giờ ta làm nó đẹp bằng CSS — phần quyết định màu sắc, font chữ và khoảng cách. Bài này gói ba thứ nền tảng nhất: màu, font, và box model (margin/padding/border). Cuối bài trang của bạn trông gọn gàng, dễ nhìn hẳn — mà HTML gần như không đổi.

⏱️ Cách học bài này (~30 phút): đọc cách gắn CSS + màu/font (10’), tự gõ và xem trình duyệt đổi (12’), học box model (5’), lưu file mang về (3’).

Mục tiêu bài học

Sau bài này bạn sẽ:

Tạo file style.css và liên kết vào HTML bằng <link>.
Chọn phần tử (selector) và đặt màu chữ, màu nền, font.
Hiểu box model: margin, padding, border.
Áp dụng để trang cá nhân trông gọn đẹp.

Nội dung: CSS cơ bản

1. Gắn CSS vào HTML

Tạo file style.css cùng thư mục với index.html, rồi thêm dòng này vào phần <head> của HTML:

<head>
  <meta charset="UTF-8">
  <title>Trang của Lan</title>
  <link rel="stylesheet" href="style.css">   <!-- gắn CSS -->
</head>

2. Cú pháp CSS & chọn phần tử (selector)

Một quy tắc CSS gồm selector (chọn phần tử nào) và các thuộc tính trong { }:

h1 {
  color: navy;          /* màu chữ */
  font-size: 32px;      /* cỡ chữ */
}
p {
  color: #333;          /* xám đậm, dùng mã màu hex */
}

Chọn theo thẻ: h1, p, body…
Chọn theo class (đặt class="..." trong HTML): .ten-class.

3. Màu sắc & font

body {
  background-color: #f5f5f5;         /* màu nền cả trang */
  font-family: Arial, sans-serif;    /* font; có font dự phòng */
  color: #333;
  line-height: 1.6;                  /* giãn dòng cho dễ đọc */
}

Màu ghi bằng tên (navy, red), mã hex (#333), hoặc rgb(...).
font-family nên có font dự phòng: nếu font đầu không có, trình duyệt dùng font sau.

4. Box model — chìa khoá của khoảng cách

Mỗi phần tử là một chiếc hộp gồm 4 lớp từ trong ra ngoài: content → padding → border → margin.

.card {
  background-color: #fff;        /* nền trắng để card nổi trên nền xám */
  padding: 16px;                 /* đệm bên trong, giữa chữ và viền */
  border: 1px solid #ccc;        /* viền: độ dày + kiểu (solid) + màu — thiếu "solid" viền sẽ KHÔNG hiện */
  margin: 20px 0;                /* lề ngoài trên/dưới, cách phần tử khác */
  border-radius: 8px;            /* bo góc */
}

padding: khoảng cách bên trong (chữ cách viền).
border: viền.
margin: khoảng cách bên ngoài (hộp này cách hộp khác).

Nhớ mẹo: padding đẩy vào trong, margin đẩy ra ngoài.

Code mẫu có chú thích: tô đẹp trang cá nhân

Tạo style.css với nội dung sau (đã gắn <link> như mục 1):

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
  max-width: 700px;      /* giới hạn bề rộng cho dễ đọc */
  margin: 40px auto;     /* căn giữa trang */
  padding: 0 16px;
}
h1 {
  color: navy;
}
h2 {
  color: #2a7ae2;
  border-bottom: 2px solid #eee;   /* gạch dưới nhẹ */
  padding-bottom: 4px;
}

Cách chạy: lưu cả index.html và style.css, mở lại trang (hoặc Live Server tự tải). Trang từ đen-trắng trơ trụi sẽ có nền xám nhạt, chữ căn giữa, tiêu đề màu xanh — khác hẳn.

Bài thực hành code (tự gõ)

Bài 1 — Đổi màu & font: đặt background-color cho body là màu bạn thích và đổi font-family sang Georgia, serif. Xem trình duyệt đổi.

Bài 2 — Box model: thêm class .card (nền trắng, padding: 16px, border: 1px solid #ccc, border-radius: 8px) rồi gán cho khối kinh nghiệm trong HTML (<div class="card">...</div>).
✅ Gợi ý: bọc phần nội dung bằng <div class="card">; nhớ viết đủ border: 1px solid #ccc (thiếu solid viền sẽ không hiện).

Bài 3 — Khoảng cách: dùng margin để các mục thoáng hơn, ví dụ h2 { margin-top: 24px; }.

Lỗi thường gặp & cách sửa

CSS không có tác dụng → sai đường dẫn <link href="style.css"> (sai tên file/khác thư mục), hoặc quên lưu file. Kiểm tra tên chính xác.
Quên dấu ; cuối mỗi dòng thuộc tính → các dòng sau có thể bị bỏ qua. Mỗi thuộc tính kết bằng ;.
Nhầm padding và margin → padding là trong, margin là ngoài. Thử đổi qua lại để thấy khác biệt.
Màu không hiện → sai mã hex (thiếu #) hoặc sai tên màu. Dùng # trước mã hex.
Ôn lại khung HTML nếu cần: Bài 3 — cấu trúc trang.

💾 Mang về — style.css khởi đầu

Giữ file này làm nền trang trí cho cả series (Bài 6 sẽ làm bố cục với Flexbox):

/* style.css — trang trí cơ bản cho trang cá nhân */
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
  max-width: 700px;
  margin: 40px auto;
  padding: 0 16px;
}
h1 { color: navy; }
h2 { color: #2a7ae2; border-bottom: 2px solid #eee; padding-bottom: 4px; }
.card { background-color: #fff; padding: 16px; border: 1px solid #ccc; border-radius: 8px; margin: 20px 0; }

Thuật ngữ chốt

Thuật ngữ	Giải thích ngắn
CSS	Ngôn ngữ trang trí: màu, font, khoảng cách, bố cục
selector	Phần chọn phần tử để áp style (`h1`, `.card`)
`<link>`	Thẻ gắn file CSS vào HTML
màu hex	Mã màu dạng `#333`, `#2a7ae2`
box model	content → padding → border → margin
padding / margin	Khoảng cách bên trong / bên ngoài phần tử

Tự kiểm tra

Thẻ nào dùng để gắn file CSS vào HTML? (Đáp án: <link rel="stylesheet" href="...">)
padding và margin khác nhau ra sao? (Đáp án: padding là khoảng cách bên trong (chữ–viền), margin là bên ngoài (giữa các phần tử))
#333 là gì? (Đáp án: một mã màu hex — màu xám đậm)

Ghi nhớ nhanh

Gắn CSS: <link rel="stylesheet" href="style.css"> trong <head>.
Quy tắc: selector { thuộc-tính: giá-trị; } — nhớ dấu ;.
Box model: padding (trong) → border → margin (ngoài).

Bài tập về nhà: trang trí xong trang cá nhân của bạn với màu, font và box model theo ý thích. Bài tiếp theo: Bài 6 — CSS: bố cục với Flexbox (sắp đăng) — ta sắp xếp các khối cho đẹp.

Bài 5: CSS — màu sắc, font và box model