HTML Style Attribute: How it Works with Examples

You use the style attribute to add CSS to a single HTML element without using a stylesheet or class.

What Is the HTML <style> Attribute?

The style attribute lets you write CSS code inside an HTML tag. It sets the look of one element only. You place it inside the tag with the element’s name. The browser reads it and applies the CSS directly to that element.

You can use this attribute on most HTML tags. It works on <div>, <p>, <h1> and even on <body>, <span>, and <table>. You should not place it inside the <head> or <script> tags. It works only on visible HTML tags that appear on the page.

You place the style attribute inside an HTML element tag. Write CSS as text between quotation marks after the equal sign. Each CSS rule ends with a semicolon. Use property and value with a colon between them.

<p style="color: red; font-size: 16px;">Text with red color and 16px size</p>

This line tells the browser to make the text red and set its size to 16 pixels.
Each property works only for that exact element.

You can set colors, size, borders, spacing, and position.
These are the most used properties:

• color
• font-size
• background-color
• margin
• padding
• border
• width
• height

These rules work well inside style.

Some CSS rules will not work here. You cannot write @media, @keyframes, or full selectors inside this attribute. It does not allow pseudo-classes like :hover, :first-child, or group selectors like div, p.

You also can’t nest rules or write multiple blocks. The browser will ignore those if you try to place them. So this method only gives styles to one single element, nothing more.

So, can I override external CSS with the style attribute?

Yes, you can. CSS inside the style attribute has higher power than stylesheets or <style> tags. The browser reads it last and treats it as final unless !important is used outside.

Here is an example:

<p style="color: blue;">This text shows as blue even if a stylesheet sets it to red</p>

The inline style takes control unless a more specific rule uses !important.

Here are some cases to avoid using the style attribute:

• Use it only for testing or for small changes.
• Avoid it when your page grows or when many elements need the same look.
• It becomes hard to manage.
• It also slows page updates because you must repeat the same code.

Inline Style vs <style> Tag vs External CSS

There are three main ways to apply CSS in HTML. Each one has a role and a place.

Inline Style

• This method uses the style attribute.
• It applies CSS to one element.
• Code stays with the element in the HTML line.

<style> Tag

• You place it in the <head> tag.
• It gives styles to many elements with selectors.
• You write regular CSS syntax inside it.

External CSS

• You link a .css file using <link>.
• It keeps HTML clean.
• Best for large websites or shared code.

Here is a table that shows you the key differences:

Here is the use case for each one:

• Use inline style for small tests or one-off tweaks.
• Use <style> tag for small sites or internal dashboards.
• Use external CSS for any page that grows or uses a design system.

Examples of the style Attribute in HTML

Inline Style on a Button:

<button style="background-color: green; color: white;">Click Me</button>

This button gets a green background and white text. The styles apply only to this button. No class or ID is needed. The tag holds the style alone.

Override External Style:

<head>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <p style="font-size: 20px;">This text shows larger than the default</p>
</body>

Even if the stylesheet sets another size, this inline style takes control. The page reads this value last and uses it as the final one.

Add Spaces and Border:

<div style="padding: 10px; border: 1px solid black;">
  This box has padding and a black border
</div>

The box shows space inside and a thin black edge around it. All this appears from styles inside the tag, not from classes or stylesheets.

Inline Style with CSS Error

<p style="@media screen { color: red; }">This won’t work</p>

This fails because @media can’t go inside a style attribute. The browser skips it and shows the text with the default color.

Wrapping Up

In this article, you learned how the style attribute works and where to use it.
You also understood how it affects CSS and when to skip it.

Here is a quick recap:

• Use the style attribute for one element.
• It overrides other CSS but has limits.
• You should not place full CSS logic inside it.
• Use inline only for small tasks or fast changes.
• Use external files or <style> tags for a complex design.

FAQs

<p style="color: red; font-size: 16px;">This is red text.</p>

<div style="width: 100px; height: 100px; background: blue;"></div>

<style>
  p {
    color: green;
  }
</style>

<p style="color: green;">Green text</p>

Similar Reads