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