HTML5 Basics–Practice 9

Today I will explain about few more ways we can implement style to our page and about margin, border and padding. Please go through HTML5 Basics–Practice 8 before starting this practice.

We will create a new html file, eg5.html. Please type the code yourself and do not copy paste.

“Code starts”

<!DOCTYPE html>
<html>
<head>
<title>Fifth Page</title>
<style>
#bla
{
color: red;
}

p.blabla
{
color: blue;
}

#test1
{
border: 1px solid green;
}
#test2
{
border: 1px solid green;
padding: 35px;
}
#test3
{
border: 1px solid green;
margin: 55px;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<p id=”bla” >This line is using id attribute.</p>

<p class=”blabla”>This line is using class attribute.</p>

<p id=”test1″>This sentence has border.</p>

<p id=”test2″>This sentence has padding and border.</p>

<p id=”test3″>This sentence has margin and border.</p>
</body>
</html>

“Code ends”

Output:

Capture11

In this code you can check we have assigned different styles to different paragraphs.The first way is to assign an id. We are assigning the style in the <style> tag. We use # to define style for the particular id. Similarly we have assigned style using class attribute as well.

We have used border, margin and padding. In simple words, padding is the space between between the content and the border, whereas margin is the space outside the border. Check the output to see the difference.

Advertisements

2 thoughts on “HTML5 Basics–Practice 9

  1. Trade24ReviewSpunc says:

    Me and my friend had some experience in trading on Tade24 previously ,so recently I made a decision to inquire any info about this companyWe examine into the trade-24 company as we have previosly had an experience in trade on their platform. So, that’s why exactly we want to research how in fact rightful trade24 performance are to me. I’ll absolutely be as happy as a clam at high tide to notice a feedback or answer on it.

    broker Trade-24.com to be avoided at the moment|
    Trade24 Get Your Money Back Now|
    Scam Broker Trade24|

    Like

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