🎨 Bài 1: CSS Cơ bản & Cách sử dụng

Học CSS từ những kiến thức nền tảng

📖 1. CSS là gì?

CSS (Cascading Style Sheets) là ngôn ngữ dùng để trang trí và định dạng giao diện cho các trang web được viết bằng HTML.

💡 Ví dụ dễ hiểu:
- HTML = Khung xương của ngôi nhà (cấu trúc)
- CSS = Sơn tường, trang trí nội thất (giao diện)
- JavaScript = Các thiết bị điện, đồ dùng thông minh (tương tác)

🎯 CSS giúp bạn làm gì?

📺 Demo: So sánh HTML với và không có CSS

Không có CSS:

Welcome to My Website

This is a paragraph without CSS styling.

Có CSS:

Welcome to My Website

This is a paragraph with CSS styling. Looks much better!

📝 2. Cú pháp CSS cơ bản

selector {
  property: value;
  property: value;
}
Thành phần Mô tả Ví dụ
Selector Chọn phần tử HTML muốn style p, .class, #id
Property Thuộc tính muốn thay đổi color, font-size, background
Value Giá trị của thuộc tính red, 20px, center

Ví dụ:

/* Chọn tất cả thẻ p và đổi màu chữ thành xanh */
p {
  color: blue;
  font-size: 16px;
}

/* Chọn thẻ có class="title" */
.title {
  color: red;
  font-weight: bold;
}

/* Chọn thẻ có id="header" */
#header {
  background-color: lightgray;
  padding: 20px;
}
📌 Lưu ý:
  • Mỗi thuộc tính kết thúc bằng dấu ;
  • Dùng { } để bao các thuộc tính
  • CSS không phân biệt hoa thường, nhưng nên viết thường
  • Comment trong CSS: /* nội dung */

🔗 3. Ba cách thêm CSS vào HTML

📍 Cách 1: Inline CSS (CSS nội tuyến)

Thêm CSS trực tiếp vào thuộc tính style của thẻ HTML.

<h1 style="color: blue; font-size: 30px;">Hello World</h1>
<p style="background-color: yellow;">This is a paragraph.</p>
⚠️ Nhược điểm:
  • Khó bảo trì khi có nhiều element
  • Không tái sử dụng được
  • Code HTML dài và khó đọc
  • Chỉ nên dùng khi cần style 1-2 element đơn giản

📍 Cách 2: Internal CSS (CSS nội bộ)

Thêm CSS vào trong thẻ <style> ở phần <head> của HTML.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f0f0f0;
    }
    
    h1 {
      color: navy;
      text-align: center;
    }
    
    p {
      font-size: 18px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>My Website</h1>
  <p>Welcome to my website.</p>
</body>
</html>
✅ Ưu điểm:
  • Dễ quản lý hơn inline CSS
  • Có thể style nhiều element cùng lúc
  • Tốt cho các trang đơn giản, một file HTML

📍 Cách 3: External CSS (CSS riêng biệt) ⭐ KHUYÊN DÙNG

Tạo file CSS riêng và link vào HTML bằng thẻ <link>.

<!-- File: index.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>My Website</h1>
  <p>Welcome to my website.</p>
</body>
</html>
/* File: style.css */
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: navy;
  text-align: center;
}

p {
  font-size: 18px;
  line-height: 1.6;
}
✅ Ưu điểm (Cách tốt nhất!):
  • Tách biệt HTML và CSS → code sạch hơn
  • Một file CSS dùng cho nhiều file HTML
  • Dễ bảo trì và cập nhật
  • Tăng tốc load trang (browser cache file CSS)
  • Đây là cách chuyên nghiệp, dùng trong thực tế!

📊 So sánh 3 cách

Tiêu chí Inline CSS Internal CSS External CSS
Vị trí Trong thuộc tính style Trong <style> File .css riêng
Độ ưu tiên Cao nhất Trung bình Thấp nhất
Tái sử dụng ❌ Không ⚠️ Chỉ trong 1 file ✅ Nhiều file
Bảo trì ❌ Khó ⚠️ Trung bình ✅ Dễ
Khuyến nghị Tránh dùng Trang đơn giản ⭐ Khuyên dùng

⚡ Mức độ ưu tiên CSS (CSS Specificity & Cascade)

