You can easily edit background color, text size, text color and text alignment of any document using HTML text style tags.

HTML text style tags use the following syntax:

  style = “property:value;”>  

• Background Color Change in HTML:

HTML Background color change tag will set the entire color of a web page to yellow.  Where as

will set paragraph color to yellow. Example is explained below:

style=”background-color : yellow;”>This is a background color change example

The result will be displayed as:

• Text Color Change in HTML:

  HTML text color change tag

   will set heading text color to green. Where as 

  will set paragraph text color to red. The example is explained below:

style=”color:green;”> This is a Heading

style=”color:red;” >This is a paragraph

The result will be displayed as:

• Text Size Change in HTML:

HTML text size tag

will increase the h1 font by 250 %. Where as

will increase the paragraph text size by 150%. The example is shown below

style=”font-size: 250%;”> This is a Heading

style=”font-size: 150%;” >This is a paragraph

The result will be displayed as:

 

This is a paragraph

• Font Change in HTML:

HTML font change tag 

will set the heading font to Arial. Where as 

will set the paragraph font to Calibri. The example is shown below:

style=”font-family:arial;”> This is a Arial font

style=”font-family:calibri;”>This is a Calibri font

The result will be displayed as:

 

This is a Calibri font

• Text Alignment in HTML:

HTML alignment tag 

will set heading into the center of a web page. Where as

will set paragraph alignment to right side. The example is explained below:

style=”text-align:center;”>Center alignment

style=”text-align:left;”>Left side alignment

The result will be displayed as:

 

Left side alignment

Chapter Summery:

• Use html tyle = “background-color: ” color name” > attribute  to change background color.
• Use html <style=”color:green;”> attribute to change text color.
• Use html  attribute to change text size.
• Use html  attribute to change text font.
• Use html  attribute to set text alignment.

Interview Questions:

• Can we use several html style elements at same time?

Yes, we can use several html style elements at same time, provided you don’t overlap them. For example:

Some Text*

Practice Exercise:

This is a Heading 

This is a Paragraph 

In above html code:

• Change paragraph font to ‘Times New Roman’. 
• Increase paragraph text by 200%.
• Right align the paragraph text.
• Change the background color to Red.