Inline CSS là CSS viết trong thuộc tính style của một phần tử, như . Các khai báo chỉ áp dụng cho đúng phần tử đó, không cần selector.

Tài liệu CSS chạy trực tiếp: Inline CSS

Q: 3 cách thêm CSS vào HTML là gì?

Inline, bằng thuộc tính style trên một phần tử; internal, bằng một phần tử trong trang; và external, bằng một tệp .css riêng được liên kết qua trong . Tệp external là lựa chọn thông thường cho cả một trang web.

Q: Có dùng hover trong inline CSS được không?

Không. Thuộc tính style chỉ nhận khai báo, nên không thể viết pseudo-class như :hover, pseudo-element như ::before hay quy tắc @media ở đó. Hãy đặt chúng trong một phần tử hoặc một stylesheet.

Inline CSS: thuộc tính style và 3 cách thêm CSS vào HTML

Inline CSS đặt các khai báo ngay trên phần tử bằng thuộc tính style. Tìm hiểu cú pháp, khi nào inline style là lựa chọn đúng, vì sao nó thắng stylesheet, và so sánh nó với internal CSS và external CSS.

Trang này có trình soạn thảo chạy trực tiếp. Sửa, chạy và xem đầu ra ngay lập tức.

Bởi Kevin Spektor, Đồng sáng lập và CTO

Đăng ngày Sep 24, 2026

Inline CSS là gì

Inline CSS là CSS viết trực tiếp trên một phần tử HTML bằng thuộc tính style. Giá trị là một danh sách khai báo, property: value;, và chúng chỉ áp dụng cho đúng phần tử đó.

<p>A normal paragraph.</p>

<p style="color: #2563eb;">A blue paragraph.</p>

<p style="color: #16a34a; font-weight: bold; font-size: 20px;">
  Green, bold and 20px.
</p>

Không có selector và không có dấu ngoặc nhọn: phần tử mang thuộc tính chính là mục tiêu. Ngăn cách các khai báo bằng dấu chấm phẩy. Dấu chấm phẩy cuối cùng không bắt buộc, nhưng giữ nó giúp việc thêm khai báo tiếp theo an toàn hơn.

Cú pháp

<element style="property: value; property: value;">

Thành phần	Ví dụ	Ghi chú
Thuộc tính	`style="..."`	Một thuộc tính toàn cục: dùng được trên mọi phần tử HTML
Khai báo	`color: #2563eb;`	Cùng cú pháp như trong một quy tắc của stylesheet
Nhiều khai báo	`padding: 8px; border: 1px solid #e5e7eb;`	Ngăn cách bằng `;`
Dấu nháy bên trong	`style="font-family: 'Courier New', monospace;"`	Dùng nháy đơn bên trong thuộc tính đặt trong nháy kép

Những gì không phải khai báo đều không được phép. :hover, ::before, @media và selector không có chỗ trong thuộc tính style.

3 cách thêm CSS vào HTML

CSS đến được trang web theo ba cách. Trang này trình bày cách đầu tiên; external CSS và internal CSS có trang riêng.

Cách	CSS nằm ở đâu	Phạm vi	Cách dùng điển hình
Inline	Thuộc tính `style` trên một phần tử	Phần tử đó	Giá trị riêng lẻ, giá trị do JavaScript đặt
Internal	Phần tử `<style>` trong trang	Trang đó	Demo một trang, mẫu email, CSS quan trọng
External	Một tệp `.css`, liên kết bằng `<link>`	Mọi trang liên kết đến nó	Định dạng cả trang web

