HTML Style Attribute

❮ Prev

HTML style attribute is one of the HTML attributes which is used to add style to HTML elements, such as color, font, size, etc.

Here are some styles added to the HTML element via HTML style attribute:


Style attribute examples

Here are some examples of elements styled by the style attribute:

This is a green text.

This is a red text.

The background color of this text is yellow.

The background color of this text is pink.

This text is written in the middle.

This text has been left-aligned.

The font for this text has been enlarged.

The font size of this text has been reduced.

This is a round shape

This is a square

All of this & more is possible through the style attribute.

format of style attribute syntax

See HTML style attribute syntax format:

style attribute syntax format code

<tagname style="property:value;">
Example
<p style="color:red;">This is a red paragraph.</p>

property and value are both CSS Property and CSS Value, These are explained in detail in the CSS Syntax Tutorial.


Use of style attribute

In this example we've used the CSS color property which specifies the text color for an HTML element:

Example
<h1 style="color:red;">This is a heading</h1>
<p style="color:green;">This is a paragraph.</p>
Result
This is a heading

This is a paragraph.


Text size

CSS font-size property Specifies the text size for the HTML element:

Example
<h1 style="font-size:200%;">This is a heading</h1>
<p style="font-size:130%;">This is a paragraph.</p>
Result
This is a heading

This is a paragraph.


Text Alignment

The CSS text-align property defines the horizontal text alignment for the HTML element:

Example
<h1 style="text-align:right;">Right aligned heading</h1>
<p style="text-align:right;">Right aligned paragraph.</p>
Example
Right aligned heading

Right aligned paragraph.


Background Color

The CSS background-color property defines the background color for the HTML element:

Example
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
Result
This is a heading

This is a paragraph.

Example
<body>

<h1 style="background-color:tomato;">Tomato Colored Background Heading</h1>
<p style="background-color:yellow;">Yellow colored background paragraph.</p>

</body>
Result
Tomato Colored Background Heading

Yellow colored background paragraph.


Note:

We've mentioned a few attributes here to clarify the HTML attribute,You will learn a lot about HTML Attributes and their features in the next tutorials.

❮ Prev
Related Articles
Some Important CSS Tutorials:
  1. CSS Introduction
  2. CSS Template
  3. CSS Syntax
  4. CSS Selector
  5. CSS Selectors Group
  6. how to add css in html?
  7. CSS Cascading Order
  8. Cascading Priority Scheme
  9. CSS Specificity
Some Important HTML Tutorials:
  1. HTML Introduction
  2. HTML Templates
  3. HTML Elements
  4. HTML document
  5. HTML Editor
  6. HTML basic tags
  7. HTML Attribute
  8. HTML style Attribute
  9. width and height Attributes
Categories