Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

(singke) #1
ptg16476052

142 LESSON 7: Formatting Text with HTML and CSS


Doesn’t look unusual, does it? Unfortunately, this is not valid HTML as written. Why?
The problem is with the < (less-than) character. To an HTML browser, the less-than
character means “this is the start of a tag.” Because the less-than character isn’t actually
the start of a tag in this context, your browser might get confused. You’ll have the same
problem with the greater-than character (>) because it means the end of a tag in HTML,
and with the ampersand (&) because it signals the beginning of an entity. Written cor-
rectly for HTML, the preceding line of code would look like the following instead:
<p><code>if x < 0 do print i</code></p>
Use of these entities is also important if you want to print HTML tags in your web pages,
like this:
<p>The <code><p></code> element represents a paragraph.</p>
HTML provides named entities for each of these characters, and one for the double quo-
tation mark, too, as shown in Table 7.1.

TABLE 7.1 Escape Codes for Characters Used by Tags
Entity Result
< <
> >
& &

Fonts and Font Sizes
Earlier in this lesson, I described a few font-related properties that you can manipu-
late using CSS. In fact, you can use CSS to control all font usage on the page. I also
described how the font-family property can be used to specify that text should be ren-
dered in a font belonging to a particular general category, such as monospace or serif.
You can also use the font-family property to specify a specific font.
You can provide a single font or a list of fonts, and the browser will search for each of
the fonts until it finds one on your system that appears in the list. You can also include a
generic font family in the list of fonts if you like. Here are some examples:
<p style="font-family: Verdana, Trebuchet, Arial, sans-serif;">
This is sans-serif text.</p>
<p style="font-family: ‘Courier New', monospace;">This is
monospace text.</p>
<p style="font-family: Georgia;">This text will appear in the
Georgia font, or, if that font is not installed, the browser's
default font.</p>
Free download pdf