The HTML Style Attribute is used to apply CSS styles directly to HTML elements.
It allows you to change the color, size, alignment, and appearance of content.
In this tutorial, you will learn how to use the style attribute, with examples and output.
Table of Contents:
What Is HTML Style Attribute
The style attribute is used to add CSS directly inside an HTML tag.
It helps:
- Change text color
- Set background color
- Adjust font size
- Align content
Syntax of Style Attribute
Example
<tagname style="property: value;">Content</tagname>
Explanation
| Part | Description |
|---|---|
property | CSS property (color, font-size, etc.) |
value | Value of the property |
Text Color Example
Example Code
<p style="color: blue;">This is blue text.</p>
Output
This is blue text. (in blue color)
Background Color Example
Example Code
<p style="background-color: yellow;">This has a background color.</p>
Output
This has a background color. (yellow background)
Font Size Example
Example Code
<p style="font-size: 20px;">Large text</p>
Output
Large text (bigger size)
Text Alignment Example
Example Code
<p style="text-align: center;">Centered text</p>
Output
Centered text (center aligned)
Multiple Styles in One Element
You can apply multiple styles using a semicolon ;.
Example Code
<p style="color: red; font-size: 18px; text-align: right;">
Styled paragraph
</p>
Output
Styled paragraph (red, larger, right aligned)
Styling Headings
Example Code
<h1 style="color: green;">Styled Heading</h1>
Output
Styled Heading (green color)
Common CSS Properties Used
Style Attribute Properties
| Property | Description |
|---|---|
color | Text color |
background-color | Background color |
font-size | Text size |
text-align | Alignment |
font-family | Font style |
Font Family Example
Example Code
<p style="font-family: Arial;">This is Arial font.</p>
Output
This is Arial font.
HTML Style Attribute Summary
| Feature | Description |
|---|---|
| Type | Inline CSS |
| Location | Inside HTML tag |
| Multiple Styles | Yes |
| Syntax | property: value |
Advantages of Style Attribute
| Advantage | Explanation |
|---|---|
| Easy to Use | Simple for beginners |
| Quick Styling | Apply styles instantly |
| No External File | No CSS file needed |
Disadvantages of Style Attribute
| Disadvantage | Explanation |
|---|---|
| Not Reusable | Cannot reuse styles |
| Hard to Maintain | Not good for large projects |
| Messy Code | Reduces readability |
HTML style attribute, inline CSS HTML, HTML styling, HTML color, HTML font style
Best Practices
| Practice | Description |
|---|---|
| Use for small styling | Good for simple pages |
| Avoid overuse | Use CSS for large projects |
| Keep code clean | Write readable styles |
Common Mistakes
| Mistake | Result |
|---|---|
| Missing semicolon | Style may break |
| Wrong property name | No effect |
| No quotes | Invalid HTML |
| Overusing inline CSS | Poor structure |
Learn this
Frequently Asked Questions (FAQ)
1. What is the HTML style attribute?
It is used to apply CSS directly to HTML elements.
2. Can I use multiple styles?
Yes, separate them using semicolons.
3. Is style attribute better than CSS?
No, it is only for small styling.
4. Where is style attribute written?
Inside the opening tag.
5. Can I style all elements?
Yes, most HTML elements support styling.