HTML Introduction | HTML Basic Elements | HTML style

Tags:

By using the style attribute of an HTML element, you can set CSS styles directly on that HTML element. However, when you specify the style attribute this way, the style applies to only one HTML element.

Syntax

<tagName style="propertyName:propertyValue"></tagName>

Changing the background color

The following example changes the background color by using the style attribute.

<div style="background-color:yellow">
    Changing the background color with the style attribute
</div>

Run code

Changing the text color

The following example changes the text color by using the style attribute.

<div style="color:blue">
    Changing the text color with the style attribute
</div>

Run code

Changing the text size

The following example changes the text size by using the style attribute.

<div style="font-size:150%">
    Changing the text size with the style attribute
</div>

Run code

Changing paragraph alignment

The following example changes paragraph alignment by using the style attribute.

<div style="text-align:center">
    Changing paragraph alignment with the style attribute
</div>

Run code

Changing multiple styles

You can apply several CSS styles at once by using the style attribute.

<div style="background-color:yellow; color:blue; font-size:150%; text-align:center">
    Changing several styles with the style attribute
</div>

Run code

CSS properties and property values used in the style attribute value are separated with semicolons (;).

When using only one CSS property, or for the last CSS property among several CSS properties, the semicolon (;) can be omitted.