CSS: Giới thiệu về CSS

Định nghĩa

CSS (Cascading Style Sheets) được sử dụng để thiết kế và thay đổi giao diện của trang HTML. Việc tách biệt hoàn toàn giữa nội dung (HTML) và phong cách (CSS) giúp chúng ta quản lý, bảo trì và tái sử dụng dễ dàng hơn. Khi sử dụng CSS, chúng ta cần chú ý ba thành phần chính:

Selectors

Selector là đối tượng HTML mà bạn muốn áp dụng quy tắc thiết kế. Selector có thể là thẻ, lớp (class), ID, hay thậm chí là các nhóm kết hợp phức tạp để nhắm chính xác vào phần tử cần thiết.

Properties

Property (thuộc tính) là khía cạnh của phần tử HTML mà bạn muốn thay đổi, ví dụ như màu sắc, kích thước phông chữ, lề (margin) hay padding, v.v.

Values

Value (giá trị) là giá trị bạn gán cho thuộc tính. Ví dụ: màu “blue”, kích thước chữ “16px”, lề “10px”, v.v. Mỗi property sẽ chấp nhận một số giá trị nhất định (như màu, số, đơn vị px, %, em, v.v.).

Cấu Trúc Cơ Bản Của CSS

Mỗi quy tắc CSS (CSS rule) bao gồm ba phần chính để xác định nơi và cách áp dụng:

Bộ chọn (Selector)

Xác định phần tử HTML mà bạn muốn tạo kiểu. Ví dụ: h1, p, .container, #main-header, v.v.

Thuộc tính (Property)

Xác định yếu tố nào của phần tử cần thay đổi, ví dụ:

color (màu chữ)
background-color (màu nền)
font-size (kích thước phông chữ)
margin, padding (khoảng cách)
display, position (cách phần tử hiển thị)

Giá trị (Value)

Giá trị bạn gán cho thuộc tính, ví dụ:

"blue" cho color
"#f0f0f0" cho background-color
"24px" cho font-size
"10px 20px" cho margin

Ví dụ một quy tắc CSS hoàn chỉnh:


h1 {
  color: blue;
  font-size: 24px;
  margin-bottom: 10px;
}

Các Chức Năng Chính của CSS

CSS không chỉ đơn giản là đổi màu hay kích thước chữ, mà còn cung cấp rất nhiều tính năng để xây dựng trang web linh hoạt, chuyên nghiệp và thân thiện với người dùng.

Bố cục (Layout)

CSS định hình cách các phần tử HTML như tiêu đề, chân trang, thanh điều hướng, hay khung nội dung được sắp xếp. Các công cụ thường dùng:

Flexbox: Giúp sắp xếp phần tử theo hàng hoặc cột, dễ dàng căn chỉnh và phân phối khoảng trống.
Grid Layout: Cho phép tạo lưới hai chiều, rất mạnh mẽ để thiết kế bố cục phức tạp.
Position (static, relative, absolute, fixed, sticky): Điều khiển cách phần tử định vị so với vùng chứa.

Màu sắc (Colors)

CSS kiểm soát đầy đủ các khía cạnh màu sắc, tạo nên sự thống nhất về thương hiệu và tính thẩm mỹ:

