HTML and CSS Reference
In-Depth Information
CHECKPOINT 3.1
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.
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.
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