Bài viết nhập môn CSS này sẽ hướng dẫn bạn làm thế nào để có thể tạo ra file css, và áp dụng CSS cho HTML.
Tệp CSS chỉ đơn giản là một tệp văn bản đơn giản được lưu với phần mở rộng .css.
Nhưng, trước khi chúng ta bắt đầu, hãy đảm bảo rằng bạn có một số kiến thức về HTML.
>> Tham khảo: Tự học HTML trên W3C (nếu bạn là người mới bắt đầu, chưa biết gì)
Và khi đã hiểu cơ bản về HTML, hãy quay lại đây và bắt đầu với Cascading Style Sheets (CSS).
3 Cách thêm CSS vào trong HTML
CSS có thể được đính kèm dưới dạng file riêng biệt hoặc được nhúng trong chính file HTML.
Có ba phương pháp để thêm CSS vào file HTML:
- Kiểu CSS nội tuyến (inline styles) – Sử dụng thuộc tính style trong thẻ HTML.
- Kiểu nhúng CSS (embedded styles) – Sử dụng phần tử <style> và đặt ở trong thẻ head của HTML
- CSS bên ngoài (external style) – Sử dụng phần tử <link> để trỏ đến file CSS ở bên ngoài.
Cách #1: CSS nội tuyến (Inline Styles)
Các kiểu CSS nội tuyến được sử dụng để áp dụng trực tiếp CSS vào từng thẻ HTML (thẻ bắt đầu).
Nó có thể được gắn vào một phần tử HTML bằng cách sử dụng thuộc tính style.
Thuộc tính style bao gồm một loạt các cặp Giá trị và Thuộc tính CSS.
Mỗi cặp “thuộc tính: giá trị” được phân tách bằng dấu chấm phẩy (;), giống như bạn sẽ viết CSS vào một file CSS bên ngoài vậy.
Nhưng nó cần phải đặt tất cả trên một dòng, tức là không ngắt dòng sau dấu chấm phẩy, như ví dụ bên dưới đây:
<h1 style="color:red; font-size:30px;">Đây là thẻ H1</h1>
<p style="color:green; font-size:22px;">Đây là một đoạn văn bản.</p>
<div style="color:blue; font-size:14px;">Chào bạn đến với series tự học CSS3.</div>Sử dụng các cách viết CSS nội tuyến thường được coi là bad pratice.
Vì các quy tắc kiểu được nhúng trực tiếp bên trong thẻ HTML, nó làm cho thuộc tính trình bày bị trộn lẫn với nội dung của tài liệu.
Điều này làm cho code khó duy trì và phủ nhận mục đích sử dụng CSS.
Lưu ý: Không thể CSS các phần tử giả (pesudo-element) và các lớp giả (pesudo-class) với các kiểu nội tuyến. Do đó, bạn nên tránh sử dụng các thuộc tính css trong code HTML của mình. Sử dụng kiểu liên kết file CSS là cách làm phổ biến nhất để thêm CSS vào HTML.
Thực tế: Vẫn có trường hợp ưu tiên viết CSS trong phần tử HTML nếu thực sự cần tối ưu tốc độ tải trang. ^^
Cách #2: Nhúng CSS (Embedded Styles)
Kiểu Nhúng CSS hoặc CSS nội tuyến chỉ ảnh hưởng đến file HTML mà chúng được nhúng vào.
Nhúng CSS là viết CSS trong phần tử <style> và đặt nó trong phần <head> của tài liệu HTML.
Bạn có thể định nghĩa bất kỳ số lượng phần tử style nào trong tài liệu HTML nhưng chúng phải xuất hiện giữa thẻ <head> và </head>.
Hãy xem một ví dụ nhúng CSS dưới đây:
<!DOCTYPE html>
<html>
<head>
<title>Đây là file HTML</title>
<style>
body {background-color: YellowGreen;}
p {color: #fff;}
</style>
</head>
<body>
<h1>Đây là một tiêu đề</h1>
<p>Đây là một đoạn văn bản.</p>
</body>
</html>Lưu ý: Thuộc tính type của thẻ <style> và thẻ <link> (nghĩa là type = “text/css”) xác định ngôn ngữ của bảng style. Thuộc tính này là hoàn toàn chỉ là thông tin. Bạn có thể bỏ qua phần này vì CSS là ngôn ngữ định kiểu chuẩn và mặc định trong HTML5.
Cách #3: CSS bên ngoài (External Styles)
Kiểu CSS bên ngoài là cách làm phổ biến nhất trong lập trình web.
File CSS bên ngoài chứa tất cả các quy tắc kiểu trong một tài liệu riêng mà bạn có thể liên kết từ bất kỳ tệp HTML nào trên trang web của mình.
CSS bên ngoài là linh hoạt nhất vì với file CSS bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web chỉ bằng cách thay đổi một tệp.
Bạn có thể đính kèm các file CSS bên ngoài theo hai cách:
- Liên kết file CSS
- hoặc nhập file CSS
Liên kết file CSS bên ngoài
Trước khi liên kết đến CSS, chúng ta cần tạo một file CSS trước.
Hãy mở trình trình soạn thảo và tạo một tệp mới. Bây giờ hãy nhập mã CSS sau trong tệp này và lưu nó với tên bất kỳ nhưng có phần mở rộng là .css.
Ví dụ, mình lưu tên file là style.css
body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}Một file CSS bên ngoài có thể được liên kết với một tài liệu HTML bằng cách sử dụng thẻ <link>.
Thẻ <link> nằm trong phần <head>, như bạn có thể thấy trong ví dụ sau:
<!DOCTYPE html>
<html>
<head>
<title>Đây là file HTML</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Đây là một tiêu đề</h1>
<p>Đây là một đoạn văn bản.</p>
</body>
</html>Ở đây mình lưu file CSS trong thư mục css. Còn file HTML đang nằm cùng cấp với thư mục css, như thế này:
Nhưng nếu bạn để file CSS cùng cấp với file HTML thì bạn có liên kết như thế này:
<!DOCTYPE html>
<html>
<head>
<title>Đây là file HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Đây là một tiêu đề</h1>
<p>Đây là một đoạn văn bản.</p>
</body>
</html>Mẹo: Trong số tất cả ba phương thức, sử dụng CSS bên ngoài là phương pháp tốt nhất để định nghĩa và áp dụng các kiểu cho các tài liệu HTML. Như bạn có thể thấy rõ với các file CSS bên ngoài, tệp HTML chỉ cần thêm một dòng code tối thiểu.
Nhập CSS (import CSS)
@import CSS là một cách khác để tải một file CSS bên ngoài vào trong HTML. Câu lệnh @import hướng dẫn trình duyệt tải một file CSS bên ngoài và sử dụng nó.
Bạn có thể sử dụng nó theo hai cách.
Đơn giản nhất là đặt trong phần header. Lưu ý là, các quy tắc CSS khác vẫn có thể được bao gồm trong thẻ <style>.
Đây là một ví dụ các nhập CSS vào HTML:
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>Tương tự, bạn có thể sử dụng @import để nhập một file CSS trong một file CSS khác.
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}Lưu ý: Tất cả các @import phải đặt ở đầu CSS. Bất kỳ quy tắc kiểu nào được định nghĩa trong file CSS này sẽ ghi đè lên các quy tắc xung đột trong file CSS đã nhập. Tuy nhiên, không nên nhập file CSS này vào file CSS khác do nó sẽ có vấn đề về hiệu suất.
Chúc mừng bạn đã nhập môn CSS.
Như vậy là qua bài này bạn đã biết cách tạo ra file CSS, biết viết CSS ở đâu cũng như cách để áp dụng CSS cho tài liệu HTML.
Tuy nhiên, bài viết này mới chỉ là phần nhập môn CSS, chặng đường dài còn ở phía trước.
Hãy kiên trì học tập hàng ngày bạn nhé.
Học tiếp: Cú pháp CSS
Đọc thêm: Giới thiệu Series Tự học CSS