Cùng một đoạn văn được định dạng theo cả ba cách (tệp external được thể hiện dưới dạng chú thích, vì khung xem trước không có tệp thứ hai để tải):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways</title>
  <!-- External: <link rel="stylesheet" href="styles.css"> -->
  <style>
    /* Internal: one rule styles every matching element */
    .note {
      background: #e5e7eb;
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p class="note">Styled by the internal rule.</p>
  <p class="note">Same rule, second paragraph.</p>
  <p class="note" style="background: #f59e0b;">Inline background wins here.</p>
</body>
</html>

Đoạn văn thứ ba giữ padding và độ bo góc từ quy tắc .note và chỉ thay nền, vì inline style chỉ đặt đúng một thuộc tính đó.

Vì sao inline style thắng

Khi một quy tắc trong stylesheet và một inline style cùng đặt một thuộc tính, inline style thắng. Selector cụ thể đến đâu cũng không quan trọng: ngay cả selector ID cũng thua.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline wins</title>
  <style>
    #title { color: #16a34a; }
    p { color: #111827; }
  </style>
</head>
<body>
  <p id="title" style="color: #2563eb;">Blue: the inline style beats the ID selector.</p>
</body>
</html>

Ngoại lệ duy nhất là !important. Một khai báo trong stylesheet được đánh dấu !important thắng khai báo inline bình thường, và một !important inline thắng cả hai. Đó là lý do inline style khiến trang web khó bảo trì: để thay đổi chúng từ stylesheet, bạn cần !important, và thế là bắt đầu leo thang. Trang !important trình bày đầy đủ thứ tự này.

Khi nào inline CSS là công cụ đúng

Inline style phù hợp khi giá trị là dữ liệu, không phải thiết kế: nó thay đổi theo từng phần tử và do template hoặc JavaScript viết ra.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress</title>
  <style>
    .track { background: #e5e7eb; border-radius: 999px; height: 12px; }
    .bar { background: #2563eb; height: 100%; border-radius: 999px; }
  </style>
</head>
<body>
  <p>Upload</p>
  <div class="track"><div class="bar" style="width: 35%;"></div></div>
  <p>Download</p>
  <div class="track"><div class="bar" style="width: 80%;"></div></div>
</body>
</html>

Vẻ ngoài (màu, chiều cao, độ bo góc) nằm trong stylesheet. Chỉ chiều rộng, khác nhau ở mỗi thanh, là inline. JavaScript ghi cùng thuộc tính đó qua element.style:

<button id="btn">Make it amber</button>
<p id="msg">Watch this text.</p>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    const msg = document.getElementById('msg');
    msg.style.color = '#f59e0b';
    msg.style.fontWeight = 'bold';
  });
</script>

Sau khi bấm, HTML của đoạn văn thành style="color: rgb(245, 158, 11); font-weight: bold;". Tên thuộc tính có dấu gạch nối được viết theo camelCase trong JavaScript (font-weight là fontWeight).

Biến CSS thường là giải pháp trung gian gọn gàng nhất: chỉ đặt biến ở dạng inline, style="--progress: 35%", và để stylesheet sử dụng nó. Xem biến CSS.

Những điểm hạn chế của inline CSS

Không có trạng thái hay pseudo-element. Bạn không thể viết :hover, :focus hay ::before trong thuộc tính style.
Không có media query. Chiều rộng inline không thể thay đổi trên điện thoại.
Lặp lại. Mười nút có cùng inline style nghĩa là mười chỗ phải sửa.
Khó ghi đè. Chỉ !important trong stylesheet mới thắng được nó.
Content Security Policy. Một CSP nghiêm ngặt không có 'unsafe-inline' trong style-src sẽ chặn các thuộc tính style viết trong HTML.

Lỗi thường gặp

Viết selector hoặc dấu ngoặc nhọn trong style. style="p { color: red }" bị bỏ qua. Chỉ có khai báo mới được đặt ở đó.
Dùng = thay cho :. Phải là color: red, không phải color=red.
Lồng dấu nháy kép. style="font-family: "Arial"" làm thuộc tính kết thúc sớm. Dùng nháy đơn bên trong.
Quên đơn vị. style="width: 200" bị bỏ qua; hãy viết 200px. Độ dài 0 là trường hợp duy nhất được bỏ đơn vị.
Định dạng cả trang web bằng inline. Chuyển các kiểu lặp lại thành một class trong stylesheet và giữ inline style cho các giá trị riêng của từng phần tử.

Câu hỏi thường gặp

Inline CSS là gì?

Inline CSS là CSS viết trong thuộc tính style của một phần tử, như <p style="color: red;">. Các khai báo chỉ áp dụng cho đúng phần tử đó, không cần selector.

3 cách thêm CSS vào HTML là gì?

Inline, bằng thuộc tính style trên một phần tử; internal, bằng một phần tử <style> trong trang; và external, bằng một tệp .css riêng được liên kết qua <link rel="stylesheet" href="styles.css"> trong <head>. Tệp external là lựa chọn thông thường cho cả một trang web.

Inline CSS có ghi đè external CSS không?

Có, trong phần lớn trường hợp. Một khai báo trong thuộc tính style thắng mọi selector trong stylesheet, bất kể độ ưu tiên. Cách duy nhất để stylesheet thắng là dùng !important, và một !important inline lại thắng cả cái đó.

Dùng inline CSS có phải là thói quen xấu không?

Nếu dùng để định dạng cả trang web thì có: nó lặp đi lặp lại, không dùng được :hover hay media query, và khó ghi đè. Nó vẫn ổn cho những giá trị riêng lẻ do JavaScript hoặc template đặt, như chiều rộng thanh tiến độ hay màu người dùng chọn.

Có dùng hover trong inline CSS được không?

Không. Thuộc tính style chỉ nhận khai báo, nên không thể viết pseudo-class như :hover, pseudo-element như ::before hay quy tắc @media ở đó. Hãy đặt chúng trong một phần tử <style> hoặc một stylesheet.

Khái niệm liên quan