Cách làm việc với thuộc tính style (inline CSS) trong HTML?

Thuộc tính style áp dụng CSS trực tiếp (inline style) cho phần tử. Cú pháp: style="property: value; property2: value2;". Ưu tiên cao nhất (trừ !important), nhưng không khuyến khích dùng nhiều (khó bảo trì, không tái sử dụng).

Ví dụ

<!DOCTYPE html>
<html>
  <body>
    <h2>Tutorialspoint</h2>
    <p>Chúng tôi cung cấp hướng dẫn.</p>
    <p style="color: green; font-weight: bold;">Chúng tôi cung cấp video học tập.</p>
  </body>
</html>

Khi nào dùng inline style?

• Style động do JS tính toán (top/left tooltip, width progress bar).
• Email HTML (nhiều client không hỗ trợ <style> hoặc class).
• Prototype nhanh, demo.

Khi nào KHÔNG dùng

• Style chung, lặp lại —> dùng class + <style> hoặc file .css.
• Responsive design —> media query chỉ trong stylesheet.
• Pseudo-class (:hover, :focus) — không hỗ trợ trong inline style.

Thứ tự ưu tiên CSS (Specificity)

1. Inline style (style="...")
2. ID selector (#id)
3. Class/Attribute/Pseudo-class (.class, [attr], :hover)
4. Element/Pseudo-element (div, ::before)