Borders, Margin and Padding - Exercise

Contact Us or call 1-877-932-8228
Borders, Margin and Padding - Exercise

Borders, Margin and Padding

Duration: 10 to 20 minutes.

In this exercise, you will continue to work on Stories.html by applying borders, margin, and padding to different elements on the page.

  1. Open BordersMarginsAndPadding/Exercises/Stories.html.
  2. Modify the text properties of the different elements on the page. You may do this using inline styles, an embedded style sheet and/or an external style sheet. You are also welcome to add tags to the page. The object of this exercise is to get used to working with borders, margin and padding.
  3. When you are done, open Stories.html in your browser to see the results. You are welcome to go back to the code and continue to work.

Solution:

BordersMarginsAndPadding/Solutions/Stories.html
<html>
<head>
<title>Stories</title>
<style type="text/css">
	h1
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: x-large;
	}
	
	h2
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: large;
		font-style: italic;
		font-weight: normal;
		letter-spacing:.25em;
		word-spacing: .4em;
		margin-bottom: 0px;
		text-align: center;
	}
	
	p
	{
		font-family: "Comic Sans MS", Times, serif;
		font-size: small;
		line-height: 1.2;
		text-indent: 2em;
	}
	
	a
	{
		font-style: italic;
		font-weight: bold;
	}
	
	.topLink
	{
		font-family: "Comic Sans MS";
		font-size: medium;
		font-variant: small-caps;
		font-style: normal;
		font-weight: normal;
	}
	
	.BackToTop
	{
		text-decoration: none;
		text-transform: capitalize;
		border-style: groove;
		border-color: #0000ff;
		border-bottom-width: 5px;
		border-left-width: 5px;
		border-top-width: 2px;
		border-right-width: 2px;
		padding: 4px;
	}
	
	div
	{
		padding-top: 2px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 2px;
		margin-bottom: 15px;
	}
	
	body
	{
		margin: 0px;
		border: 40px ridge #cc6666;
		padding: 15px;
		background-color: #ffff99;
	}
</style>
</head>
<body>
<h1 id="top">Stories</h1>
<a href="#pooh" class="topLink">Pooh Goes Visiting</a><br>
<a href="#alice" class="topLink">A Mad Tea-Party</a><br>
<a href="#naughtyboy" class="topLink">The Naughty Boy</a><br>

<hr>

<h2 id="pooh">POOH GOES VISITING - A.A. Milne</h2>
<div style="background-image: url(Images/poohsmall.gif); 
			background-repeat: no-repeat; background-color: #ff9900; 
			color: #000066;
			border-radius: 10px;
			box-shadow: 5px 5px 2px #CCC;">
<p>Pooh always liked a little something
---- C O D E   O M I T T E D ----
 and said to himself 'Silly Old Bear!'</p>
</div> 
<a href="#top" class="BackToTop">Back to top</a>

<hr>

<h2 id="alice">A MAD TEA-PARTY - Lewis Carroll</h2>
<div style="background-image: url(Images/TeaParty.gif); 
			background-position: right; background-repeat: no-repeat;">
<p>There was a table set out under a tree
---- C O D E   O M I T T E D ----
that's the same thing, you know.'</p>
</div>
<a href="#top" class="BackToTop">Back to top</a>

<hr>

<h2 id="naughtyboy">THE NAUGHTY BOY - Hans Christian Andersen</h2>

<div style="background-image: url(Images/Cupid.gif); color: #ff3333; border-radius:10px;">
<p>Along time ago, there lived an old poet,
---- C O D E   O M I T T E D ----
 and you know, too, how ill-behaved he is!</p>
</div>
<a href="#top" class="BackToTop">Back to top</a>
</body>
</html>
Next