Lessons
Lesson 2: Resizing text
... Now that you've learned about CSS properties and values and, in particular, about the color property, you'll learn how to use Font Tester; then, before you learn how to change text color, you'll learn how to resize text and select a font.
To start, read this overview of Font Tester.
Font Tester's main parts
Font Tester's Web page contains two main sections. On the left, comprising about a third of the screen, is the area containing some controls and a number of CSS font properties. On the right, comprising about two-thirds of the screen, are the text columns. They can vary in number from 1-3, a number you have control over. Further, you can modify the text in the text columns using the aforementioned CSS font properties.
At the top of the left section, below the site's name, are the controls that determine how many text columns will display (View) and to which text column your font property changes will apply (Edit).
The View section contains three icons. Clicking the leftmost icon displays one text column; clicking the middle icon displays two text columns; clicking the rightmost icon displays three text columns. Make sure the rightmost icon is selected so you get a three-column display.
The image below contains a three-column display.
The Edit section also contains three icons. Clicking the leftmost icon applies the CSS changes you make to the leftmost text column, Column 1; clicking the middle icon applies the CSS changes you make to Column 2; clicking the rightmost icon applies the CSS changes you make to Column 3. If Edit's leftmost icon isn't selected, click it.
An up-close look at its "CSS Properties"
Now that your screen is set up, look at the heading "CSS Properties," which is in the leftmost column. Immediately beneath it are these five text properties:
- font-size
- font-family
- color
- background-color
- text-align
Below the first 5 are 14 other text properties; each is preceded by a checkbox.
At the top of each text column are two links, Edit Text and Get CSS Code, shown below. Please read the text in the next graphic.
In the first text column, click Edit Text. A pop-up will appear headed "Enter your new text." Type several lines of text. When you're done, click OK.
Now, I'm going to change each of Font Tester's first 5 CSS properties. The first one is font-size. Though on my 800x600 screen the font-size is easy to read, I'm going to increase it. Click the down arrow to the right of the first font-size box, and click "other."
Press your TAB key. Type 110 in font-size's second text box. Press TAB. Select "%". Your selections should match these:
The text in your first text column should now be larger.
Change the font-size in text column 2.
- Select column 2 by clicking the middle Edit icon.
- Type the same text into column 2 that's in column 1.
- Change the font-size property to "other" if it's anything else.
- Press TAB twice.
- Select em.
- Press SHIFT-TAB.
- Type 1.1.
Column 1 should still have the font-size of 110%; column 2 should have the font-size of 1.1 em. Notice any difference?
Ready for a challenge?
Set the font-size in column 3 to medium. It should now be bigger than that in both other columns.
- Return to column 1. What percent value do you need to enter to get column 1's font-size to match column 3's?
- Return to column 2. What em value do you need to enter to get column 1's font-size to match column 3's?
When you're done, your columns should look like this:
Of the nine choices in the font-size property's third text box, only three are commonly used in CSS: px, %, and em. Read more about font "units."
Read more about the font-size property