CSS là gì?
CSS là ngôn ngữ dùng để tạo kiểu cho trang web. Nếu HTML quyết định nội dung nào là tiêu đề, đoạn văn hay nút bấm, thì CSS quyết định phần đó có màu gì, cỡ chữ bao nhiêu, cách căn lề ra sao và hiển thị đẹp hay xấu trên màn hình.
Nói ngắn gọn, nếu bạn đang hỏi "CSS là gì", hãy nhớ: HTML là bộ khung, CSS là phần trình bày. Nhờ CSS, một trang web đơn giản có thể trở nên rõ ràng, dễ đọc và chuyên nghiệp hơn rất nhiều.
Cú pháp cơ bản của CSS
Một rule CSS thường có 2 phần: selector và thuộc tính.
h1 {
color: blue;
font-size: 32px;
}Trong đó:
h1là selector, nghĩa là chọn thẻh1colorvàfont-sizelà thuộc tính
Mỗi thuộc tính thường đi kèm một giá trị, ví dụ
blue hoặc 32px. Dấu : đứng giữa thuộc tính và giá trị, còn dấu ; kết thúc từng dòng. Người mới rất hay quên dấu ;, và đó là một trong những lỗi làm CSS không chạy đúng.
Cách đọc một rule CSS
Bạn có thể đọc rule trên như sau: "Hãy chọn tất cả thẻ h1, đổi màu chữ sang xanh và đặt cỡ chữ 32 pixel". Khi học CSS từ đầu, cách đọc bằng lời như vậy giúp bạn hiểu nhanh hơn là chỉ nhìn ký hiệu.
Cách gắn CSS vào HTML
Có 3 cách phổ biến để chèn CSS vào HTML.
Inline CSS
<h1 style="color: blue;">Xin chào</h1>Internal CSS
<head>
<style>
h1 {
color: blue;
}
</style>
</head>External CSS
<head>
<link rel="stylesheet" href="style.css">
</head>Với project thật, bạn nên ưu tiên external CSS vì dễ quản lý hơn.
Khi nào dùng inline, internal và external CSS?
Inline CSS
Inline CSS thích hợp khi bạn muốn thử rất nhanh một thay đổi nhỏ hoặc minh họa một ví dụ ngắn trong lúc học. Tuy nhiên, nếu lặp lại nhiều nơi, code sẽ rất rối.
Internal CSS
Internal CSS hữu ích khi bạn có một file HTML nhỏ, muốn thử nghiệm nhanh và chưa muốn tách ra nhiều file. Nhưng khi trang lớn lên, phần CSS trong head sẽ dài và khó bảo trì.
External CSS
External CSS là cách làm nên ưu tiên vì:
- Một file CSS có thể dùng cho nhiều trang HTML
- HTML gọn hơn và tập trung vào nội dung
- Sửa giao diện dễ hơn, không phải tìm trong nhiều file HTML
Nếu bạn đang học cách chèn CSS vào HTML cho người mới, hãy xem external CSS là cách làm mặc định nên tập sớm.
Vì sao nên dùng external CSS?
External CSS giúp:
- Tách riêng nội dung và giao diện
- Dễ sửa nhiều trang cùng lúc
- Giữ file HTML gọn hơn
Ví dụ file
style.css:
body {
font-family: Arial, sans-serif;
}
h1 {
color: #2563eb;
}
Ví dụ đầy đủ hơn:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Hoc CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Trang web dau tien co CSS</h1>
<p>Toi dang hoc cach gan CSS vao HTML.</p>
</body>
</html>Khi đó file style.css có thể điều khiển giao diện cho toàn bộ trang mà không cần chèn style trực tiếp trong từng thẻ.
CSS dùng để làm gì ngoài đổi màu?
Nhiều người mới nghĩ CSS chỉ để đổi màu chữ. Thực tế, CSS còn giúp bạn:
- Đổi font và cỡ chữ
- Tạo khoảng cách giữa các khối
- Thêm viền, nền, bo góc
- Sắp xếp layout theo hàng hoặc cột
- Làm giao diện hiển thị tốt trên điện thoại và desktop
Nói cách khác, CSS vừa giúp trang đẹp hơn vừa giúp trải nghiệm sử dụng tốt hơn.
Những lỗi thường gặp khi mới học CSS
- Quên liên kết file CSS bằng thẻ
link. - Sai đường dẫn tới file
style.css. - Thiếu dấu
;sau thuộc tính. - Viết sai selector nên CSS áp dụng nhầm hoặc không áp dụng.
- Lưu file nhưng quên tải lại trình duyệt.
<link rel="stylesheet" href="style.css">Nếu href sai, CSS sẽ không được áp dụng.
Ví dụ, nếu file style.css nằm trong thư mục css, bạn phải viết:
<link rel="stylesheet" href="css/style.css">Chỉ cần sai đường dẫn một chút, trình duyệt sẽ không tìm thấy file.
Bài tập thực hành
Tạo file index.html và style.css. Sau đó:
- Liên kết
style.cssvào HTML - Đổi màu tiêu đề
h1 - Đổi font cho toàn bộ trang
Gợi ý:
<link rel="stylesheet" href="style.css">Sau khi hoàn thành, hãy thử thêm một vài thuộc tính nữa như background-color, padding hoặc text-align để thấy CSS có thể thay đổi giao diện mạnh đến mức nào dù HTML không đổi.
Câu hỏi thường gặp về CSS
Nên học HTML xong rồi mới học CSS đúng không?
Đúng. Bạn nên nắm cấu trúc HTML cơ bản trước, vì CSS luôn áp dụng lên các phần tử HTML đã có.
Khi nào nên dùng inline CSS?
Inline CSS chỉ nên dùng cho ví dụ rất ngắn hoặc thử nhanh. Với code thật, external CSS sẽ dễ bảo trì hơn nhiều.
Vì sao tôi đã viết CSS nhưng trang không đổi?
Hãy kiểm tra lần lượt: file CSS đã được liên kết chưa, đường dẫn có đúng không, selector có khớp với HTML không, và bạn đã lưu file rồi tải lại trình duyệt chưa.
Có cần học hết mọi thuộc tính CSS ngay từ đầu không?
Không cần. Chỉ cần nắm chắc nhóm cơ bản như màu sắc, cỡ chữ, font, khoảng cách và cách gắn CSS vào HTML. Những phần nâng cao có thể học dần.
Tóm tắt
Bạn đã hiểu CSS là gì, CSS dùng để làm gì và 3 cách gắn CSS vào HTML gồm inline, internal và external. Quan trọng nhất ở giai đoạn này là biết đọc cú pháp cơ bản và ưu tiên external CSS để tách giao diện khỏi nội dung.
Ở bài tiếp theo, chúng ta sẽ học CSS selector, màu sắc và chữ để bạn bắt đầu chọn đúng phần tử và áp dụng style chính xác hơn.
Bài viết liên quan
Next.js là gì? Tại sao nên dùng Next.js để làm web?
Giới thiệu Next.js — framework React phổ biến nhất. Tìm hiểu ưu điểm, tính năng nổi bật và khi nào nên dùng.
Con bug đầu tiên trong cuộc đời lập trình viên
Câu chuyện hài hước về lần đầu gặp bug và mất 3 tiếng để tìm ra nguyên nhân chỉ là... thiếu dấu chấm phẩy.
Hướng dẫn cài đặt Python chi tiết trên Windows, macOS, Linux
Hướng dẫn từng bước cài đặt Python trên mọi hệ điều hành. Kèm cách kiểm tra và chạy chương trình đầu tiên.