HTML and CSS Reference
In-Depth Information
1. List three reasons to use CSS on a Web page.
2. When designing a page that uses colors other than the default colors for text and
background, explain why it is a good reason to configure both properties: text color
and background color.
3. Describe one advantage to using embedded styles instead of inline styles.
3.5 Configuring Text with CSS
In Chapter 2 you discovered how to use XHTML to configure some characteristics of
text on Web pages, including logical style tags (such as the <strong> element) and
physical style tags (such as the <small> element). You've also already configured text
color using the CSS color property. In this section you'll learn how to use CSS to con-
figure additional characteristics of text, including font typeface, font weight, font style,
and font size. Using CSS to configure text is more flexible (especially when using an
external style sheet as you'll discover later in the chapter) than using XHTML elements
and is the method preferred by today's Web developers.
CSS and Fonts
Let's take a closer look at the CSS properties useful for configuring fonts:
font-weight , font-style , font-size , and font-family .
The font-weight property configures the boldness of the text. You can use either
numeric values ( 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , and 900 ) or text values
(including normal (default ) , bold , bolder , and lighter ). Configuring the CSS rule
font-weight:bold has a similar effect as the <strong> or <b> XHTML element.
The font-style property typically is used to configure text displayed in italics (the
same visual effect as an <i> or <em> XHTML element). The font-style property val-
ues are normal (default), italic , and oblique .
The font-size property sets the size of the font. There are a wide variety of text and
numeric values. Text values for font-size include xx-small , x-small , small , medium
(default), large , x-large , and xx-large . Valid numeric values include units of px
( pixels ), pt (standard font point sizes), percentage values, and em . Figure 3.8 demon-
strates examples of text with various font-size configurations displayed in the Firefox
Figure 3.8
A sampling of CSS
font-size values
Search WWH ::

Custom Search