The style Attribute
Apply inline styling to a single element.
Syntax
<p style="color:red;">Red text</p>The style attribute lets you apply CSS styles directly to an element. This is called inline styling.
Common style properties
color— text color.background-color— background color.font-size— size of the text.
Separate multiple properties with a semicolon.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer uses the style attribute to quickly prototype a layout before moving styles to an external CSS file.
- An email template engineer uses inline style attributes because many email clients strip external stylesheets.
- A CMS injects dynamic colors via inline style="color: var(--brand)" generated from a user-selected theme.
More examples
Inline color and font size
The style attribute applies CSS declarations directly to a single element without a stylesheet.
<h1 style="color: #0066cc; font-size: 2rem;">Welcome</h1>
<p style="color: #444; line-height: 1.6;">Start learning HTML today.</p>Inline style for email compatibility
Email HTML relies on inline styles because many mail clients (Outlook, Gmail) ignore external CSS.
<table style="width:600px; border-collapse:collapse; margin:0 auto;">
<tr>
<td style="background:#f4f4f4; padding:24px; font-family:Arial,sans-serif;">
<p style="margin:0;">Your order has shipped!</p>
</td>
</tr>
</table>Dynamic style from a CMS value
A CMS can inject user-chosen colors as inline styles, allowing per-page theming without extra classes.
<!-- Server renders the hex value from the database -->
<div class="hero" style="background-color: #1a1a2e;">
<h2 style="color: #eaeaea;">Special Offer</h2>
</div>
Discussion