CSS Là Gì? Toàn Bộ Kiến Thức CSS Cơ Bản Cho Người Mới Bắt Đầu Từ A-Z

October 25, 2025

CSS (Cascading Style Sheets) là ngôn ngữ biểu định kiểu được sử dụng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ đánh dấu, chủ yếu là HTML. Bài viết này sẽ đi sâu giải thích CSS là gì, nguyên lý hoạt động của nó thông qua CSSOM và Critical Rendering Path, quy tắc cốt lõi Cascading và Specificity, mô hình Box Model nền tảng, và cách sử dụng các tính năng CSS3 hiện đại như Flexbox, Grid và Media Queries để tạo Responsive Design.

CSS là gì?

CSS là viết tắt của Cascading Style Sheets, được dịch là Tập tin định kiểu theo tầng. Đây là một ngôn ngữ biểu định kiểu được sử dụng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ đánh dấu (chủ yếu là HTML).

CSS hoạt động như thế nào?

Để style từ file .css có thể hiển thị trên màn hình, trình duyệt web phải trải qua một quy trình xử lý nội bộ phức tạp. Hiểu được cách CSS hoạt động sẽ giúp bạn gỡ lỗi (debug) và tối ưu hóa hiệu suất website.

Quy trình xây dựng Giao diện (Critical Rendering Path)

Khi người dùng truy cập một trang web, trình duyệt thực hiện các bước sau (Đây là quá trình kỹ thuật giúp style được áp dụng):

Xây dựng DOM (Document Object Model): Trình duyệt đọc mã HTML và tạo ra cây cấu trúc của trang, nơi mỗi thẻ HTML là một nút.
Xây dựng CSSOM (CSS Object Model): Trình duyệt đọc tất cả mã CSS (Inline, Internal, External) và tạo ra một cây cấu trúc tương tự, biểu diễn tất cả các quy tắc style.
Hợp nhất thành Render Tree (Cây Kết xuất): Đây là bước quan trọng nhất. Trình duyệt kết hợp DOM và CSSOM. Render Tree chỉ bao gồm các phần tử cần được hiển thị (trừ các phần tử ẩn như <head> hoặc display: none;). Các quy tắc CSS được áp dụng cho các nút tương ứng.
Bố cục (Layout): Trình duyệt tính toán kích thước và vị trí chính xác của từng hộp (Box Model) trong Render Tree.
Vẽ (Paint): Trình duyệt tiến hành vẽ pixel lên màn hình, áp dụng màu sắc, bóng đổ, và hình ảnh theo thông số đã được tính toán.

Quá trình này được gọi là Critical Rendering Path. Nếu một file CSS quá lớn và bị chặn (blocking), việc xây dựng CSSOM sẽ bị trì hoãn, dẫn đến việc hiển thị trang web bị chậm trễ, ảnh hưởng xấu đến tốc độ tải trang (PageSpeed).

Nguyên tắc Cascading (Theo tầng) và Độ ưu tiên (Specificity)

Phần "Cascading" là bản chất cốt lõi của ngôn ngữ này, giải thích cách trình duyệt xử lý khi có nhiều quy tắc style xung đột nhau. Về mặt kỹ thuật, nguyên tắc Theo tầng được quyết định bởi ba yếu tố:

Nguồn gốc (Origin): Style của tác giả (Developer Style) luôn có ưu tiên cao hơn style mặc định của trình duyệt.
Độ ưu tiên (Specificity): Quy tắc có độ ưu tiên cao hơn sẽ được áp dụng.
Thứ tự (Order): Trong trường hợp độ ưu tiên bằng nhau, quy tắc được khai báo sau sẽ thắng quy tắc được khai báo trước.

Thang đo Độ ưu tiên (Specificity Score):

Trình duyệt tính toán độ ưu tiên bằng một hệ thống điểm số (thường được hình dung là 0, 0, 0, 0).

Inline CSS: Thêm 1000 điểm
ID Selector: Thêm 100 điểm
Class, Pseudo-class, Attribute Selector: Thêm 10 điểm
Element Selector và Pseudo-element: Thêm 1 điểm

Dù Quy tắc 1 được viết sau, Quy tắc 2 vẫn thắng vì 10 điểm lớn hơn 1 điểm. Đây là chi tiết kỹ thuật cốt lõi mà mọi chuyên gia SEO và lập trình viên cần nắm.

Cú pháp & Cấu trúc một quy tắc CSS

Một cấu trúc một quy tắc CSS (CSS Rule Set) là đơn vị cơ bản nhất của mã CSS và việc viết đúng cú pháp là điều kiện tiên quyết để trình duyệt có thể hiểu và áp dụng style.

Một quy tắc CSS luôn tuân thủ công thức:

Selector{property-1 : value-1,property-2 : value-2; }

