in , ,

HTML Styles

HTML Styles
HTML Styles

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.


I am Red

I am Blue

I am Big

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.


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>



Set background color for two different elements:


<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>


Text Color

The CSS color property characterizes the content color for an HTML element:


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


The CSS font-family property characterizes the text style to be used for an HTML element:


<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:


<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:


<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.

salman khan

Written by worldofitech

Leave a Reply

Swift Data Types

Swift Data Types

Swift Optionals

Swift Optionals