- Trong đó:
+ Thẻ, ID, class: là phần định danh các đối tượng HTML cần khai báo
+ Thuộc tính và giá trị: là các thiết lập hiển thị cho các thẻ, id, class. Mỗi khai báo gồm 1 thuộc tính và một giá trị, cách nhau bởi dấu : (hai chấm). Các khai báo cách nhau bởi dấu ; (chấm phẩy)
1. Nhận dạng phần tử HTML với tên thẻ:
Ví dụ 1:
<html>
<head>
<title>http://www.hoclaptrinhweb.net/</title>
<style>
p {
color: blue;
text-align: center;
background-color:#FFFF00;
}
</style>
</head>
<body>
<p>www.hoclaptrinhweb.net</p>
<p>Đoạn văn này được khai báo css trong style</p>
</body>
</html>
Kết quả:
 |
| Khai báo và sử dụng thẻ <p> |
- Thuộc tính id được định danh một phần tử duy nhất trong trang.
- Để khai báo id, thêm dấu # trước tên cần định danh.
- Trong các thẻ HTML, gọi thuộc tính id để sử dụng.
Ví dụ 2:
<html>
<head>
<title>http://www.hoclaptrinhweb.net/</title>
<style>
#hanoi {
color: red;
text-align: center;
}
#danang {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<p id="hanoi">Nhiệt độ Hà Nội: 39 độ C</p>
<p id="danang">Nhiệt độ Đà Nẵng: 38 độ C</p>
</body>
</html>
Kết quả:
 |
| Sử dụng thuộc tính ID trong HTML |
- Thuộc tính class được định danh các phần tử có chung thuộc tính.
- Để khai báo class, thêm dấu . (chấm) trước tên cần định danh.
- Trong các thẻ HTML, gọi thuộc tính class để sử dụng.
Ví dụ 3:
<html>
<head>
<title>http://www.hoclaptrinhweb.net/</title>
<style>
.mauchudo {
color: red;
}
</style>
</head>
<body>
<h1 class="mauchudo">Nhiệt độ Hà Nội: 39 độ C<h1>
<p class="mauchudo">Nhiệt độ Đà Nẵng: 38 độ C</p>
</body>
</html>
Thẻ h1 và p đều có màu chữ đỏ do sử dụng chung class: mauchudo
Kết quả:
 |
| Khai báo và sử dụng class trong CSS |
- Để nhóm các thẻ có chung thuộc tính và giá trị, sử dụng dấu , (phẩy) ngăn cách giữa các thẻ được đặt trên cùng 1 dòng.
- Trong ví dụ 4, các thẻ h1, h2, p có chung thuộc tính màu chữ, căn lề giữa
Ví dụ 4:
<html>
<head>
<title>http://www.hoclaptrinhweb.net/</title>
<style>
h1, h2, p {
color: green;
text-align:center;
}
</style>
</head>
<body>
<h1>Nhiệt độ Hà Nội: 39 độ C<h1>
<h2>Nhiệt độ Hải Phòng: 39 độ C<h2>
<p>Nhiệt độ Nghệ An: 40 độ C</p>
</body>
</html>
Kết quả:
 |
| Khai báo và sử dụng nhóm các thẻ HTML trong CSS |
Đặt nội dung cần chú thích trong cặp /* Nội dung cần chú thích */
