Lessons
Lesson 3: Specifying a font and colors
... You've learned about CSS's font-size property. Now you'll learn about the font-family property. But before we begin, here's the answer to the previous lesson's challenge: The medium font-size matches with 1.2 ems and 120%. In Firefox, the same capital "M" in each measured 12px high.
Changing fonts
In Font Tester, the second property under the heading CSS Properties is "font-family." The label is followed by a text box. If you click its down arrow you'll see a list of fonts.
Set Column 1 to Verdana, Column 2 to Georgia, and Column 3 to Times New Roman.
At the top of Column 2, click Get CSS Code. When the Get CSS Code dialog box appears, make sure that the Column 2 CSS radio button is selected.
Notice what's after the font-family property's code: Georgia, serif. As Georgia is a serif font, Font Tester added the value "serif." If a user's computer lacks the Georgia font the browser will substitute the default serif font.
Choosing colors
In Font Tester, the third property under the heading CSS Properties is "color." The label is followed by a text box and an eyedropper. Click the eyedropper.
The color box will appear.
If the color box is blocking text column 1, hold down the left mouse button and drag the color box to the right.
If Text Color isn't checked, check it.
Move the cursor around inside the color box. When you position the cursor within it, the cursor should change to an eyedropper. Notice the text in column 1 changing color as you move your cursor. When you find a color you like, click the left mouse button. (To resume seeking a color, click the left mouse button again while it's within the color box.)
Look at the bottom of the color box.
After "Hex" is the hexadecimal value of the color you selected. Click OK to close the box.
Option: Learn more about hexadecimal color values.
A hexadecimal value contains six digits. However, when specifying a color code, if the first two digits were the same, the second two digits were the same, and the third two digits were the same, as in #0033ff, you could specify the value this way: #03f. Instead of two zeros, two threes, and two f's you can just state one of each. (The pound sign indicates it's a hexadecimal value.)
To select a background color, you click the background-color property's eyedropper. The dialog box that appears is the same as the color property's with one difference: The background-color radio button is selected.
Practice
- Set Column 1's text color to red (#f00).
- Set Column 2's text color to green (#0f0).
- Set Column 3's text color to blue (#00f).
For the next exercise, select the background colors from the Common Colors drop-down menu, which you activate by clicking the background-color property's eyedropper.
- Set Column 1's background color to Yellow.
- Set Column 2's background color to Yellow-Green.
- Set Column 3's background color to Light Gray/
Get the CSS code for Column 1. It should match this:
