Home › CSS › Inline CSS

Inline CSS

Beginner ⏱ 5 min read Updated: Jul 2026
  • Inline CSS is a method of applying CSS styles directly to an HTML element.
  • Inline CSS is written inside the style attribute of an HTML tag.
  • It is used to add unique styles to individual HTML elements.
  • Inline CSS has the highest priority compared to internal and external CSS.

What is Inline CSS?

Inline CSS is a way of adding CSS directly inside an HTML element using the style attribute. Instead of writing CSS separately, we write the CSS property and value inside the opening tag of an HTML element.

Inline CSS is useful when you want to apply a specific style to a single element on a webpage.

Syntax of Inline CSS

Syntax 

<element style="property:value;">

Content

</element>

Example of Inline CSS

Example 

<h1 style="color:blue;">
    Welcome to CSS
</h1>


<p style="font-size:20px;">
    This paragraph uses Inline CSS.
</p>
Result

Welcome to CSS

This paragraph uses Inline CSS.

Example Explained

style

The style attribute is used to add CSS properties directly inside an HTML element.

color

The color property changes the text color of an element.

font-size

The font-size property controls the size of text.

Multiple CSS Properties in Inline CSS

You can apply multiple CSS properties inside the style attribute by separating each property with a semicolon.

Example 

<p style="
color:red;
font-size:18px;
background-color:yellow;">

This text has multiple styles.

</p>

Advantages of Inline CSS

✅
  • Easy to understand for beginners.
  • Useful for applying quick changes to a single element.
  • Overrides external and internal CSS rules.
  • Helpful for testing CSS properties quickly.

Disadvantages of Inline CSS

  • It makes HTML code larger and harder to maintain.
  • It cannot be reused for multiple elements.
  • It mixes HTML structure with CSS styling.
  • Large projects become difficult to manage.

When Should You Use Inline CSS?

Inline CSS should be used when you need to apply a small and specific style to one HTML element.

  • For quick testing purposes.
  • For email templates where external CSS may not work.
  • For small one-time style changes.

Inline CSS vs Internal CSS vs External CSS

Inline CSS

CSS is written inside the HTML element using the style attribute.

Internal CSS

CSS is written inside the style tag in the HTML head section.

External CSS

CSS is stored in a separate .css file and linked with HTML.

Conclusion

Inline CSS allows developers to apply CSS styles directly to HTML elements. It is simple and useful for small changes, but for large websites external CSS is recommended because it keeps code clean and reusable.

← Previous How to add css Next → Internal CSS