Cafedev chia sẻ cho ace về một bộ quy tắc CSS bao gồm bộ chọn và khối khai báo:

Bộ chọn(selector) trỏ đến phần tử HTML mà bạn muốn tạo kiểu(style).

Khối khai báo chứa một hoặc nhiều khai báo được phân tách bằng dấu chấm phẩy.

Mỗi khai báo bao gồm tên thuộc tính CSS và một giá trị, được phân tách bằng dấu hai chấm.

Nhiều khai báo CSS được phân tách bằng dấu chấm phẩy và các khối khai báo được bao quanh bởi các dấu ngoặc nhọn.

-> Bạn muốn tham khảo toàn bộ series tự học CSS từ cơ bản tới nâng cao tại đây.

-> Bạn muốn tham khảo toàn bộ series tự học HTML từ cơ bản tới nâng cao tại đây.

Ví dụ: Trong ví dụ này, tất cả các phần tử <p> sẽ được căn giữa, với màu văn bản màu đỏ:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;
  text-align: center;
} 
</style>
</head>
<body>

<p>Hello Cafedev!</p>
<p>These paragraphs are styled with CSS.</p>

</body>
</html>

Copy and chạy code

Giải thích ví dụ trên:

  • p là một bộ chọn(selector) trong CSS (nó trỏ đến phần tử HTML mà bạn muốn tạo kiểu: < p>)
  • color là một thuộc tính(property) và red là giá trị thuộc tính
  • text-align là một thuộc tính(property) và center là giá trị thuộc tính

Bài này chỉ giới thiếu đơn giản vậy thôi, sau bài này bạn sẽ tìm hiểu nhiều hơn về các bộ chọn CSS và các thuộc tính CSS trong các chương tiếp theo.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!