1. CSS dùng để làm gì?
CSS giúp bạn biến trang HTML thô sơ thành một giao diện chuyên nghiệp.
Thay vì chỉ có nền trắng, chữ đen, bạn có thể:
- Đổi màu nền, màu chữ, font chữ
- Căn giữa nội dung, chia cột, canh lề
- Gắn ảnh nền, làm nút đẹp, tạo hiệu ứng khi rê chuột
- Thiết kế cho đẹp trên cả điện thoại và máy tính
2. 3 cách dùng CSS trong HTML
a. Nội tuyến (inline) – dùng trực tiếp trên thẻ
<p style="color: red;">Đây là dòng chữ màu đỏ</p>
→ Cách này chỉ dùng cho ví dụ nhỏ, không nên lạm dụng.
b. Trong thẻ <style> ở phần <head>
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>Đây là dòng chữ màu xanh lá</p>
</body>
</html>
→ Thích hợp cho bài tập nhỏ, demo nhanh.
c. Gắn tệp CSS riêng bằng thẻ <link>
Tạo file style.css:
body {
background-color: #f0f0f0;
font-family: Arial;
}
Tạo file HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>Trang có CSS</title>
</head>
<body>
<p>Đây là trang web có áp dụng CSS</p>
</body>
</html>
→ Đây là cách tốt nhất, chuyên nghiệp nhất, vì dễ tổ chức và tái sử dụng.
3. Ưu nhược điểm 3 cách dùng CSS
| Cách dùng | Ưu điểm | Nhược điểm |
|---|---|---|
| Inline | Nhanh, gọn | Khó quản lý, rối mã |
Thẻ <style> | Tập trung trong 1 file | Vẫn chưa tách riêng |
Tệp .css riêng | Rõ ràng, dễ tái dùng | Phải tổ chức file đúng cách |
4. Ghi nhớ
- Luôn ưu tiên dùng CSS từ tệp riêng (
style.css) - Gắn CSS bằng thẻ
<link>trong phần<head> - Tên file phải chính xác, đường dẫn đúng
5. Bài tập
Tạo một file index.html và một file style.css trong cùng thư mục, viết đoạn sau:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Trang đầu tiên với CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Chào bạn đến với CSS</h1>
<p>Đây là đoạn văn đầu tiên bạn làm đẹp bằng CSS.</p>
</body>
</html>
style.css
body {
background-color: #fff8e1;
font-family: Tahoma, sans-serif;
color: #333;
}
h1 {
color: #d32f2f;
}
Thảo luận