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.
Nếu HTML là bộ khung xương của ngôi nhà, thì CSS là phần nội thất và trang trí. Màu tường, kiểu gạch lát, rèm cửa — tất cả do CSS quyết định.
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 đẹp mắt.
Mối quan hệ HTML và CSS
HTML và CSS luôn đi cùng nhau:
- HTML = Hiển thị cái gì (cấu trúc)
- CSS = Hiển thị như thế nào (kiểu dáng)
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ý — 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ị
<!-- File HTML -->
<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 dễ quản lý hơn.
Cú pháp CSS cơ bản
/* Bộ chọ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ử — 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:
- Content — Nội dung (chữ, ảnh)
- Padding — Khoảng đệm giữa nội dung và viền
- Border — Viền
- Margin — Khoảng cách bên ngoài viền
.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; }
/* Bây giờ padding và border nằm trong width */Thực hành: Thêm CSS cho trang HTML
/* style.css — Trang giới thiệu bản thân */
* {
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 (FAQ)
Hỏi: Học CSS có khó không?
Trả lời: Cú pháp cơ bản rất dễ. Phần khó hơn là layout (Flexbox, Grid) và responsive design — cần luyện tập nhiều.
Hỏi: Có nên dùng CSS framework không?
Trả lời: Nên hiểu CSS thuần trước, sau đó mới học Bootstrap hoặc Tailwind CSS.
Bước tiếp theo
- Học Flexbox — Căn chỉnh layout dễ dàng → Flexbox CSS: Hướng dẫn căn chỉnh layout
- Ôn lại HTML → HTML là gì? Hướng dẫn cơ bản
