DDevArchive
Đăng nhập
Cơ bản ⏱️ 20:15 🔥 Nổi bật

CSS cơ bản: trang điểm cho trang web

HTML là bộ xương, CSS là quần áo và trang điểm. Bạn sẽ học cách chọn phần tử (selector), đặt màu, font chữ, khoảng cách, và biến trang web trắng trơn thành giao diện đẹp mắt.

CSS là gì và viết ở đâu?

CSS (Cascading Style Sheets) mô tả cách hiển thị: màu sắc, kích thước, vị trí, phông chữ. Có 3 cách viết CSS: inline (style=”…” trên thẻ), internal (<style> trong head), và external (file .css riêng). Luôn ưu tiên external vì gọn gàng nhất.

// File: style.css
/* File CSS bên ngoài, link vào HTML bằng <link> */

body {
  font-family: "Inter", sans-serif;
  margin: 0;
  background-color: #f8f9fa;
  color: #212529;
}

h1 {
  color: #6c5ce7;
  font-size: 2rem;
}

p {
  line-height: 1.6;
  max-width: 600px;
}

Selector: chọn phần tử để style

Selector cho CSS biết bạn muốn style thẻ nào. Có 3 loại cơ bản nhất:

LoạiCú phápVí dụChọn gì
Thẻtên-thẻh1 { }Mọi thẻ h1
Class.tên-class.card { }Mọi thẻ có class=“card”
ID#tên-id#hero { }Thẻ duy nhất có id=“hero”
💡 Class hay hơn ID

ID chỉ dùng được 1 lần trên trang (duy nhất). Class dùng lại được ở nhiều thẻ. 90% CSS nên dùng class — chỉ dùng ID khi cần JavaScript truy cập chính xác một phần tử.

Box model: padding, border, margin

Mỗi phần tử HTML là một “hộp” với 4 lớp: content (nội dung) → padding (đệm bên trong) → border (viền) → margin (khoảng cách bên ngoài). Hiểu box model là bước đầu để bố cục không bị “vỡ”.

// File: box.css
.card {
  /* Content: chứa text, ảnh bên trong */
  width: 300px;

  /* Padding: khoảng đệm giữa content và border */
  padding: 16px 24px;

  /* Border: viền bao quanh */
  border: 1px solid #dee2e6;
  border-radius: 12px;

  /* Margin: khoảng cách với phần tử bên ngoài */
  margin-bottom: 16px;

  /* Trick: box-sizing border-box để width bao gồm cả padding + border */
  box-sizing: border-box;
}

Màu sắc và typography

Màu trong CSS viết bằng tên (red), mã hex (#6c5ce7), RGB (rgb(108, 92, 231)), hay HSL (hsl(249, 72%, 63%)). Font chữ đặt bằng font-family, nên dùng Google Fonts miễn phí thay vì font mặc định trình duyệt.

// File: typo.css
/* Nạp Google Font trong <head> của HTML */
/* <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet"> */

body {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.title {
  font-weight: 800;
  font-size: 2.5rem;
  letter-spacing: -0.02em;
  color: hsl(249, 72%, 63%);
}

❓ Thuộc tính nào trong box model tạo khoảng cách GIỮA nội dung và viền (border)?

  • Phân biệt 3 cách viết CSS (inline, internal, external)
  • Dùng được selector thẻ, class và ID
  • Giải thích được box model: content, padding, border, margin
  • Đặt được màu, font-family, font-size cho trang