CSS đầu tiên: trang có màu sắc · Lập trình với Martin

Làm quen ngôn ngữ CSS, và xem website của bạn không còn trông như năm 1995.

Xem này: CSS là gì

HTML là bộ khung trang. CSS là trang phục: màu sắc, phông chữ, kích thước, khoảng cách. Nó được viết trong file riêng và trông như thế này:

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

Đọc to như thế này: “Mọi tiêu đề h1, tô màu xanh đậm. Mọi đoạn p, cỡ 18 pixel và xám đậm.”

Mỗi quy tắc có ba phần:

selector (h1) – cái gì quy tắc áp dụng,
property (color) – thay đổi gì,
value (darkblue) – đổi thành gì.

Dấu hai chấm tách property và value, mỗi dòng kết thúc bằng dấu chấm phẩy. Cẩn thận dấu chấm phẩy – quên một cái là lỗi CSS phổ biến nhất thế giới.

Kết nối: báo trang về CSS của bạn

Trong thư mục my-website, tạo file mới tên style.css.
Thêm dòng này vào <head> của mọi trang HTML:
```
<link rel="stylesheet" href="style.css">
```
Nghĩa là: “Giao diện trang này nằm trong file style.css.”
Thử xem có hoạt động không – đặt thứ không thể bỏ qua trong style.css:
```
body {
  background-color: yellow;
}
```
Lưu, làm mới trang. Toàn vàng? Đã hoạt động! (Cứ xóa màu vàng đi.)

Màu sắc trong CSS

Bạn có thể viết màu bằng từ tiếng Anh (red, darkblue, lightgray, tomato, gold…) hoặc chính xác hơn bằng mã bắt đầu bằng dấu thăng: #1d4ed8 là xanh, #16a34a là xanh lá. Trộn màu bạn thích tại htmlcolorcodes.com.

Lượt của bạn 💪

Trang trí website với màu đầu tiên. Trong style.css, đặt:

màu nền toàn trang (body),
màu tiêu đề (h1, h2),
cỡ và màu đoạn văn (p).

Giải pháp – cứ chỉnh màu theo ý bạn:

🏫 Website trường – giải pháp

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Xanh hợp website trường – cảm giác đáng tin (ngân hàng cũng dùng vì thế!).

🙋 Website cá nhân – giải pháp

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

Website cá nhân có thể táo hơn – cam ấm nói “nơi này sống động”.

🌍 Nhật ký du lịch – giải pháp

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Xanh như rừng và đồng cỏ – hoàn hảo cho nhật ký du lịch.

⚽ Website câu lạc bộ – giải pháp

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Tốt nhất là màu câu lạc bộ – đội mặc đỏ? Thì đỏ!

⚠️

Quy tắc dễ đọc: chữ tối trên nền sáng (hoặc ngược lại). Vàng nhạt trên trắng không đọc được. Không chắc thì hỏi ai đó: “Bạn đọc thoải mái không?”

✅

Tự kiểm tra: Website có màu riêng – và vì CSS nằm trong một file liên kết mọi trang, tất cả trang được tô màu cùng lúc. Thông minh phải không?

Điều cần nhớ từ bài này

CSS = giao diện. Viết trong file style.css, kết nối bằng thẻ <link> trong <head>.
Quy tắc: selector { property: value; } – và đừng quên dấu chấm phẩy.
Một file CSS trang trí cả website cùng lúc.