We had discussed about the attribute Styles in HTML5 Basics–Practice 3. In this practice we will elaborate it with different examples of background color, font, and so on. We will write a new code here. I am naming my new file as eg2.html. Please do not copy and paste the code. Try to type it.
<h1 style=”color:green;”>Green Heading h1</h1>
<p style=”color:blue;”>Blue paragraph.</p>
<h2 style=”font-family:arial;”>Arial Font h2</h2>
<p>This is normal paragraph</p>
<p style=”font-size:5em;”>This is 5em font sized paragraph.</p>
<p style=”font-size:5pt;”>This is 5pt font sized paragraph.</p>
<p style=”font-size:5px;”>This is 5px font sized paragraph.</p>
<p style=”font-size:5%;”>This is 5% font sized paragraph.</p>
<p style=”text-align:center;”>This is a center aligned text</p>
<h1 style=”text-align:center;”>This is center aligned</h1>
<h1 style=”text-align:left;”>This is left aligned</h1>
<h1 style=”text-align:right;”>This is right aligned</h1>
Most of the tags used here have been discussed in the previous practices. Here we will be talking about different styles we can use with the element for a better look of your page.
Most of the styles you will be able to understand just by reading them. For example, background-color is for the background color of your page. If you want a style for the complete page, you can put it in the body tag. text-align is used to align the text. color is used for the text color. font-family is used for the
The interesting part in this code is of font-size. You must have noticed that I have used four different types of units to define the font size: %, em, pt, px. A font size of 100% means it has the original size. If we mention 200%, it becomes twice the original size. em represents current size of the text. If we set size in body as 10, and then later in the code we use 2em, the size of that text will become 20. This is a little confusing at first but will become clear once you start using the units at different places in the code.