Bài 6: CSS là gì? Selector, Property, Value

Ở những bài trước, bạn đã học cách tạo cấu trúc trang web bằng HTML. Nhưng trang web chỉ có HTML sẽ trông rất xấu — tất cả đều là chữ đen trên nền trắng. Để làm trang web đẹp, hấp dẫn, và chuyên nghiệp, bạn cần CSS.

CSS (Cascading Style Sheets) là ngôn ngữ dùng để trang trí, định dạng, và bố cục trang web. Bài này sẽ dạy bạn các khái niệm cơ bản: selector, property, và value — những thứ cơ bản nhất của CSS.

CSS là gì?

CSS dùng để trả lời câu hỏi: “Làm sao để phần tử HTML trông như thế nào?”

Ví dụ:

Tiêu đề <h1> nên có màu xanh, size 32px, đậm
Đoạn văn <p> nên có màu xám, size 16px, khoảng cách 20px
Nút <button> nên có nền xanh, chữ trắng, góc bo tròn

Nếu HTML là xương, CSS là da thịt, trang phục.

Cách viết CSS – Cú pháp cơ bản

CSS được viết theo công thức:

selector {
  property: value;
  property: value;
  property: value;
}

Ví dụ:

h1 {
  color: blue;
  font-size: 32px;
  font-weight: bold;
}

Giải thích:

h1 = Selector (chọn phần tử nào)
color, font-size, font-weight = Properties (thuộc tính)
blue, 32px, bold = Values (giá trị)

Selector (Bộ chọn) – Chọn phần tử nào

Selector dùng để chọn phần tử HTML nào sẽ được định dạng. Có nhiều loại selector khác nhau.

1. Element Selector (Chọn thẻ)

Chọn tất cả phần tử cùng loại.

<!-- CSS -->
h1 {
  color: red;
}

p {
  color: gray;
  font-size: 14px;
}

a {
  color: blue;
  text-decoration: none;
}

<!-- HTML -->
<h1>Tiêu đề</h1> <!-- Sẽ là màu đỏ -->
<p>Đoạn văn</p> <!-- Sẽ là xám 14px -->
<a href="#">Liên kết</a> <!-- Sẽ là xanh, không gạch chân -->

2. Class Selector (Chọn class)

Chọn các phần tử có class cụ thể. Dùng dấu . đằng trước tên class.

<!-- CSS -->
.highlight {
  background-color: yellow;
  font-weight: bold;
}

.text-center {
  text-align: center;
}

.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

<!-- HTML -->
<p class="highlight">Đoạn này sẽ có nền vàng</p>
<h2 class="text-center">Tiêu đề giữa trang</h2>
<button class="btn">Nút bấm</button>

3. ID Selector (Chọn ID)

Chọn phần tử có id duy nhất. Dùng dấu # đằng trước tên ID. Mỗi ID chỉ được dùng một lần trong trang.

<!-- CSS -->
#header {
  background-color: navy;
  color: white;
  padding: 20px;
}

#main-content {
  max-width: 800px;
  margin: 0 auto;
}

<!-- HTML -->
<header id="header">
  <h1>Tiêu đề chính</h1>
</header>

<main id="main-content">
  <p>Nội dung chính</p>
</main>

4. Universal Selector (Chọn tất cả)

Chọn tất cả các phần tử. Dùng dấu *.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

5. Descendant Selector (Chọn con cháu)

Chọn phần tử nằm bên trong phần tử khác.

<!-- CSS -->
/* Chọn tất cả <p> nằm trong <article> */
article p {
  color: navy;
  line-height: 1.6;
}

/* Chọn tất cả <a> nằm trong <nav> */
nav a {
  color: white;
  text-decoration: none;
}

<!-- HTML -->
<article>
  <p>Đoạn này sẽ là xanh tối</p>
  <p>Đoạn này cũng vậy</p>
</article>

<nav>
  <a href="#">Trang chủ</a> <!-- Sẽ là trắng -->
</nav>

Tóm tắt các loại Selector

Loại	Ký hiệu	Ví dụ	Chức năng
Element	Không ký hiệu	`h1 { }`	Chọn tất cả h1
Class	`.`	`.highlight { }`	Chọn các phần tử có class=”highlight”
ID	`#`	`#header { }`	Chọn phần tử có id=”header”
Universal	`*`	`* { }`	Chọn tất cả phần tử
Descendant	Khoảng cách	`article p { }`	Chọn p nằm trong article

