Text Properties - Exercise

Contact Us or call 1-877-932-8228
Text Properties - Exercise

Text Properties

Duration: 10 to 20 minutes.

In this exercise, you will continue to work on Stories.html by applying text properties to different elements on the page.

  1. Open CssText/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 these CSS text properties.
  3. When you are done, open CssText/Exercises/Stories.html in your browser to see the results. You are welcome to go back to the code and continue to work.

Solution:

CssText/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-shadow: 2px 2px 2px #666;
	}
	
	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-align: right;
		display: block;
		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>

<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>
<a href="#top" class="BackToTop">Back to top</a>

<hr>

<h2 id="alice">A MAD TEA-PARTY - Lewis Carroll</h2>

<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>
<a href="#top" class="BackToTop">Back to top</a>

<hr>

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

<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>
<a href="#top" class="BackToTop">Back to top</a>
</body>
</html>
Next