CSS là gì? Cách tạo style cho trang web từ cơ bản đến thực hành

CSS biến trang HTML trắng bệch thành giao diện đẹp mắt. Nếu HTML là bộ khung xương, CSS là phần trang trí nội thất — màu sắc, font chữ, bố cục, mọi thứ bạn nhìn thấy trên trang web đều do CSS quyết định.

CSS là gì?

Định nghĩa CSS đơn giản

CSS là viết tắt của Cascading Style Sheets — Bảng kiểu xếp chồng. CSS dùng để tạo giao diện cho trang web: màu sắc, font chữ, bố cục, khoảng cách.

Không có CSS, trang HTML chỉ là nền trắng với chữ đen nhàm chán. Thêm CSS vào, trang web trở nên sinh động với đầy đủ màu sắc và bố cục chuyên nghiệp.

Mối quan hệ HTML và CSS

HTML và CSS luôn đi cùng nhau — mỗi bên đảm nhiệm một vai trò riêng:

HTML — hiển thị cái gì (cấu trúc nội dung)
CSS — hiển thị như thế nào (kiểu dáng, bố cục)

3 cách viết CSS

1. Inline CSS — viết trực tiếp trong thẻ

<p style="color: red; font-size: 18px;">Đoạn văn màu đỏ</p>

Dễ viết nhưng khó quản lý khi dự án lớn — không khuyến nghị dùng nhiều.

2. Internal CSS — viết trong thẻ style

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

3. External CSS — file riêng (khuyến nghị)

<link rel="stylesheet" href="style.css">

/* style.css */
p {
    color: green;
    font-size: 16px;
}

Đây là cách tiêu chuẩn trong thực tế. Tách biệt HTML và CSS giúp code sạch hơn, dễ bảo trì hơn khi dự án phình to.

Cú pháp CSS cơ bản

/* selector { thuộc tính: giá trị; } */
h1 {
    color: #333333;        /* Màu chữ */
    font-size: 32px;       /* Cỡ chữ */
    text-align: center;    /* Căn giữa */
    margin-bottom: 20px;   /* Khoảng cách phía dưới */
}

Các selector phổ biến

/* Selector phần tử — áp dụng cho tất cả thẻ p */
p { color: black; }

/* Selector class — phần tử có class="highlight" */
.highlight { background-color: yellow; }

/* Selector ID — phần tử có id="header" */
#header { font-size: 24px; }

/* Selector con cháu — thẻ p bên trong div */
div p { margin: 10px; }

Các thuộc tính CSS hay dùng nhất

Màu sắc và font chữ

.vi-du {
    color: #ff6600;                  /* Màu chữ */
    background-color: #f5f5f5;       /* Màu nền */
    font-family: Arial, sans-serif;  /* Font chữ */
    font-size: 16px;                 /* Cỡ chữ */
    font-weight: bold;               /* In đậm */
    line-height: 1.6;                /* Giãn dòng */
}

Khoảng cách — Margin và Padding

.box {
    margin: 20px;        /* Khoảng cách bên ngoài (tất cả hướng) */
    padding: 15px;       /* Khoảng cách bên trong (tất cả hướng) */
    margin-top: 10px;    /* Chỉ phía trên */
    padding-left: 20px;  /* Chỉ bên trái */
}

Viền và bo góc

.card {
    border: 1px solid #ddd;                    /* Viền */
    border-radius: 8px;                        /* Bo góc */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);    /* Đổ bóng */
}

Hiểu về Box Model

Khái niệm quan trọng nhất trong CSS là Box Model. Mọi phần tử HTML đều được xem như một "hộp" gồm 4 lớp từ trong ra ngoài:

Content — nội dung thực (chữ, ảnh)
Padding — khoảng đệm giữa nội dung và viền
Border — viền bao quanh
Margin — khoảng cách với các phần tử khác bên ngoài

.box {
    width: 300px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}
/* Chiều rộng thực tế = 300 + 20*2 + 2*2 + 10*2 = 364px */

/* Mẹo: dùng box-sizing để tính dễ hơn */
* { box-sizing: border-box; }
/* Lúc này padding và border nằm trong width — width luôn là 300px */

Thực hành: Thêm CSS cho trang HTML

Áp dụng những gì đã học, đây là file CSS hoàn chỉnh cho trang giới thiệu bản thân từ bài HTML:

/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
}

h1 {
    color: #2c3e50;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

h2 { color: #2980b9; margin-top: 30px; margin-bottom: 15px; }
ul, ol { padding-left: 25px; }
li { margin-bottom: 8px; }
a { color: #3498db; text-decoration: none; }
a:hover { text-decoration: underline; }

Câu hỏi thường gặp

Học CSS có khó không?
Cú pháp cơ bản rất dễ tiếp thu. Phần thử thách hơn là layout (Flexbox, Grid) và responsive design — cần thực hành nhiều mới nhuần nhuyễn.

Có nên dùng CSS framework không?
Nên nắm CSS thuần trước, sau đó mới học Bootstrap hoặc Tailwind CSS. Hiểu nền tảng sẽ giúp bạn dùng framework hiệu quả hơn nhiều.

Bước tiếp theo

Học Flexbox — căn chỉnh layout linh hoạt và hiện đại → Flexbox CSS: Hướng dẫn căn chỉnh layout
Ôn lại HTML — nền tảng trước khi đi sâu vào CSS → HTML là gì? Hướng dẫn cơ bản