Font Family and Font Size - Exercise

Contact Us or call 1-877-932-8228
Font Family and Font Size - Exercise

Font Family and Font Size

Duration: 15 to 25 minutes.

In this exercise, you will modify an HTML page by applying font sizes to different elements on the page.

  1. Open Fonts/Exercises/Stories.html for editing. The file contains several children's stories.
  2. Modify the font family and size 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 font family and font size with CSS.
  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:

Fonts/Solutions/Stories-FontFamilyAndSize.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;
	}
	
	p
	{
		font-family: "Comic Sans MS", Times, serif;
		font-size: small;
	}
	
	.topLink
	{
		font-family: "Comic Sans MS";
		font-size: medium;
	}
</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">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">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">Back to top</a>
</body>
</html>
Next