find and solve ||
Please wait.....

HTML Styles Example

The HTML style attribute is used to add styles to an element, like background-color,color, font, size,font style  and so more.HTML Style is used to change add, the style on existing HTML elements. There is a default style for every HTML element e.g. text color is black, background color is white, etc.

The style attribute can by used with any HTML tag. To apply style on HTML tag, you should have the basic knowledge of css properties for example. color, background-color,font-size,padding, text-align, font-family etc.

HTML  style attribute is given below:

style= "property:value"  
<div style="color:red">Font Color Red</div>


<!DOCTYPE html>
This is page title section</title>
      <p style
="color:red;">This is Heading Section</p>
      <p style
="font-size:20px;">This is Paragraph Section</p>

Background Color in HTML

The background-color property is used to define background color for the HTML element.


<div style="background-color:red;">This is red background color</div>  
<div style
="background-color:green;">This is green background color</div>  

This is red background color

This is green background color

Text Color in HTML

The CSS color property defines the text color for an HTML element:


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

This is a heading color red

This is a paragraph color blue

HTML Style font-family

The font-family property specifies the font family of the HTML element.

<div style="font-family:arial;">This is a Arial font family example</div>
<p style=
"font-family:verdana;">This is a verdana font family example</p>

This is a Arial font family example

This is a verdana font family example

Text / Font Size in HTML

The CSS font-size property defines the text size for an HTML tag:

<h3 style="font-size:300%;">This is a heading</h3>
<p style
="font-size:200%;">This is a paragraph</p>

This is a heading

This is a paragraph

Text Alignment in HTML

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

<p style="text-align:left;background-color:blue;">Left paragraph</p>
<p style="text-align:right;background-color:green;">Align Right paragraph</p>

Left paragraph

Align Right paragraph


  • style : Attribute for styling in HTML elements
  • background-color : Use for background color
  • color : Usevfor text colors
  • font-family : Use for text fonts
  • font-size : Use for text sizes
  • text-align : Use for text alignment