Property và Value (Thuộc tính và Giá trị)

Property là những đặc tính mà bạn muốn thay đổi. Value là giá trị mới của property đó.

Properties phổ biến nhất

Property	Chức năng	Giá trị ví dụ
`color`	Màu chữ	`red, #FF0000, rgb(255, 0, 0)`
`background-color`	Màu nền	`blue, #0000FF, rgba(0, 0, 255, 0.5)`
`font-size`	Kích thước chữ	`14px, 1.2rem, 100%`
`font-weight`	Độ đậm chữ	`normal, bold, 700`
`text-align`	Canh chữ	`left, center, right, justify`
`margin`	Khoảng cách ngoài	`10px, 20px 30px, auto`
`padding`	Khoảng cách trong	`10px, 20px 30px`
`border`	Đường viền	`1px solid black, 2px dashed blue`
`width`	Chiều rộng	`300px, 50%, auto`
`height`	Chiều cao	`200px, 100%, auto`

Ví dụ sử dụng Property và Value

h1 {
  color: navy;              /* Chữ màu xanh tối */
  background-color: yellow; /* Nền màu vàng */
  font-size: 32px;          /* Kích thước 32 pixel */
  text-align: center;       /* Canh giữa */
  padding: 20px;            /* Khoảng cách trong 20px */
  margin-bottom: 30px;      /* Khoảng cách dưới 30px */
}

.box {
  width: 300px;             /* Rộng 300px */
  height: 200px;            /* Cao 200px */
  border: 2px solid red;    /* Đường viền 2px, màu đỏ */
  border-radius: 10px;      /* Góc bo tròn 10px */
}

Ba cách viết CSS

1. Inline CSS (CSS trong HTML)

Viết CSS trực tiếp trong thẻ HTML bằng thuộc tính style. Cách này không được khuyến khích.

<h1 style="color: red; font-size: 32px;">Tiêu đề</h1>
<p style="color: blue;">Đoạn văn</p>

2. Internal CSS (CSS trong trang)

Viết CSS trong thẻ <style> nằm trong <head>.

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: red;
      font-size: 32px;
    }
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Tiêu đề</h1>
  <p>Đoạn văn</p>
</body>
</html>

3. External CSS (CSS trong file riêng) – ✅ CÁCH TỐT NHẤT

Viết CSS trong một file .css riêng, rồi link vào HTML. Đây là cách được khuyến khích nhất.

<!-- FILE: index.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Tiêu đề</h1>
  <p>Đoạn văn</p>
</body>
</html>

/* FILE: styles.css */
h1 {
  color: red;
  font-size: 32px;
}

p {
  color: blue;
}

💡 Mẹo: Luôn dùng External CSS (file .css riêng) vì:
Dễ bảo trì: Thay đổi style một chỗ, áp dụng cho tất cả trang
Tái sử dụng: Một file CSS có thể dùng cho nhiều trang HTML
Tốc độ: Trình duyệt cache file CSS, trang load nhanh hơn

Ví dụ hoàn chỉnh – Tạo trang web với CSS

<!-- FILE: index.html -->
<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bài học CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <header id="header">
    <h1>🌟 Blog Lập Trình</h1>
    <p class="tagline">Học lập trình một cách dễ dàng</p>
  </header>

  <nav class="navbar">
    <a href="#">Trang chủ</a>
    <a href="#">Blog</a>
    <a href="#">Liên hệ</a>
  </nav>

  <main>
    <article class="post">
      <h2>Bài 1: HTML là gì?</h2>
      <p class="meta">Ngày: 20/12/2024</p>
      <p>HTML (HyperText Markup Language) là nền tảng của web. Nó dùng để tạo cấu trúc trang web.</p>
      <button class="btn">Đọc tiếp</button>
    </article>

    <article class="post">
      <h2>Bài 2: CSS là gì?</h2>
      <p class="meta">Ngày: 22/12/2024</p>
      <p>CSS (Cascading Style Sheets) dùng để trang trí trang web, làm cho nó trông đẹp hơn.</p>
      <button class="btn">Đọc tiếp</button>
    </article>
  </main>

  <footer id="footer">
    <p>© 2024 Blog Lập Trình. Tất cả quyền được bảo lưu.</p>
  </footer>

</body>
</html>

/* FILE: styles.css */

/* Chọn tất cả phần tử, xóa margin/padding mặc định */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Header */
#header {
  background-color: #2c3e50;
  color: white;
  padding: 40px;
  text-align: center;
}

