Colors and Backgrounds - Exercise

Contact Us or call 1-877-932-8228
Colors and Backgrounds - Exercise

Colors and Backgrounds

Duration: 15 to 25 minutes.

In this exercise, you will continue to work on Stories.html by applying background and color styles.

  1. Open BackgroundsAndColors/Exercises/Stories.html.
  2. Modify the color and background 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 backgrounds and colors in CSS.
  3. There are images in Exercises/Images that you may want to use. You're also welcome to use any other images you have access to.
  4. 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:

BackgroundsAndColors/Solutions/Stories.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<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;
		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;
	}
</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;">
<p>Pooh always liked a little something at 
---- 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;">
<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