HTML Styles

HTML Styles: Applying Inline CSS Properties to Elements

The HTML style attribute adds CSS styling directly onto an individual element. It accepts one or more property: value; pairs inside double quotes to change colors, fonts, alignment, and spacing immediately.

Syntax of the Style Attribute

Write style="property: value;" inside the opening tag of any visible HTML element. Separate multiple declarations with semicolons so the browser parses each rule cleanly.

Common properties used during quick prototypes include color for text color, background-color for surface fills, font-family for typography, font-size for scale, and text-align for alignment.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Styles Demo</title>
</head>
<body style="background-color: #f8fafc; font-family: system-ui, sans-serif; padding: 24px;">
    <h2 style="color: #0f172a; text-align: center;">Inline Style Example</h2>
    <p style="color: #334155; font-size: 16px; line-height: 1.6;">
        This paragraph uses inline CSS properties for color, size, and line height.
    </p>
    <div style="background-color: #e0f2fe; color: #0369a1; padding: 12px; border-radius: 6px;">
        Notice banner styled with a light blue background and padding.
    </div>
</body>
</html>

Why Inline Styles Have Limits

Inline style attributes carry higher CSS specificity than classes in external stylesheets. While useful for quick tests or HTML email templates, repeating inline styles across dozens of elements makes site-wide updates slow and error-prone.

For production websites, move reusable styles into an external .css file and attach clean class names instead.

Common Mistakes to Avoid

• Missing semicolons between declarations: Writing color: red font-size: 18px breaks both properties. End every rule with ;.
• Forgetting units on dimensions: Write font-size: 18px rather than font-size: 18, because CSS requires units for non-zero lengths.
• Using deprecated font or center tags: Always use CSS font-family and text-align instead of removed HTML4 styling tags.

Frequently Asked Questions

When is the HTML style attribute appropriate in real projects?

Inline styles work best in HTML emails where external stylesheets are blocked, or when JavaScript calculates dynamic coordinates or progress widths.

Do inline styles override external CSS files?

Yes. An inline style attribute overrides class and ID selectors in external stylesheets unless the stylesheet rule uses !important.