HTML Style Attribute

The HTML style attribute allows you to apply CSS styles directly to an HTML element. You can use it to change text colors, backgrounds, font sizes, spacing, borders, and other visual properties without creating a separate CSS rule.

In this tutorial, you will learn how the HTML style attribute works, see practical examples, and understand when to use inline CSS.

What Is the HTML Style Attribute?

The style attribute is a global HTML attribute that lets you define CSS declarations inside an element’s opening tag.

For example:

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

Here, color: blue; is a CSS declaration that changes the paragraph’s text color.

You can use the style attribute with most HTML elements, including headings, paragraphs, images, buttons, and div elements. Learn more about other HTML global attributes to understand which attributes can be used across different elements.

HTML Style Attribute Syntax

The basic syntax is:

<tagname style="property: value;">Content</tagname>

• style is the HTML attribute.
• property is the CSS property you want to change.
• value specifies how that property should appear.
• A semicolon separates CSS declarations.

For example:

<h1 style="color: green; font-size: 32px;">
    Welcome to HTML
</h1>

This example displays a green heading with a font size of 32 pixels.

Changing Text Color and Font Size

You can use the color property to change text color and font-size to control the size of the text.

<h2 style="color: red;">Red Heading</h2>

<p style="font-size: 18px;">
    This paragraph uses larger text.
</p>

You can also combine multiple CSS properties in one style attribute.

<p style="color: navy; font-size: 20px; font-weight: bold;">
    This is bold navy text.
</p>

Each declaration is separated by a semicolon.

Changing Background Color and Alignment

The background-color property changes an element’s background, while text-align controls horizontal text alignment.

<div style="background-color: lightblue; text-align: center; padding: 20px;">
    <h2>Welcome</h2>
    <p>Learn web development with Web4Learners.</p>
</div>

This creates a light-blue section with centered text and internal spacing.

For more complex page designs, you can combine HTML elements with reusable CSS classes rather than writing the same inline styles repeatedly.

Adding Borders and Margins

The style attribute can also control borders and spacing.

<p style="border: 2px solid black; padding: 10px; margin: 20px;">
    This paragraph has a border and spacing.
</p>

In this example:

• border adds a black outline.
• padding creates space between the text and the border.
• margin creates space outside the element.

These properties are useful when creating simple layouts and highlighting content.

HTML Style Attribute vs. CSS

Inline CSS is convenient for quick styling, but it is not always the best choice for larger websites.

Feature	Style Attribute	External CSS
Location	Inside an HTML element	In a separate CSS file
Reusability	Limited	High
Maintenance	Can become difficult	Easier for large projects
Best use	Small, one-off styles	Consistent website-wide styling

For example, if ten buttons need the same appearance, creating one CSS class is usually easier than adding identical style attributes to every button.

You can also use the HTML ID attribute to target a specific element with a CSS rule.

Important Things to Remember

• The style attribute contains CSS declarations, not HTML elements.
• CSS property names and values must be written correctly.
• Separate multiple declarations with semicolons.
• Inline styles are useful for small, specific changes.
• Prefer internal or external CSS for reusable designs and easier maintenance.
• Inline styles can override ordinary stylesheet rules, although CSS specificity, importance, and cascade rules determine the final result.

Frequently Asked Questions

Is the HTML style attribute a CSS property?

No. style is an HTML attribute. It contains CSS properties and their values.

Can I use multiple CSS properties in one style attribute?

Yes. Separate each declaration with a semicolon.

<p style="color: red; font-size: 18px; text-align: center;">
    Styled paragraph
</p>

Is the style attribute supported in HTML5?

Yes. The style attribute is supported in modern HTML and can be used with most HTML elements.

Should I use inline CSS for every element?

No. Inline CSS is useful for quick, unique styles, but reusable CSS classes and external stylesheets are generally better for maintaining larger websites.