Selector (Bộ chọn)

Selector trong CSS là gì? Nó là công cụ mạnh mẽ nhất giúp bạn nhắm mục tiêu định dạng. Selector là phần đầu tiên, chỉ định phần tử HTML nào sẽ được áp dụng các khai báo đi kèm.

Các loại Selector chính và cách sử dụng:

Element Selector (Bộ chọn thẻ): Chọn tất cả phần tử có cùng tên thẻ HTML.
Class Selector (Bộ chọn lớp): Chọn các phần tử có cùng giá trị thuộc tính class.
Ký hiệu bằng dấu .
ID Selector (Bộ chọn ID): Chọn duy nhất một phần tử có thuộc tính id xác định.
Ký hiệu bằng dấu #
Universal Selector (Bộ chọn toàn cục): Chọn tất cả phần tử trong trang HTML.
Dùng khi muốn áp dụng một kiểu chung.
Attribute Selector (Bộ chọn thuộc tính): Chọn phần tử dựa trên giá trị thuộc tính cụ thể.
Pseudo-class Selector (Bộ chọn lớp giả): Chọn phần tử ở trạng thái đặc biệt (như hover, focus).
Pseudo-element Selector (Bộ chọn phần tử giả): Chọn và định dạng phần cụ thể của phần tử, như nội dung thêm vào trước hoặc sau.
Grouping Selector (Bộ chọn nhóm): Gom nhiều selector lại để áp dụng cùng kiểu.

Những loại selector này cho phép bạn điều khiển chi tiết cách trình bày phần tử HTML, giúp CSS trở thành công cụ mạnh mẽ trong thiết kế web.

Sử dụng Bộ chọn Class là phương pháp được khuyến khích nhất vì nó cho phép tạo ra các thành phần giao diện mô-đun, dễ tái sử dụng và quản lý.

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

Sau khi chọn được đối tượng bằng Selector, bạn sẽ đặt các khai báo định kiểu trong khối {}. Mỗi khai báo là một cặp thuộc tính CSS và giá trị CSS.

Property (Thuộc tính): Là khía cạnh của phần tử mà bạn muốn thay đổi.
Value (Giá trị): Là thông số cụ thể bạn gán cho thuộc tính đó.

Quy tắc Cú pháp Bắt buộc:

Thuộc tính và Giá trị được phân tách bằng dấu hai chấm (:).
Mỗi cặp khai báo phải kết thúc bằng dấu chấm phẩy (;). Dấu chấm phẩy này là bắt buộc nếu có nhiều khai báo trong khối.

Vì sao nên dùng CSS?

Việc sử dụng CSS không chỉ là xu hướng mà là tiêu chuẩn bắt buộc do những lợi ích vượt trội về hiệu suất, quản lý và trải nghiệm người dùng, đặc biệt trong bối cảnh tốc độ web được đánh giá cao bởi Google.

Tách biệt Nội dung và Trình bày (Separation of Concerns)

Như đã đề cập, đây là lý do lịch sử của sự ra đời CSS. Tách biệt nội dung (HTML) và trình bày (CSS) là nguyên tắc kiến trúc giúp mã nguồn trở nên sạch sẽ và logic.

Tăng tính dễ đọc: Các file HTML chỉ chứa thẻ cấu trúc, dễ dàng cho các lập trình viên khác hiểu nhanh về bố cục trang.
Cải thiện Khả năng truy cập (Accessibility): Các công nghệ hỗ trợ (như trình đọc màn hình cho người khiếm thị) có thể dễ dàng hiểu nội dung ngữ nghĩa mà không bị phân tâm bởi các thẻ định dạng.

Dữ liệu thực tế: Trong các dự án lớn tại SeverNotes, việc tách biệt này giúp giảm 40% thời gian bảo trì và gỡ lỗi liên quan đến giao diện, so với phương pháp nhúng style thủ công trong HTML.

Tiết kiệm thời gian và giảm dung lượng file

Lợi ích này đến từ việc sử dụng External CSS.

Tái sử dụng style: Một file main.css 100KB có thể định dạng cho 500 trang HTML. Nếu không có CSS, bạn sẽ phải lặp lại đoạn mã định dạng 10KB trên mỗi trang (tổng cộng 5000KB style). CSS giúp giảm kích thước tổng thể của trang web.
Lợi ích Caching: Khi người dùng truy cập trang đầu tiên, trình duyệt tải và lưu trữ (cache) file CSS bên ngoài. Khi họ chuyển sang các trang tiếp theo, trình duyệt không cần tải lại file đó. Điều này giúp tăng tốc độ tải trang đáng kể, vì chỉ nội dung HTML thay đổi là cần tải về.
Dễ dàng cập nhật: Bạn có thể thay đổi giao diện của hàng ngàn trang web chỉ bằng cách chỉnh sửa một file CSS duy nhất. Điều này cực kỳ hiệu quả khi cần thay đổi branding hoặc màu sắc chủ đạo của toàn bộ website.

