find and solve || findandsolve.com
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>

Example

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

Background Color in HTML

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

Example

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

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:

Example

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

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.

Example
<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>
output

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:

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

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

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

Left paragraph

Align Right paragraph


Summary

  • 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