Chèn, thứ tự ưu tiên và Cú pháp của CSS

Đây là bài mở đầu vì thế nó toàn chỉ là các thứ cơ bản thôi nhưng rất quan trọng về sau này!

Ở bài này mình sẽ hướng dẫn các bạn về cách chèn CSS, thứ tự ưu tiên của CSS, và cú pháp của CSS.

Cách chèn CSS:
để chèn CSS vào trang web bạn có 3 cách cơ bản dưới đây, mỗi cách đều có ưu và nhược điểm riêng nhưng 1 trang web hoàn thiện đều phải sử dụng cả 3 cách này!
- Cách 1: chèn file .css vào trang web

- Cách 2: dùng tag

- Cách 3: dùng thuộc tính style="" trong HTML (áp dụng với mọi tag HTML)

Thứ tự ưu tiên của CSS:
chỉ vài chữ thôi: lấy phần gần nhất và độc nhất!
VD: mình có đoạn code sau:

thì div trên sẽ có padding 10px, margin 10px, color #fff, width: 50%. Nó sẽ lấy tất cả các thuộc tính, nếu trùng sẽ lấy thuộc tính gần với code nhất và nhớ là CSS áp dụng cho code nào thì phải nằm phía trên code đó nhé, nằm dưới coi như vô dụng!

Cú pháp của CSS:
1 cú pháp của CSS được chia làm 3 phần. phần thẻ chọn (selector), phần thuộc tính (property), phần nhãn (value)

.selector {property: value}

Nếu nhãn của bạn có nhiều từ thì bạn nên đặt nhãn của bạn vào trong dấu nháy kép

p {font-family: "sans serif"}

Trong trường hợp thẻ chọn của bạn nhiều thuộc tính thì các thuộc tính sẽ được ngăn cách bởi dấu (;)

.p {text-align: center; color: red}

Khi thẻ chọn có nhiều thuộc tính thì chúng ta nên để mỗi thuộc tính ở trên một dòng riêng biệt

#p {text-align: center;
color: black;
font-family: arial}

bạn có chú ý các kí tự ở trước chữ p ko? Nó là định nghĩa đi theo HTML
ở đây ta có:

.p{...} dấu chấm (.) sử dụng với thuộc tính class="p" của HTML

#p{...} dấu thăng (#) sử dụng với thuộc tính id="p" của HTML

p{...} ko có dấu gì sử dụng cho tag HTML cùng tên (tag )

Nguồn: DuyPoppy