Manuscript for HTML Tutorial #17

Listed below is the manuscript of all textual instructions used in HTML Tutorial #17 - Increasing or Decreasing the Size of Your Text. Most of this text is displayed inside the yellow balloons used to guide viewers as they watch the lessons.

Students and instructors may find it helpful to have a hard copy of these balloon instructions. You may print this web page to use as an aide in following, referencing, or demonstrating the web design series.

Manuscript Table of Contents

Entire HTML Tutorial Series

Tutorial #17 - Increasing or Decreasing the Size of Your Text

Lesson #17: Font Size. Click the play button to begin the tutorial.
Let’s see how to make some of our text larger, and some of our text smaller, by changing the font size.
Let’s start with our copyright notice. Since it already has its own class, we can just add a declaration to its existing style sheet rule.
You’ll notice the value we used is a number, followed by a px.
We use the px to represent pixels, which is a common unit of measure in web pages.
Since the default size for text is usually 16 pixels, our copyright notice should now be smaller than before.
Now, we could set the font-size for both of our headlines by adding a font-size declaration to the headlines rule.
However, we’d like our main (top) headline to be a little larger than...
...our sub (bottom) headline.
So, we’ll need a way to put each headline into its own class.
For this we can use the span element, which creates a generic container for inline content.
As you can see, we’ve enclosed each headline inside of its own span tag set.
Now we can include the class attribute, with a unique value for each headline.
Let’s save, then go to our style sheet, and add two new rules for these new classes.
Now our main headline will be 32 pixels, and our sub headline will be 22 pixels.
You may want to experiment with different sizes. Once you have your text the size you want it, you can move on to Lesson #18.

<<<Tutorial #16

Tutorial #18>>>