You use the style attribute to add CSS to a single HTML element without using a stylesheet or class.
Table of Content
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:
colorfont-sizebackground-colormarginpaddingborderwidthheight
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
styleattribute. - 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
.cssfile using<link>. - It keeps HTML clean.
- Best for large websites or shared code.
Here is a table that shows you the key differences:
| The type | The location | Affects | Reused | Load |
|---|---|---|---|---|
| Inline Style | Inside the Tag | One element only | No | Very fast |
| <style> in <head> | In the <head> | Whole page | Yes | Fast |
| External File | Linked File | All pages | Yes | Slower |
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
styleattribute 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
How do I use the <style> attribute in HTML?
<p style="color: red; font-size: 16px;">This is red text.</p>Can I use multiple CSS properties in the <style> attribute?
<div style="width: 100px; height: 100px; background: blue;"></div>What is the difference between <style> tag and style attribute?
<style>
p {
color: green;
}
</style>
<p style="color: green;">Green text</p>Similar Reads
The HTML canvas tag draws shapes and images. It also helps you draw text with code. It gives control over…
The HTML class attribute helps group elements. It helps you update the page style without changing the structure of HTML.…
The HTML title attribute adds extra info to any element. You can use it to show tooltips on hover. What…
The <i> tag stands for "italic." It marks text that has a different voice or tone, such as a technical…
The HTML s tag places a line across text that has no longer value or does not hold importance. It…
In this article, you will learn how the browsers read nested lists in HTML and how to use them with…
Forms need instructions so users know what to enter. You use the HTML label tag to give names to input…
HTML5 gave the web new elements that describe content with more meaning. Developers now use these elements to build pages…
The <dialog> tag is used to build modal popups in HTML. It shows alerts and messages without third-party scripts. Understand…
The HTML section tag groups parts of a web page that share one theme. It gives clear meaning to content.…
