Introduction

The style attribute in HTML lets you apply inline CSS directly to an element. You can set colors, fonts, spacing, borders, and many other visual properties without opening a separate stylesheet file.

Inline styles are handy for quick experiments, email templates, or one-off tweaks. For larger projects, external CSS files or classes usually keep code cleaner and easier to maintain.

What You’ll Learn

Purpose of style

The primary purpose of the style attribute is to add specific styling to an individual HTML element. It is convenient for quick styling inside the HTML document itself.

While inline styles work everywhere, relying on them heavily makes code harder to update. External stylesheets and CSS classes separate structure (HTML) from presentation (CSS), which is a core best practice in web development.

📝 Syntax

Add style to any HTML element with one or more CSS declarations:

<tagname style="property: value;">

For example, to set the text color of a paragraph to red:

<p style="color: red;">This is a red paragraph.</p>

Syntax Rules

• Each declaration is property: value; (semicolon between rules).
• Property names use standard CSS spelling (e.g. background-color).
• Multiple properties go in one string: style="color: blue; font-size: 18px;".
• Quote the attribute value with double quotes; wrap CSS values containing spaces as needed.
• Global attribute — valid on almost every HTML element.
• JavaScript access: HTMLElement.style (camelCase for multi-word properties).

💎 Values

The style attribute accepts CSS property–value pairs. Some common properties include:

• color — Sets the text color.
• font-size — Specifies the font size.
• margin — Controls outer spacing around the element.
• padding — Controls inner spacing inside the element.
• background-color — Sets the background color.
• text-align — Aligns text (left, center, right).
• border — Adds a border around the element.
• display — Controls layout (block, flex, none, etc.).

These are just a few examples. Any valid CSS property can appear in the style attribute, subject to browser support for that property.

<div style="color: #1e40af; background-color: #dbeafe; padding: 1rem; border-radius: 8px;">
  Styled box
</div>

Applicable Elements

Inline style vs stylesheet vs class

Examples Gallery

Red paragraph, a styled heading and paragraph, and dynamic updates with JavaScript.

<p style="color: red;">This is a red paragraph.</p>

<h1 style="color: blue; text-align: center;">Welcome to My Website</h1>

<p style="font-size: 16px; line-height: 1.5;">
  This is a paragraph with custom styles applied.
</p>

<p id="dynamicElement">This text will change style dynamically.</p>

<script>
  var el = document.getElementById("dynamicElement");
  el.style.color = "green";
  el.style.fontSize = "20px";
</script>

♿ Accessibility

• Do not rely on color alone — Pair color changes with text labels, icons, or patterns so color-blind users understand meaning.
• Maintain contrast — Inline colors must still meet WCAG contrast ratios for text and backgrounds.
• Prefer classes for focus states — Keyboard focus outlines are easier to manage consistently in stylesheets than per-element inline rules.
• Avoid hiding content carelessly — style="display: none;" removes content from the accessibility tree; use thoughtfully.
• Respect user preferences — Stylesheets can honor prefers-reduced-motion and dark mode; inline styles often cannot.

💡 Best Practices