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:
| 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:
This is a HeadingThis 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:
This is a HeadingThis 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:
This is a Arial fontThis 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:
Center alignmentLeft 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 |
|---|
helpful post
Thank for this formatting option. Found it very useful