Which HTML Attribute Is Used to Define Inline Styles?

If you’re just getting started with HTML and CSS, you might wonder how to style an element directly in your HTML code without writing separate CSS rules. This is where inline styles come in—and the answer lies in a single HTML attribute.

In this post, you’ll learn:

• ✅ Which attribute is used for inline styles
• 🧪 How to use it with examples
• ⚠️ Pros and cons of inline styles
• 🧠 Best practices

✅ The Answer: style Attribute

The style attribute in HTML is used to apply CSS directly to an individual element. This is called an inline style because the styling is written within the HTML tag itself.

🧪 Basic Syntax

<element style="property: value;">

Example:

<p style="color: blue; font-size: 18px;">This is a styled paragraph.</p>

In this example:

• color: blue; sets the text color
• font-size: 18px; sets the font size

✅ The result: the paragraph appears in blue text at 18px size.

💡 Common Use Cases

You can use inline styles on almost any HTML element:

<h1 style="text-align: center;">Centered Heading</h1>

<div style="background-color: #f2f2f2; padding: 20px;">
  Box with background and padding
</div>

<button style="border-radius: 8px; color: white; background: green;">
  Rounded Button
</button>

⚠️ Pros and Cons of Inline Styles

✅ Pros

• Quick and easy for small tweaks
• Doesn’t require a separate CSS file
• Useful for testing or one-off adjustments

❌ Cons

• Clutters HTML code
• Harder to maintain and scale
• Lacks separation of structure and design
• Lower CSS specificity compared to stylesheets or !important

🧠 Best Practices

✅ Final Thoughts

The style attribute is the official way to apply inline styles in HTML. It’s useful for quick demos or isolated changes, but for larger, scalable websites, you should rely on external or internal CSS to maintain clean and manageable code.