Lesson 6 – HTML Text Styles

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:

 <tag name e.g. p, b etc.  style = “property:value;”>  
  • Background Color Change in HTML:

HTML Background color change tag <body style = “background-color: yellow;”> will set the entire color of a web page to yellow.  Where as <p style = “background-color: yellow;”> will set paragraph color to yellow. Example is explained below:

<!DOCTYPE html>
<html>
<head>
<title>Background Color  Example</title>
</head>
<body>
<p style=”background-color : yellow;”>This is a background color change example</p>
</body>
</html>

The result will be displayed as:

  Background Color Example

This is a background color change example

 

  • Text Color Change in HTML:

    HTML text color change tag <h1 style=”color:green;”> will set heading text color to green. Where as <p style=”color:red;”> will set paragraph text color to red. The example is explained below:
<!DOCTYPE html>
<html>
<head >
<title>Text Color  Example</title>
</head>
<body><h1 style=”color:green;”> This is a Heading </h1>
<p style=”color:red;” >This is a paragraph </p>
</body>
</html>

The result will be displayed as:

  Text Color Example

This is a Heading

This is a paragraph

 

  • Text Size Change in HTML:

HTML text size tag <h1 style=”font-size:250%;”> will increase the h1 font by 250 %. Where as <p style=”font-size:150%;”> will increase the paragraph text size by 150%. The example is shown below

<!DOCTYPE html>
<html>
<head >
<title>Text Size  Example</title>
</head>
<body>
<h1 style=”font-size:250%;”> This is a Heading </h1>
<p style=”font-size:150%;” >This is a paragraph </p>
</body>
</html>

The result will be displayed as:

  Text Size Example

This is a Heading

This is a paragraph

 

  • Font Change in HTML:

HTML font change tag <h1 style=”font-family:Arial;”> will set the heading font to Arial. Where as <p style=”font-family:calibri;”> will set the paragraph font to Calibri. The example is shown below:

<!DOCTYPE html>
<html>
<head >
<title>Font Change Example</title>
</head>
<body>
<h1 style=”font-family:arial;”> This is a Arial font </h1>
<p style=”font-family:calibri;”>This is a Calibri font </p>
</body>
</html>

The result will be displayed as:

  Font Change Example

This is a Arial font

This is a Calibri font

 

  • Text Alignment in HTML:

HTML alignment tag <h1 style=”text-align:center;”> will set heading into the center of a web page. Where as <p style=”text-align:right;”> will set paragraph alignment to right side. The example is explained below:

<!DOCTYPE html>
<html>
<heading>
<title> Text Alignment Example</title>
</heading>
<body>
<h1 style=”text-align:center;”>Center alignment</h1>
<p style=”text-align:left;”>Left side alignment</p>
</body>
</html>

The result will be displayed as:

  Text Alignment Example

Center alignment

Left side alignment

 

Chapter Summery:

  • Use html <style = “background-color: ” color name” > attribute  to change background color.
  • Use html <style=”color:green;”> attribute to change text color.
  • Use html <style=”font-size:250%;”> attribute to change text size.
  • Use html <syle=”font-family:Arial;”> attribute to change text font.
  • Use html <style=”text-align:center;”> 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:

<h1 style=”color:Blue;”  align=”center”>* Some Text*</h1>

 

Practice Exercise:

<!DOCTYPE html>
<html>
<head >
<title>Practice Exercise</title>
</head>
<body>
<h1 > This is a Heading </h1>
<p> This is a Paragraph </p>
</body>
</html>

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.
Click here to practice above exercise in real time HTML code editor

Leave a Reply

Your email address will not be published. Required fields are marked *

− 4 = 2