HTML Inline CSS


What is HTML Inline CSS?

Inline CSS means writing CSS directly inside an HTML tag using the style attribute. This lets you apply styling to a single element only.



Syntax of Inline CSS

<tag style="property: value;">Content</tag>

You can write one or multiple CSS properties inside the style attribute.



Examples of Inline CSS


Change Text Color

<p style="color: red;">This is red text.</p>

Change Font Size

<h1 style="font-size: 32px;">Large Heading</h1>

Add Background Color

<div style="background-color: yellow;">Highlighted box</div>

Add Padding and Border

<p style="padding: 10px; border: 1px solid black;">Styled paragraph</p>

Combine Multiple Styles

<h2 style="color: blue; background-color: lightgray; text-align: center;">
  Centered Blue Heading
</h2>

Best Practices for Inline CSS

  • Use inline CSS only for quick testing or one-time changes
  • For larger projects, prefer internal or external CSS
  • Avoid inline CSS in production - it's harder to maintain and less efficient
  • Always keep code clean and readable by separating style and structure

Use Cases for Inline CSS

  • Quick styling on one element
  • Email templates (where external CSS may not work)
  • Temporary overrides or debugging