The style Attribute
Use the style attribute to add CSS directly to an element. The value is a CSS property-value pair.
<p style="color: red;">This text is red.</p>
<h1 style="font-size: 32px; color: #D62828;">Big red heading</h1>Common Style Properties
| Property | What it does | Example value |
|---|---|---|
color | Text color | red, #333 |
background-color | Background color | #f5f5f5 |
font-size | Text size | 18px, 1.2rem |
font-family | Typeface | Arial, sans-serif |
text-align | Text alignment | center, left |
border | Border shorthand | 1px solid #ccc |
padding | Inner spacing | 16px |
<h2 style="font-family: Arial; text-align: center; color: #5B3FEF;">
Centered purple heading
</h2>
<p style="background-color: #fff3cd; padding: 12px; border-left: 4px solid #f0c33a;">
Highlighted note paragraph.
</p>Inline styles are great for quick tests. For real projects always use an external CSS file — inline styles are hard to maintain and can't be reused.