SaigonTech Vault
Loại: knowledge-doc 2026-09-29 active #wiki-import

Tìm hiểu về CSS

1. Khái niệm

  • CSS (Cascading Style Sheets) là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi HTML.
  • Nếu xem HTML đóng vai trò định dạng các phần tử (element) trên web thì CSS giúp cho các phần tử này thay đổi bố cục, màu sắc, cỡ chữ,...
  • Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tag name, id, class hay nhiều kiểu khác. Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó.

Refer: https://www.w3schools.com/css/default.asp

2. Syntax

  • Mã CSS có thể viết được ở nhiều vị trí:
  • Viết trong file CSS
  • Viết trong thẻ header

  • Viết inline vào element

  • Syntax:

With class name:

.{class} {
    {property style}: {value};
    ...
}

With id:

#{id} {
    {property style}: {value};
    ...
}

3. Example

4. Exercise

Ex1: about text

Tạo 1 dòng chữ có nội dung "Đây là CSS về text" - Define cho dòng chữ ở trên sau: + Màu chữ với mã hex #FB0303 + Kích thước 18 pixel + Gạch dưới chân dòng chữ + In nghiêng + Chỉnh độ in đậm 500 + Font chữ google Sofia (link: https://fonts.googleapis.com/css?family=Sofia) + Vẽ border xung quanh dòng chữ với độ dày 3 pixel + Khoảng cách bên trong border (top: 20px, left: 40px, bottom: 40px, right: 35px)

Ex2: about layout

Thiết kế màn hình như hình bên dưới

<!DOCTYPE HTML>
<html>
<head>
<style>
.container {
    width: 100%;
    height: 240px;
    background: yellow;
}

.yellow {
    background: yellow;
    border-bottom: 1px solid;
    height: 30px;
}

.row {
    display: flex;
    height: 170px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.center {
    justify-content: center;
}

.green {
    background: green;
}

.purple {
    background: purple;
}

.blue {
    background: blue;
}

.red {
    background: red;
    height: 50%;
    width: 50%;
}

.col {
    width: 30%;
    text-align: center;
    text-align: -webkit-center;
}

.col-center {
    width: 30%;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    align-self: center;
    margin-left: 10px;
    margin-right: 10px;
}

</style>

</head>
<body>

<div class="container">
    <div class="yellow">Yellow</div>
    <div class="row center">
      <div class="col green">
        <div class="red"></div>
      </div>
      <div class="col-center purple">
        <div>Center</div>
      </div>
      <div class="col blue">
        <div>Section right</div>
      </div>
    </div>
</div>

</body>
</html>

Ex3: about effect

Xử lý hover cho button: - Màu nền mặc định: blue - Màu nền khi hover: red

Xử lý animation: - Chuyển đổi màu nền từ "red" sang "yellow" trong 4s

Xử lý transitions: - Thay đổi độ rộng của tag "div" khi hover từ 100px -> 300px trong 2s

Ex4: about drag and drop

Ex5: about responsive

Khi thiết kế UI (giao diện người dùng) có 2 mod thường được sử dụng: 1. Mobile first: - Thiết kế từ màn hình mobile -> tablet -> desktop. - Thực hiện phương án này thường là doanh nghiệp ưu tiên hướng tới người dùng sử dụng điện thoại.

  1. Desktop first: thiết kế từ màn hình desktop -> tablet -> mobile.

Library and framework for CSS

Boostrap

MD Boostrap

Tailwind

Vuetify

Semantic

Refer: https://semantic-ui.com/

Material UI (MUI)