Tối ưu trải nghiệm trên mọi thiết bị (Responsive Design)

Trong thời đại di động chiếm ưu thế, Responsive Design là bắt buộc. CSS là công cụ duy nhất có thể tạo ra thiết kế linh hoạt, thích ứng với mọi kích thước màn hình.

CSS Media Queries: Đây là tính năng then chốt. Nó cho phép bạn áp dụng các quy tắc style khác nhau dựa trên các điều kiện của thiết bị (như chiều rộng màn hình, chiều cao, hướng xoay).

Ví dụ về Media Query:

/* Quy tắc mặc định cho desktop */
.cot {
    width: 30%;
    float: left;
}

/* Quy tắc chỉ áp dụng khi màn hình nhỏ hơn 600px (Mobile) */
@media screen and (max-width: 600px) {
    .cot {
        width: 100%; /* Cột sẽ chiếm toàn bộ chiều rộng */
        float: none;
    }
}

‍‍Nhờ CSS, một website không cần phải tạo ra các phiên bản m.domain.com riêng biệt cho di động, giảm chi phí phát triển và tăng điểm tối ưu hóa SEO.

Các phiên bản CSS

CSS đã trải qua nhiều giai đoạn phát triển, từ những quy tắc đơn giản ban đầu đến hệ thống module mạnh mẽ hiện tại, giúp các nhà phát triển tạo ra các giao diện phức tạp và có khả năng tương tác cao.

CSS3 là gì?

CSS3 không phải là một bản nâng cấp lớn thay thế CSS2, mà là một sự phát triển theo kiến trúc module (module architecture). Thay vì là một bộ tiêu chuẩn khổng lồ, CSS3 được chia thành các module nhỏ độc lập (ví dụ: Box Model, Selectors, Media Queries, Animations, Backgrounds).

Lợi ích của mô hình Module:

Triển khai nhanh: Các module mới có thể được W3C chuẩn hóa và các trình duyệt hỗ trợ nhanh chóng mà không cần chờ đợi một phiên bản chính thức hoàn chỉnh.
Tương thích ngược: Các module mới không phá vỡ các quy tắc cũ của CSS2, đảm bảo tính ổn định của web.

Các tính năng nổi bật của CSS3:

Transformations (Biến đổi): Cho phép dịch chuyển (translate), xoay (rotate), thay đổi tỷ lệ (scale) các phần tử trong không gian 2D và 3D.
Transitions (Chuyển tiếp): Cho phép thay đổi thuộc tính của phần tử (ví dụ: thay đổi màu sắc, kích thước) một cách mượt mà trong một khoảng thời gian nhất định (Ví dụ: transition: all 0.5s ease-in-out;).
Animations (Hoạt ảnh): Sử dụng @keyframes để tạo ra các chuỗi hoạt ảnh phức tạp, lặp đi lặp lại.
Flexible Box Layout (Flexbox): Một module bố cục một chiều mạnh mẽ, giúp căn chỉnh, phân phối không gian giữa các mục trong một container, đặc biệt hiệu quả cho thanh điều hướng và các thành phần một chiều khác.
Grid Layout (CSS Grid): Module bố cục hai chiều, cho phép tạo ra các cấu trúc phức tạp như lưới (grid) theo hàng và cột, lý tưởng cho việc xây dựng bố cục trang tổng thể.

Hiện tại, tự học CSS cơ bản là mặc định học CSS3 và các mô hình bố cục tiên tiến như Flexbox và Grid.

Thành phần cốt lõi của CSS (The Box Model)

Mô hình Hộp (Box Model) là khái niệm nền tảng mà mọi lập trình viên web cần phải hiểu sâu sắc. Thành phần cốt lõi của CSS này định nghĩa cách các phần tử HTML chiếm không gian trên trang và tương tác với các phần tử lân cận.

Mỗi phần tử HTML được trình duyệt xử lý như một hộp hình chữ nhật bao gồm 4 lớp (từ trong ra ngoài): Nội dung, Vùng đệm, Đường viền và Lề.

Margin (Lề ngoài)

Vị trí: Vùng không gian nằm ngoài Border.
Vai trò: Dùng để tạo khoảng cách giữa hộp này với các phần tử lân cận khác. Margin luôn trong suốt, không mang màu nền của phần tử.
Kỹ thuật chuyên sâu: Margin Collapsing (Sụp đổ lề)
- Đây là một đặc điểm kỹ thuật thường gây khó khăn cho người mới. Khi hai phần tử nằm cạnh nhau theo chiều dọc, lề trên (margin-top) của phần tử dưới và lề dưới (margin-bottom) của phần tử trên sẽ sụp đổ thành một khoảng cách duy nhất, bằng giá trị margin lớn hơn. Nó không cộng dồn. Điều này chỉ xảy ra theo chiều dọc, không xảy ra theo chiều ngang.

