A Smarter Way To Learn HTML & CSS(2015)

4
Specifying fonts

Browsers display headings and paragraphs in the font of their own choosing. But you can specify the font you want. Let’s specify a font for paragraphs. Open your text editor and create a new file.

1. In the new file type:
p {
font-family: Georgia, "Times New Roman", Times, serif;
}

2. Save the file as styles.css in the css subfolder of your my-smarter-site folder.

Now you have two files, practice.html in the my-smarter-site folder and styles.css in the css subfolder of the my-smarter-site folder. Things to keep in mind:

· There’s nothing sacred about calling your HMTL document practice.html and your CSS file styles.css. You can name the files anything you want, as long as the HTML file has the extension html and the CSS file has the extension css.

· I’ve asked you to put the CSS file in a subfolder of your main folder. This is conventional, but not necessary. You could put the CSS file in the same folder as your HTML file if you wanted to, but most developers do

Let’s look at your CSS code in detail. It begins with p. It means, “This is a style for paragraphs”—that is, all text enclosed by the tags <p> and </p>.

p {
font-family: Georgia, "Times New Roman", Times, serif;
}

p is followed by a space and an opening curly bracket.

p {
font-family: Georgia, "Times New Roman", Times, serif;
}

Next, indented 2 spaces, is the specification.

p {
font-family: Georgia, "Times New Roman", Times, serif;
}

Notice that it’s font-family, followed by a colon and a space. The list of four fonts that follow is known as a font stack. If you’re specifying a font other than the generic serif, sans-serif, etc., you need to give the browser one or more fallback fonts. (If you’re unclear about the difference between serif and sans-serif fonts, Google it.) Fallback fonts are necessary because the browser grabs the fonts for the webpage from the user’s computer. If your first font choice isn’t installed on the computer, the browser moves on to your second-choice font, then your third-choice font, etc. The stack can list as many fonts as you like, but the common practice is to list three or four. The last fallback—the last font in the stack—is always the generic, for example sans-serif, to guarantee that the browser will be able to display something in the family if none of your other choices is found. If a font name has any spaces in it, enclose it in quotation marks, as in "Times New Roman". The specification ends with a semicolon.

p {
font-family: Georgia, "Times New Roman", Times, serif;
}

Finally, on a line of its own, there’s a closing curly bracket.

p {
font-family: Georgia, "Times New Roman", Times, serif;
}

Web safe fonts are fonts that have a high likelihood of being found on the user’s computer, which makes them good to use on your page. You can find a list of common web safe font stacks at http://abt.cm/O7bwre. Now let’s specify a different font for h1 headings. Add this code to your CSS file.

h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}

Your CSS file should now include two styles.

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

Save the file. Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-4-1.html.

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