#header h1 {
  font-size: 48px;
  margin-bottom: 10px;
}

.tagline {
  font-size: 18px;
  color: #ecf0f1;
}

/* Navigation */
.navbar {
  background-color: #34495e;
  padding: 15px;
  text-align: center;
}

.navbar a {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  font-weight: bold;
}

.navbar a:hover {
  color: #f39c12;
}

/* Main content */
main {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Article */
.post {
  background-color: #ecf0f1;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

.post h2 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.meta {
  color: #95a5a6;
  font-size: 14px;
  margin-bottom: 15px;
}

.post p {
  color: #34495e;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* Button */
.btn {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

.btn:hover {
  background-color: #2980b9;
}

/* Footer */
#footer {
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}

Quy tắc quan trọng khi viết CSS

💡 Mẹo viết CSS sạch:
Dùng class cho styling: .button {} tốt hơn button {}
Tránh ID cho styling: ID thường dùng cho JavaScript
Dùng tên có ý nghĩa: .btn-primary tốt hơn .b1
Một class, một mục đích: .highlight-red tốt hơn .highlight-important-text-red

⚠️ Cảnh báo:
Tránh Inline CSS (style="...") — khó bảo trì
Tránh dùng !important quá nhiều — dễ gây xung đột
Tránh chọn quá sâu: div > p > span > a {} — khó quản lý

Tóm tắt

✅ CSS: Ngôn ngữ dùng để trang trí, định dạng trang web
✅ Cú pháp: selector { property: value; }
✅ Selector: Chọn phần tử HTML nào (element, class, id, universal, descendant)
✅ Property: Thuộc tính cần thay đổi (color, font-size, margin…)
✅ Value: Giá trị mới của property (red, 32px, bold…)
✅ Element selector: Chọn tất cả thẻ cùng loại
✅ Class selector: Dùng dấu . để chọn class
✅ ID selector: Dùng dấu # để chọn ID
✅ Cách viết: Luôn dùng External CSS (file .css riêng)

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

Bài tập 1: Tạo file styles.css và định dạng trang web đơn giản:

h1 có màu xanh, size 36px, canh giữa
p có màu xám, size 16px, khoảng cách dòng 1.5
.highlight có nền vàng, chữ đậm
.button có nền xanh, chữ trắng, padding 10px, góc bo tròn
body có background-color nhẹ (không trắng)

Bài tập 2: Tạo trang “Thẻ sản phẩm” với CSS:

Một <article class="product"> với hình ảnh, tên, giá, mô tả
Định dạng:
Nền xám nhạt, padding 20px, góc bo tròn 8px
Tiêu đề sản phẩm: xanh, size 24px, đậm
Giá: đỏ, size 20px, đậm
Mô tả: xám, size 14px
Nút mua: nền xanh, chữ trắng, padding 12px, bo tròn

Bài tập 3: Chuyển đổi bài viết HTML cũ sang sử dụng CSS:

Tạo file styles.css
Xóa tất cả style="..." (inline CSS)
Thêm <link rel="stylesheet" href="styles.css"> vào head
Viết CSS selector để định dạng giống như trước

Chúc bạn thành công! 🚀

CSS là gì?

Cách viết CSS – Cú pháp cơ bản

Selector (Bộ chọn) – Chọn phần tử nào

1. Element Selector (Chọn thẻ)

2. Class Selector (Chọn class)

3. ID Selector (Chọn ID)

4. Universal Selector (Chọn tất cả)

5. Descendant Selector (Chọn con cháu)

Tóm tắt các loại Selector

Property và Value (Thuộc tính và Giá trị)

Properties phổ biến nhất

Ví dụ sử dụng Property và Value

Ba cách viết CSS

1. Inline CSS (CSS trong HTML)

2. Internal CSS (CSS trong trang)

3. External CSS (CSS trong file riêng) – ✅ CÁCH TỐT NHẤT

Ví dụ hoàn chỉnh – Tạo trang web với CSS

Quy tắc quan trọng khi viết CSS

Tóm tắt

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

Bài viết liên quan

Bài 10: Positioning – Absolute, Relative, Fixed, Sticky

Bài 13: Animation – Tạo hoạt ảnh CSS

Bài 7: Box Model – Margin, Padding, Border, Width

Bài 16: Mobile First – Thiết kế mobile trước

Để lại bình luận Hủy