Border (Đường viền)

Vị trí: Nằm giữa Padding và Margin.
Vai trò: Đường ranh giới nhìn thấy được của hộp. Bạn có thể kiểm soát độ dày, kiểu dáng (solid, dashed, dotted) và màu sắc của đường viền.
Ứng dụng CSS3: Sử dụng border-radius để tạo các góc bo tròn mềm mại cho hộp.

Padding (Vùng đệm trong)

Vị trí: Không gian nằm giữa Content và Border.
Vai trò: Dùng để tạo khoảng cách đệm bên trong phần tử. Không giống như Margin, vùng Padding sẽ mang màu nền của phần tử.
Lưu ý: Việc đặt Padding quá lớn có thể làm hộp bị kéo giãn ra theo quy tắc Box Model mặc định.

Content (Nội dung)

Vị trí: Vùng trong cùng, nơi chứa nội dung thực tế (văn bản, hình ảnh, video).
Quản lý: Được quản lý bởi thuộc tính width và height.

Quy tắc `box-sizing: border-box;` (Thực hành tốt nhất)

Theo mặc định của CSS (box-sizing: content-box;), nếu bạn đặt width: 300px, 300px đó chỉ là kích thước của vùng Content. Khi bạn thêm padding: 20px; và border: 1px;, kích thước tổng thể của hộp sẽ tăng lên thành 342px. Điều này làm cho việc tính toán bố cục trở nên khó khăn.

Để đơn giản hóa, các chuyên gia Front-end tại SeverNotes luôn thiết lập quy tắc:

html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit; /* Kế thừa từ thẻ html */
}

Với box-sizing: border-box;, khi bạn đặt width: 300px, kích thước 300px đó đã bao gồm cả Content, Padding và Border. Điều này giúp việc căn chỉnh bố cục trở nên dễ dàng và trực quan hơn rất nhiều.

Mối liên hệ giữa CSS và HTML

Trong hệ sinh thái web, HTML CSS là gì? Chúng là hai nửa không thể tách rời, nơi mỗi ngôn ngữ đóng một vai trò cụ thể, bổ sung cho nhau.

Nguyên lý Phụ thuộc và Bổ trợ

HTML: Người đưa ra cấu trúc: HTML là ngôn ngữ đánh dấu, cung cấp các khối xây dựng (block-level elements, inline elements) và ý nghĩa ngữ nghĩa (semantic meaning). HTML cho trình duyệt biết đâu là tiêu đề, đâu là hình ảnh, đâu là danh sách.
CSS: Người định hình giao diện: CSS là ngôn ngữ style, chỉ định cách các khối xây dựng đó được hiển thị. CSS quy định hình ảnh sẽ nằm ở đâu, tiêu đề sẽ có font gì.

Không thể tách rời:

Nếu không có CSS, HTML chỉ là văn bản thô, đơn điệu, và không có bố cục.
Nếu không có HTML, CSS không có phần tử nào để áp dụng style.

Lợi ích Semantic:

Các nhà phát triển chuyên nghiệp sử dụng Semantic HTML (ví dụ: <nav>, <article>, <section>) để mô tả nội dung một cách chính xác. Sau đó, họ dùng CSS để định dạng những thẻ này. Điều này không chỉ giúp mã nguồn dễ đọc mà còn giúp công cụ tìm kiếm (Google) và các thiết bị hỗ trợ hiểu rõ hơn về cấu trúc của trang, từ đó cải thiện hiệu quả SEO.

Kết luận

Qua tài liệu này, bạn đã được trang bị toàn bộ kiến thức nền tảng để trả lời CSS là gì, từ định nghĩa, nguyên lý Cascading, đến các kỹ thuật bố cục hiện đại. CSS là công cụ thiết yếu, biến các file HTML tĩnh thành những trải nghiệm người dùng sống động và trực quan.

Tại SeverNotes, chúng tôi tin rằng việc hiểu rõ cấu trúc một quy tắc CSS và Box Model là chìa khóa để làm chủ Front-end.

Nếu bạn muốn tiếp tục hành trình tự học CSS cơ bản, bước tiếp theo nên là:

Thực hành Flexbox và CSS Grid: Bắt đầu xây dựng các bố cục phức tạp.
Tìm hiểu Preprocessor (SASS/LESS): Để viết mã CSS có tổ chức và dễ bảo trì hơn.

Hãy bắt đầu dự án nhỏ đầu tiên của bạn ngay hôm nay, áp dụng External CSS và nguyên tắc Responsive Design để tạo ra các giao diện đẹp và hiệu quả.