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