HTML5 Basics–Practice 5

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.

“Code starts”

<!Doctype html>
<html>
<head>
<title>Second Page</title>
</head>
<body style=”background-color:red;”>
<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>
</body>
</html>

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.

Advertisements

One thought on “HTML5 Basics–Practice 5

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s