The HTML style attribute allows you to apply CSS directly to an individual HTML element. You can use it to change text colors, font sizes, backgrounds, spacing, borders, and other visual properties without creating a separate CSS rule.
The style attribute is useful for quick styling and simple demonstrations. However, for larger websites, internal or external CSS usually provides better organization and maintainability.
What Is the HTML Style Attribute?
The style attribute is a global HTML attribute that accepts CSS declarations as its value. You can add it to most HTML elements to control their appearance.
For example:
<h1 style="color: blue;">Welcome to Web4Learners</h1>
<p style="font-size: 18px;">Learn HTML and CSS step by step.</p>The heading appears blue, while the paragraph uses a font size of 18 pixels.
To understand how attributes work, explore our guide to HTML attributes.
HTML Style Attribute Syntax
The basic syntax is:
<element style="property: value;">Content</element>The syntax contains three main parts:
- Element: The HTML element you want to style.
- Property: The CSS property you want to change.
- Value: The value assigned to that property.
For example:
<p style="color: green; font-size: 20px;">
This paragraph uses inline CSS.
</p>The color property changes the text color, while font-size controls the size of the text. When adding multiple CSS declarations, separate them with semicolons.
Change Text Color Using the Style Attribute
You can use the color property to change the color of text inside an HTML element.
<h2 style="color: red;">This heading is red.</h2>
<p style="color: green;">This paragraph is green.</p>You can specify colors using names, hexadecimal values, RGB values, and other supported CSS color formats.
For example, color: #1769aa; sets the text to a shade of blue.
Change Font Size and Font Family
The font-size property controls text size, while font-family specifies the preferred typeface.
<p style="font-size: 24px;">
This paragraph has larger text.
</p>
<p style="font-family: Arial, sans-serif;">
This paragraph uses the Arial font.
</p>You can combine both properties in one style attribute:
<h2 style="font-family: Arial, sans-serif; font-size: 28px; color: navy;">
Learn Web Development
</h2>Change Background Color
Use the background-color property to apply a background color to an HTML element.
<div style="background-color: #eaf2ff; padding: 20px;">
<h2>About Our Website</h2>
<p>Explore tutorials for learning web development.</p>
</div>In this example, the <div> has a light blue background and padding that creates space around its content.
Add Borders, Margins, and Padding
The style attribute also supports CSS properties for spacing and borders.
<div style="border: 2px solid blue; margin: 20px; padding: 15px;">
This box has a blue border and additional spacing.
</div>Here, border adds an outline, margin creates space outside the element, and padding creates space inside the border.
Learn how these properties work with reusable designs in our guide to CSS classes.
Complete HTML Style Attribute Example
The following example combines several inline CSS properties in a complete webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Style Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; background-color: #f5f7fb; padding: 20px;">
<h1 style="color: #1769aa; text-align: center;">
Welcome to Web4Learners
</h1>
<p style="font-size: 18px; color: #333;">
Learn HTML and CSS with practical examples.
</p>
<div style="background-color: white; padding: 20px; border: 1px solid #ddd; border-radius: 8px;">
<h2 style="color: navy;">Start Learning Today</h2>
<p>Build your website development skills step by step.</p>
</div>
</body>
</html>Save the code as index.html and open it in your browser to see the styles applied to the webpage.
Style Attribute vs. Internal CSS vs. External CSS
The style attribute is one of three common ways to add CSS to HTML.
| Feature | Style Attribute | Internal CSS | External CSS |
|---|---|---|---|
| Location | Inside an HTML element | Inside a <style> element | Separate .css file |
| Scope | Individual element | One HTML document | Multiple linked pages |
| Reusability | Limited | Within the document | High |
| Maintenance | Harder at scale | Suitable for small pages | Easier for larger websites |
For more details, explore our tutorials on internal CSS and external CSS.
Advantages and Disadvantages of the Style Attribute
The main advantage of the style attribute is simplicity. It lets you apply a quick style without creating a separate CSS rule or stylesheet.
However, repeated inline styles can make HTML difficult to maintain. Updating the same design across many elements requires changing multiple attributes, and inline styles can override ordinary stylesheet declarations for the same property.
For reusable designs, CSS classes and external stylesheets are usually a better choice.
Frequently Asked Questions
What is the style attribute in HTML?
The style attribute allows you to apply CSS declarations directly to an HTML element.
Can I use multiple CSS properties in one style attribute?
Yes. Separate each CSS declaration with a semicolon.
Is the style attribute the same as CSS?
No. CSS is the styling language, while the style attribute is an HTML attribute used to apply CSS declarations directly to an element.
Should I use the style attribute for an entire website?
Generally, no. Internal or external stylesheets make it easier to reuse and maintain styles across multiple pages.
Final Thoughts
The HTML style attribute provides a quick way to apply CSS directly to individual elements. It is helpful for simple examples and one-off styling, but reusable CSS classes and external stylesheets are usually better for larger projects. Understanding the style attribute will help you learn how HTML and CSS work together.