Tạo kiểu cách cho HTML với CSS
CSS là viết tắt của Cascading Style Sheets (tập tin định dạng theo tầng), mô tả cách các phần tử HTML hiển thị trên màn hình, giấy và các phương tiện khác. CSS có thể kiểm soát layout của nhiều trang web cùng một lúc.
CSS được thêm vào các phần tử HTML bằng 3 cách:
- Inline - dùng các thuộc tính về kiểu cách (Style) trong các phần tử HTML
- Internal - sử dụng phần tử
<style>
trong phần<head>
- External - dùng tập tin CSS riêng
Cách phổ biến nhất là dùng một tập tin CSS riêng, nhưng ở đây chúng ta sẽ dùng 2 cách đầu tiên vì như vậy dễ mô tả và bạn đọc cũng dễ thực hành theo hơn.
Inline CSS
Inline CSS (CSS nội dòng) dùng để áp dụng một kiểu cách đặc biệt nào đó cho một phần tử HTML. CSS nội dòng dùng thuộc tính style
của phần tử HTML. Ví dụ dưới đây sẽ tạo màu cho phần tử <h1>
thành màu xanh.
<h1 style="color:blue;">Tiêu đề màu xanh</h1>
Internal CSS
Internal CSS (CSS nội bộ) dùng để định nghĩa cả một trang HTML, được khai báo trong phần <head>
của trang HTML, trong phần tử <style>
.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Quản trị mạng.</p>
</body>
</html>
External CSS
External CSS (CSS ngoài) định nghĩa kiểu cách cho nhiều trang HTML bằng một tập tin ngoài (stylesheet). Với cách này, bạn có thể thay đổi diện mạo của cả website mà chỉ cần một tập tin CSS duy nhất.
Để sử dụng CSS ngoài, chỉ cần dẫn một đường link tham chiếu tới tập tin đó trong mục <head>
của trang HTML.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Tiêu đề</h1>
<p>Quản trị mạng.</p>
</body>
</html>
Stylesheet này có thể viết trên bất kì trình soạn thảo văn bản nào. Tập tin không được chứa bất kì đoạn mã HTML nào và khi lưu phải có phần mở rộng là .css. Đây là ví dụ về một phần trong tập tin CSS này.
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Font
color
trong CSS xác định màu văn bản.font-family
xác định font chữ được sử dụng.font-size
xác định cỡ chữ sử dụng.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>Tiêu đề bài viết</h1>
<p>Quản trị mạng.</p>
</body>
</html>
CSS Border
border
xác định đường viền xung quanh phần tử HTML.
p{
border: 1px solid powderblue;
}
CSS Padding
padding
xác định khoảng trống giữa văn bản và đường viền.
p{
border: 1px solid powderblue;
padding: 30px;
}
CSS Margin
margin
xác định phần lề, tức là khoảng trống bên ngoài đường viền.
p {
border: 1px solid powderblue;
margin: 50px;
}
Thuộc tính id
Thuộc tính id
được dùng để xác định một kiểu cách nhất định cho một phần tử đặc biệt nào đó.
<p id="p01">Quản trị mạng là trang web về công nghệ</p>
Sau đó xác định kiểu cách cho phần tử này bằng id
#p01 {
color: blue;
}
Lưu ý: id
của một phần tử phải là duy nhất trong một trang.
Thuộc tính class
Khi cần định nghĩa một kiểu cách nhất định cho một loại đặc biệt nào đó của phần tử, hãy dùng thuộc tính class.
<p class="error">Tôi khác biệt.</p>
sau đó định nghĩa kiểu cách cho phần tử bằng lớp riêng.
p.error {
color: red;
}
Tham chiếu ngoài
Stylesheet ngoài có thể được tập tin HTML tham chiếu tới bằng đường dẫn URL hoặc đường dẫn lên quan tới trang web hiện tại. Ví dụ dưới đây sử dụng đường dẫn đầy đủ tới một stylesheet.
<link rel="stylesheet"
href="https://www.quantrimang.com/html/styles.css">
Ví dụ dưới đây dẫn tới một stylesheet đặt ở một thư mục HTML trên trang web hiện tại.
<link rel="stylesheet" href="/html/styles.css">
Ví dụ dưới đây dẫn tới một stylesheet đặt ở cùng thư mục trong trang hiện tại.
<link rel="stylesheet" href="styles.css">
Bài trước: Màu sắc trong HTML
Bài sau: Các đường dẫn trong HTML
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Các cách làm, tùy chỉnh trong bài sẽ giúp tăng tốc Windows 10 của bạn "nhanh như gió"
Hôm qua 6 -
4 cách kiểm tra lịch sử giao dịch BIDV trên điện thoại, máy tính
Hôm qua -
DRAM và DRAM-less SSD có gì khác nhau?
Hôm qua -
Dynamic System Updates là gì?
Hôm qua -
Cách ẩn, hiện ghi chú trong bảng trên Excel
Hôm qua -
PING là gì? Test PING như thế nào?
Hôm qua -
Cách chặn từ khóa và Hashtag trên Twitter
Hôm qua -
Cách dùng Terabox lưu trữ với 1TB miễn phí
Hôm qua 5 -
Điểm ưu tiên, điểm khuyến khích, khu vực ưu tiên khi xét tuyển năm 2022
Hôm qua -
Cách sao chép hoặc tạo bản sao toàn bộ trang tính trong Google Sheets
Hôm qua