Chúng ta cùng tiếp tục với Bài 3: CSS cơ bản – Box model, màu sắc, layout.
Đây là bài học cực kỳ thú vị, vì bạn sẽ thấy trang web bắt đầu “có hồn” hơn, không còn là những dòng chữ đen trắng nhạt nhẽo nữa.
Trong bài trước, mình và bạn đã cùng nhau viết những dòng HTML đầu tiên để tạo ra khung sườn của một trang web. Nhưng nếu chỉ dừng lại ở đó thì website của chúng ta trông giống như bài văn word thời tiểu học: toàn chữ, không màu, không hình, không bố cục gì cả.
Vậy nên hôm nay, chúng ta sẽ làm điều thú vị hơn: học CSS – thứ sẽ giúp trang web đẹp lên từng ngày, giống như việc mặc quần áo cho bộ xương HTML.
Mục tiêu bài học
- Hiểu CSS là gì, vì sao cần dùng
- Học cách áp dụng CSS vào HTML
- Làm quen với Box Model – nền tảng quan trọng trong layout web
- Biết cách thay đổi màu sắc, font chữ, kích thước
- Thực hành sắp xếp layout bằng display block, inline, inline-block
1. CSS là gì?
CSS viết tắt của Cascading Style Sheets – tạm dịch là “Tập tin định kiểu theo tầng”.
Bạn có thể hiểu đơn giản:
- HTML xây nhà.
- CSS sơn tường, lắp đèn, treo tranh, chọn rèm cửa.
Nhờ CSS, bạn có thể điều chỉnh:
- màu sắc, font chữ
- khoảng cách giữa các phần tử
- vị trí hiển thị (canh trái, giữa, phải…)
- hiệu ứng khi di chuột, nhấn nút, v.v.
2. Cách thêm CSS vào HTML
Có 3 cách chính để thêm CSS:
1. Internal (viết trực tiếp trong file HTML)
<style>
h1 {
color: blue;
font-size: 28px;
}
</style>
Đặt bên trong thẻ <head> của HTML.
2. Inline (viết trực tiếp trong thẻ HTML)
<h1 style="color: red; font-size: 24px;">Tiêu đề đỏ</h1>
Cách này không nên dùng nhiều, vì khó bảo trì và lộn xộn.
3. External (file .css riêng)
Cách tốt nhất và được dùng phổ biến nhất:
- Tạo file
style.css - Kết nối vào HTML bằng:
<link rel="stylesheet" href="style.css" />
3. Cú pháp CSS cơ bản
selector {
property: value;
}
Ví dụ:
p {
color: green;
font-size: 18px;
}
- Selector: chọn đối tượng cần áp dụng (ví dụ:
p,h1,.box,#footer) - Property: thuộc tính (color, background, width…)
- Value: giá trị (red, 24px, center…)
4. Box model – “mô hình chiếc hộp”
Trong CSS, mọi phần tử đều được xem như một chiếc hộp, bao gồm 4 phần:
- Margin là khoảng cách bên ngoài hộp.
- Border là đường viền bao quanh hộp.
- Padding là khoảng cách từ viền vào nội dung.
- Content là phần nội dung thật sự hiển thị.
Ví dụ:
.box {
padding: 20px;
border: 2px solid black;
margin: 10px;
}
5. Màu sắc trong CSS
Bạn có thể dùng:
- Tên màu:
red,blue,green - Mã HEX:
#ff0000,#00ff00 - RGB:
rgb(255, 0, 0) - RGBA (có độ trong suốt):
rgba(255, 0, 0, 0.5)
Ví dụ:
body {
background-color: #f4f4f4;
}
h1 {
color: rgb(0, 128, 255);
}
6. Định dạng chữ
p {
font-size: 16px;
font-family: 'Arial', sans-serif;
font-weight: bold;
text-align: center;
line-height: 1.5;
}
font-size: kích thướcfont-family: kiểu fontfont-weight: độ đậmtext-align: canh giữa, trái, phảiline-height: khoảng cách giữa các dòng
7. Layout cơ bản với display
.box {
display: block; /* mỗi thẻ chiếm 1 dòng */
display: inline; /* nằm cùng dòng, không đặt width/height được */
display: inline-block; /* kết hợp cả 2 */
}
Chúng ta sẽ học Flexbox và Grid để làm layout chuyên nghiệp hơn ở bài sau, nhưng hôm nay bạn nên thử sắp xếp các thẻ div theo kiểu block, inline, và inline-block để cảm nhận sự khác nhau.
8. Thực hành – làm đẹp trang cá nhân
Hãy dùng file HTML ở bài trước (hoặc tạo mới), sau đó tạo thêm file style.css và liên kết với HTML:
<head>
<link rel="stylesheet" href="style.css" />
</head>
Sau đó thử thêm các đoạn CSS sau:
body {
background-color: #fdf6e3;
font-family: sans-serif;
color: #333;
padding: 20px;
}
h1 {
color: #2c3e50;
}
ul {
background-color: #ecf0f1;
padding: 10px;
border-radius: 8px;
}
li {
margin-bottom: 5px;
}
Bạn sẽ thấy sự khác biệt rõ rệt: trang web trông hiện đại và dễ nhìn hơn rất nhiều!
9. Bài tập thực hành
- Tạo file
profile.htmlvàstyle.css - Trong HTML:
- Viết tên, sở thích, kỹ năng
- Dùng các thẻ:
h1,p,ul,li,a,img
- Trong CSS:
- Đổi màu nền, chữ
- Căn giữa tiêu đề
- Làm danh sách có khung bo tròn
- Thêm padding, margin hợp lý
Bonus:
- Dùng
:hoverđể tạo hiệu ứng khi rê chuột vào ảnh hoặc link
Kết bài – từ khung xương đến da thịt
Vậy là hôm nay bạn đã “mặc quần áo” cho trang web của mình bằng CSS rồi!
Trang web bây giờ đã có màu sắc, cấu trúc rõ ràng, và cảm giác “xịn” hơn rất nhiều so với bài trước.
Trong bài tiếp theo, chúng ta sẽ học cách bố cục nội dung linh hoạt và hiện đại hơn bằng cách sử dụng Flexbox và Grid layout – những công cụ cực kỳ mạnh mẽ giúp bạn sắp xếp mọi thứ gọn gàng mà không cần đau đầu.
Hẹn gặp bạn ở Bài 4: CSS nâng cao – Flexbox, Grid layout, bài học sẽ khiến bạn thấy CSS “thông minh” hơn bạn tưởng rất nhiều!
Thảo luận