The HTML style attribute is used to add styles to an element, like color, textual style, size, and more.
Styles in HTML are essentially rules that describe how a document will be introduced in a browser. Style information can be either attached as a separate document or inserted in the HTML document.
Example
I am Red
I am Blue
I am Big
In this article, you will learn-
The HTML Style Attribute
HTML code needs the style attribute for web pages to be delivered in internet browsers like Chrome, FireFox, IE for them to be shown as they are expected to look. HTML tags can contain different information, and the style attribute controls the appearance of information in HTML blocks using inline styling.
Setting the style of a HTML element, should be possible with the style attribute.
The HTML style attribute has the accompanying syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
You will learn more about CSS later in this tutorial.
Background Color
The CSS background-color property characterizes the background color for an HTML element.
Example
Set the background color for a page to powderblue:
<body style="background-color:powderblue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>
Example
Set background color for two different elements:
<body> <h1 style="background-color:powderblue;">This is a heading</h1> <p style="background-color:tomato;">This is a paragraph.</p> </body>
Text Color
The CSS color property characterizes the content color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>
Fonts
The CSS font-family property characterizes the text style to be used for an HTML element:
Example
<h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p>
Text Size
The CSS font-size property characterizes the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS text-align property characterizes the horizontal text alignment for an HTML element:
Example
<h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p>
Chapter Summary
- Use the style attribute for styling HTML elements
- Use background-color for background-color
- Use color for text colors
- Use font-family for text fonts
- Use font-size for text sizes
- Use text-align for text alignment
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.