color: Màu chữ.
background-color: Màu nền cho thẻ (block hoặc inline).
Có thể sử dụng: tên màu (như “red”, “blue”), mã HEX (như “#333333”), mã RGB/rgba hoặc HSL.

Phông chữ (Fonts)

CSS cho phép bạn lựa chọn loại phông chữ, kích thước, độ đậm/nhạt, phong cách… Ví dụ:

font-family: “Arial, sans-serif”.
font-size: “16px”, “1rem”, “1.2em”.
font-weight: “normal”, “bold”, hoặc giá trị số (300, 400, 700…).
font-style: “normal”, “italic”.
line-height: Khoảng cách giữa các dòng (ví dụ “1.5”).

Khoảng cách (Spacing)

CSS quản lý khoảng cách giữa các phần tử nhằm đảm bảo giao diện gọn gàng, dễ nhìn:

margin: Khoảng cách bên ngoài của phần tử (ngoài biên).
padding: Khoảng cách bên trong phần tử (từ biên vào nội dung).
border: Có thể kết hợp với margin, padding để tạo hiệu ứng viền, khoảng cách.

Truy vấn phương tiện (Media Queries)

Giúp thiết kế responsive – tự động điều chỉnh kiểu dáng dựa trên kích thước màn hình (điện thoại, máy tính bảng, desktop). Ví dụ:


@media (max-width: 768px) {
  /* Các quy tắc CSS áp dụng khi màn hình ≤ 768px */
  .container {
    flex-direction: column;
    padding: 10px;
  }
}

Các Loại Bộ Chọn Trong CSS

Việc lựa chọn đúng “selector” giúp bạn điều khiển chính xác phần tử cần tạo kiểu, giảm thiểu trùng lặp và đảm bảo hiệu suất.

Bộ chọn phần tử (Element Selector)

Nhắm vào tất cả các phần tử có cùng tên thẻ. Ví dụ:


h1 {
  color: red;
}

=> Tất cả các thẻ <h1> trong trang sẽ có màu đỏ.

Bộ chọn lớp (Class Selector)

Nhắm vào tất cả phần tử có cùng một lớp. Lớp bắt đầu với dấu chấm (.). Ví dụ:


.intro {
  font-size: 20px;
  color: #2c3e50;
}

=> Tất cả các phần tử có thuộc tính class="intro" sẽ được áp dụng quy tắc trên.

Bộ chọn ID (ID Selector)

Nhắm vào một phần tử duy nhất có ID nhất định. ID bắt đầu với dấu thăng (#). Ví dụ:


#header {
  background-color: green;
  padding: 20px;
}

=> Phần tử có id="header" sẽ có nền xanh lá và padding 20px.

Cách Tạo Kiểu Cho Nhiều Thuộc Tính

Bạn có thể kết hợp nhiều thuộc tính trong một quy tắc để làm phong phú kiểu dáng. Ví dụ:


h1 {
  color: blue;
  font-size: 24px;
  margin-bottom: 10px;
  text-transform: uppercase; /* Chuyển chữ thành chữ IN HOA */
}

Những Gì CSS Có Thể Làm

CSS có khả năng thay đổi gần như mọi khía cạnh hiển thị của trang web, từ màu sắc đến bố cục, từ hoạt ảnh cho đến tương tác.

Thay đổi nền và màu chữ

Ví dụ:


body {
  background-color: #f0f0f0; /* Màu nền xám nhạt */
}

h1 {
  color: #333333; /* Màu chữ xám đậm */
}

Kết quả: toàn bộ nền trang chuyển sang màu xám nhạt, và các tiêu đề <h1> có màu xám đậm, dễ đọc.

Tạo kiểu cho đoạn văn

Bạn có thể chọn phông chữ, kích thước, độ đậm nhạt, khoảng cách giữa các dòng... Ví dụ:


p {
  font-family: Arial, sans-serif; /* Phông chữ Arial */
  font-size: 16px;                /* Kích thước chữ 16px */
  font-weight: bold;              /* In đậm chữ */
  line-height: 1.5;               /* Khoảng cách giữa các dòng */
  color: #555;                    /* Màu chữ xám vừa */
}

Đoạn văn sẽ trở nên dễ đọc, chuyên nghiệp và phù hợp với phong cách tổng thể.

Sắp xếp bằng Flexbox

Flexbox là công cụ mạnh mẽ giúp sắp xếp và phân phối không gian giữa các phần tử một cách linh hoạt. Ví dụ, tạo một khu vực chứa hai phần tử nằm ngang, đều khoảng cách:


.container {
  display: flex;
  justify-content: space-between; /* Phân chia đều khoảng trống giữa các phần tử */
  align-items: center;            /* Căn giữa theo trục dọc */
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #ccc;
}

.box {
  width: 45%;
  padding: 10px;
  background-color: #e74c3c;
  color: #fff;
  text-align: center;
}

Trong ví dụ trên, .container chứa hai .box nằm cạnh nhau, chiếm đều không gian còn lại, căn giữa theo chiều dọc. Điều này rất hữu ích khi xây dựng thanh điều hướng, gallery ảnh hay các section phân chia rõ ràng.

Thêm CSS Vào HTML

Có ba cách chính để đưa CSS vào tài liệu HTML: External, Internal, và Inline. Mỗi phương pháp có ưu, nhược riêng và tùy vào ngữ cảnh sẽ chọn cách phù hợp.

Tệp CSS Ngoài (External CSS)

Đây là cách phổ biến nhất: viết tất cả quy tắc CSS trong một tệp rời, ví dụ styles.css, rồi liên kết vào phần <head> của HTML:


<!-- Trong tệp HTML (index.html) -->
<head>
  <meta charset="UTF-8">
  <title>>Trang Chủ</title>
  <link rel="stylesheet" href="styles.css">
</head>

Trong styles.css, bạn viết các quy tắc:


body {
  margin: 0;
  padding: 0;
  background-color: #fafafa;
}

h1 {
  color: #2c3e50;
  font-size: 28px;
}

Ưu điểm:

Dễ quản lý và tái sử dụng cho nhiều trang HTML khác nhau.
Khi cần thay đổi phong cách chung, chỉ cần chỉnh trong styles.css, hiện tại tự động cập nhật toàn site.
Giúp tách rõ nội dung (HTML) và phong cách (CSS), tăng tính chuyên nghiệp.

CSS Nội Bộ (Internal CSS)

Viết CSS bên trong thẻ <style> ngay trong phần <head> của tài liệu HTML. Phù hợp khi bạn muốn tạo phong cách riêng biệt chỉ cho trang này, nhưng không dùng chung cho trang khác.


<!-- Trong tệp HTML (page.html) -->
<head>
  <meta charset="UTF-8">
  <title>>Trang Giới Thiệu</title>
  <style>
    h1 {
      color: blue;
    }
    p {
      color: #555;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Chào Mừng Đến Vivavoy Learning</h1>
  <p>Đây là ví dụ về CSS nội bộ.</p>
</body>

Ưu điểm:

Dễ sửa đổi nhanh chóng, phù hợp khi chỉ cần tạo kiểu cho duy nhất một trang.
Không cần tạo file rời, tiết kiệm thời gian giai đoạn phát triển nhỏ.

CSS Nội Tuyến (Inline CSS)

Viết CSS ngay trong thẻ HTML thông qua thuộc tính style. Thường dùng khi bạn muốn thay đổi duy nhất một phần tử mà không ảnh hưởng đến các phần tử khác. Ví dụ:


<h1 style="color: red; font-size: 30px;">Hello World</h1>
<p style="color: #888; font-weight: bold;">Đoạn văn này sẽ có màu xám đậm và in đậm.</p>

Ưu điểm:

Nhanh chóng, không cần chỉnh file CSS bên ngoài hay trong <head>.
Phù hợp khi bạn cần áp dụng ngay một kiểu độc lập, ví dụ highlight tạm một dòng chữ.

Lưu ý: Dùng quá nhiều inline CSS có thể làm mã HTML lộn xộn, khó bảo trì. Nên ưu tiên External hoặc Internal khi có thể.

Kết Luận

CSS là công cụ mạnh mẽ, không thể thiếu khi xây dựng giao diện website chuyên nghiệp. Thông qua việc hiểu rõ cấu trúc cơ bản (selector, property, value), nắm bắt chức năng (layout, màu sắc, phông chữ, spacing, responsive) và cách đưa CSS vào HTML (external, internal, inline), bạn có thể tự tin tạo ra các giao diện đẹp mắt, thân thiện với người dùng trên mọi thiết bị.

Hãy áp dụng ngay các ví dụ mẫu ở trên, thực hành chỉnh sửa và thử nghiệm để nâng cao kỹ năng CSS. Khi bạn đã thành thạo, việc xây dựng một website như Vivavoy với thiết kế ấn tượng, chuyên nghiệp sẽ trở nên dễ dàng và hiệu quả hơn rất nhiều.