[Học CSS] Bài 03: Cấu trúc cơ bản của một đoạn CSS

Trong bài này chúng ta sẽ đi tìm hiểu cách hoạt động của CSS và cấu trúc cơ bản của một đoạn CSS như thế nào nhé !

Cách hoạt động của CSS

CSS áp dụng những định dạng của nó lên văn bản HTML qua các vùng chọn. Với vùng chọn là: các thẻ HTML, các ID, Class,.. và nhiều vùng chọn khác.

Ví dụ viết một đoạn CSS cho vùng chọn là thẻ H1 thì nó cứ tìm đến chỗ nào có thẻ H1 sẽ áp dụng các định dạng có trong đoạn CSS.

Cấu trúc cơ bản của một đoạn CSS

CSS có cấu trúc như sau:

vùng chọn {
   thuộc tính : giá trị;
   thuộc tính: giá trị;
   .....
}

Ví dụ:

H1 { 
   font-size : 20px;
   color: red;
}

Ví dụ cho một đoạn văn vản HTML:

<h1>Tiêu đề của trang</h1>
<p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
    adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
    facilisis felis massa, at bibendum lorem fringilla ut. Sed 
    ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
</p>
<style>
    h1 {
    font-size: 30px;
    color: red;
    }
    p {
    font-size: 16px;
    color: blue;
    }
</style>

Các bạn copy nó và dán vào công cụ Codepen ở trên menu của Hocban.vn để xem nhé ! Đây là phần chú giải:

• Đây là đoạn CSS áp dụng cho thẻ <H1> và chữ trong thẻ <p>
• Font-size: kích thước font chữ, đơn vị là px
• Color: màu sắc font, red > màu đỏ, blue > màu xanh nước biển,…

Oke nhé, bài này đơn giản vậy thôi. Các bạn đã hình dung được cách CSS nó định dạng cho văn bản HTML chưa nào ? Nếu chưa thì làm lại ví dụ vài lần để hiểu nhé !

Bài học trước đó và tiếp theo

• Bài 02: CSS là gì và nó có vai trò như thế nào trên website ?
• Bài 04: Nhúng CSS vào HTML