A Smarter Way To Learn HTML & CSS(2015)

6
Specifying a font size

Let’s change the font-size of your paragraph text and your h1 heading. Open your styles.css file and add the two lines highlighted below.

p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.2em;
}
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 2em;
}

When you specify 1.2em as the paragraph font size, you’re saying (without getting too technical) that you want paragraph text to be 1.2 times the default text size—the size that the browser would display if you didn’t specify a size. If you specified 1em, you’d get the default size. .75em would be three-quarters of default size. 1.5em would be 150% of default size. 3.5em would be three-and-a-half times default size. This may come as a surprise: When you specify 2em as the h1 size, you’re not saying you want the h1 heading to be 200% of the default h1 size, but 200% of the default text size. A 2em heading is the same size as 2em paragraph text. The heading, though, will be bold by default and the paragraph won’t be. Things to notice:

· font-size: 1.2em; is indented 2 spaces.

· There is no space between 1.2 and em.

· The line ends with a semicolon.

Coding Alternatives to be Aware Of

Instead of specifying font-size in ems, you can specify it in percentages, pixels, or points. In this program we’ll stick to ems for font-size.

Save the CSS file. Display your HTML file. Find sample CSS code at:
http://asmarterwaytolearn.com/htmlcss/practice-6-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/6.html