🎯 Quy tắc vàng: Khi nhiều CSS rules cùng áp dụng cho 1 phần tử, CSS sẽ quyết định dựa trên:
  1. Nguồn gốc của CSS (Inline > Internal > External)
  2. Độ cụ thể của Selector (ID > Class > Tag)
  3. Thứ tự khai báo (Rule sau ghi đè rule trước)
  4. !important (Ưu tiên tuyệt đối - nên tránh dùng)

📌 Trường hợp 1: Các loại CSS khác nhau

Inline CSS luôn thắng, sau đó đến Internal CSS, cuối cùng là External CSS:

<!-- File: index.html -->
<head>
  <link rel="stylesheet" href="style.css">
  <style>
    p { color: green; }  /* Internal CSS */
  </style>
</head>
<body>
  <p style="color: red;">Chữ này màu gì?</p>
</body>
/* File: style.css */
p { color: blue; }  /* External CSS */
Kết quả: Chữ sẽ màu ĐỎ
Giải thích: Inline CSS (red) có độ ưu tiên cao nhất → ghi đè Internal (green) và External (blue)

📌 Trường hợp 2: Cùng Internal CSS - thứ tự khai báo quan trọng

Rule nào khai báo SAU sẽ ghi đè rule trước (nếu cùng độ cụ thể):

<head>
  <style>
    p { color: blue; }   /* Khai báo trước */
    p { color: red; }    /* Khai báo sau → THẮNG */
  </style>
</head>
<body>
  <p>Chữ này màu gì?</p>
</body>
Kết quả: Chữ sẽ màu ĐỎ
Giải thích: Rule color: red khai báo sau nên ghi đè color: blue

📌 Trường hợp 3: Nhiều file External CSS - thứ tự link quan trọng

File CSS nào được link SAU sẽ ghi đè file link trước:

<head>
  <link rel="stylesheet" href="style1.css">  <!-- Link trước -->
  <link rel="stylesheet" href="style2.css">  <!-- Link sau → THẮNG -->
</head>
/* style1.css */
p { color: blue; font-size: 16px; }

/* style2.css */
p { color: red; }  /* Ghi đè color, giữ nguyên font-size */
Kết quả: color: red (từ style2.css), font-size: 16px (từ style1.css)
Giải thích: style2.css link sau → ghi đè thuộc tính color, các thuộc tính khác giữ nguyên

📌 Trường hợp 4: Độ cụ thể của Selector (Specificity)

Selector càng cụ thể thì độ ưu tiên càng cao:

Thứ tự độ ưu tiên Selector (từ cao xuống thấp):
  1. Inline style: style="..." (1000 điểm)
  2. ID selector: #header (100 điểm)
  3. Class, attribute, pseudo-class: .menu, [type="text"], :hover (10 điểm)
  4. Tag selector: p, div, h1 (1 điểm)
<style>
  p { color: blue; }              /* 1 điểm - Tag */
  .text { color: green; }         /* 10 điểm - Class → THẮNG trước tag */
  #intro { color: red; }          /* 100 điểm - ID → THẮNG tất cả */
  div p { color: yellow; }        /* 2 điểm - 2 Tags */
  div .text { color: orange; }    /* 11 điểm - Tag + Class */
</style>

<p id="intro" class="text">Màu gì?</p>
Kết quả: Chữ sẽ màu ĐỎ
Giải thích: ID selector #intro (100 điểm) thắng Class .text (10 điểm) và Tag p (1 điểm)

📌 Trường hợp 5: !important - Vũ khí tối thượng (nhưng nên tránh)

!important ghi đè mọi rule khác, kể cả Inline CSS:

<style>
  p { color: blue !important; }  /* !important → THẮNG mọi thứ */
</style>

<p style="color: red;">Chữ này màu gì?</p>
Kết quả: Chữ sẽ màu XANH
Giải thích: !important ghi đè cả Inline CSS
⚠️ Cảnh báo về !important:
  • ❌ Làm code khó debug và bảo trì
  • ❌ Phá vỡ quy tắc cascade tự nhiên của CSS
  • ❌ Khi nhiều !important conflict nhau → rất khó fix
  • ✅ Chỉ dùng trong trường hợp đặc biệt (override CSS của thư viện bên thứ 3)

📊 Bảng tổng hợp độ ưu tiên

Mức độ ưu tiên Loại CSS Ví dụ Điểm Specificity
1️⃣ CAO NHẤT !important color: red !important; ∞ (vô hạn)
2️⃣ Rất cao Inline CSS style="color: red" 1,0,0,0
3️⃣ Cao ID Selector #header { } 0,1,0,0
4️⃣ Trung bình Class, Attribute, Pseudo-class .menu { }, :hover 0,0,1,0
5️⃣ Thấp Tag Selector p { }, div { } 0,0,0,1
✅ Best Practices (Cách làm tốt nhất):
  1. Ưu tiên dùng Class selectors (dễ quản lý, tái sử dụng)
  2. Tránh lạm dụng ID selectors (chỉ dùng khi cần độ ưu tiên cao)
  3. Tránh Inline CSS (trừ trường hợp động với JavaScript)
  4. TUYỆT ĐỐI TRÁNH !important nếu có thể
  5. Tổ chức CSS theo thứ tự: Reset → Base → Layout → Components → Utilities
  6. Comment rõ ràng khi cần override styles

🔍 Demo thực tế tổng hợp

<!-- File: index.html -->
<head>
  <link rel="stylesheet" href="base.css">
  <link rel="stylesheet" href="theme.css">
  <style>
    /* Internal CSS */
    .title { color: green; font-size: 24px; }
    #main-title { color: blue; }
    p { line-height: 1.8; }
  </style>
</head>
<body>
  <h1 id="main-title" class="title" style="color: purple;">
    Heading này màu gì?
  </h1>
  
  <p class="description">
    Paragraph này được style như thế nào?
  </p>
</body>
/* base.css */
h1 { color: gray; font-size: 20px; }
p { color: #333; font-size: 16px; }

/* theme.css */
.title { color: orange; font-size: 28px; }
.description { color: navy; }
Kết quả phân tích:

1. <h1> sẽ có:
  • color: purple - Từ Inline CSS (thắng tất cả)
  • font-size: 28px - Từ .title trong theme.css (class thắng tag, file sau thắng file trước)
2. <p> sẽ có:
  • color: navy - Từ .description trong theme.css (class thắng tag)
  • font-size: 16px - Từ p trong base.css
  • line-height: 1.8 - Từ p trong Internal CSS

💬 4. Comments (Chú thích) trong CSS

Comments giúp giải thích code, không ảnh hưởng đến hiển thị.

/* Đây là comment 1 dòng */

/*
  Đây là comment
  nhiều dòng
  rất hữu ích!
*/

/* =========================
   HEADER SECTION
   ========================= */
header {
  background: blue;
  padding: 20px; /* Khoảng cách trong */
}

/* TODO: Thêm responsive sau */
.container {
  width: 1200px;
}
💡 Khi nào dùng comments?
  • Giải thích code phức tạp
  • Chia section cho code dễ đọc
  • Ghi chú việc cần làm (TODO)
  • Tạm thời "tắt" một đoạn CSS (debugging)

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

Bài 1: Tạo trang HTML cơ bản với CSS

  1. Tạo file index.html
  2. Tạo file style.css
  3. Link file CSS vào HTML
  4. Tạo nội dung:
    • 1 thẻ <h1> với text "My First CSS Page"
    • 3 thẻ <p> với đoạn văn bất kỳ
    • 1 thẻ <button> với text "Click Me"
  5. Style trong CSS:
    • h1: màu xanh dương, căn giữa
    • p: font-size 18px, line-height 1.6
    • button: background màu xanh lá, chữ trắng, padding 10px 20px

Bài 2: Thử nghiệm 3 cách thêm CSS

Tạo 1 trang HTML có 3 thẻ <h2>, mỗi thẻ dùng 1 cách CSS khác nhau:

Bài 3: Comments và tổ chức code

Tạo file CSS với ít nhất 3 sections, mỗi section có comment rõ ràng:

💡 Gợi ý code mẫu: 
/* ==================
   RESET CSS
   ================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==================
   HEADER STYLES
   ================== */
header {
  background: #333;
  color: white;
  padding: 20px;
}

/* ==================
   CONTENT STYLES
   ================== */
.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
← Về trang chủ Bài 2: Selectors →