HTML and CSS Reference
In-Depth Information
Table 3-7 CSS Properties and Options (continued)
Property Name
Options That Can Be Controlled
margin
• length
• percentage
text
• alignment
• color
• decoration
• indentation
• spacing
• white space
Specifying Alternative
Fonts
If a Web page font is
not available on users'
computers, you can create
a list of fonts and the
browser will determine
the font to use. For
example, if the Web page
uses a Geneva font, but
Arial or Helvetica would
also work well, you create
a comma-separated list
of acceptable fonts, using
<font face="geneva,
arial, helvetica">
your
text
</font> as the code.
If a Web page uses a font
that Web page visitors
do not have on their
computers, the Web page
appears using a default
font (usually Times New
Roman).
The following code shows an example of an embedded style sheet that you will use
in the chapter project:
<style type=”text/css”>
<!--
body
{font-family: Arial, Verdana, Garamond;
font-size: 11pt;}
h1, h2, h3
{color: #020390;}
a
{text-decoration: none;
color: #020390;}
a:hover
{background: #020390;
color: #01d3ff;}
-->
</style>
This embedded style sheet defines four elements on the page: body, headings,
links, and the link-hover property. The first style statement uses the
body
selector to
specify that all text on the Web page should be one of the font families: Arial, Verdana, or
Garamond, in 11-point size. Computers do not always have every font-family installed, so
Web developers usually specify multiple font-families. If the first font-family is not avail-
able, then the next takes effect. If none of the named font-families are installed, the com-
puter's default font is used. Separate the font-families by commas.
The second style statement defines values for the h1, h2, and h3 properties. The
value #020390 will give all h1, h2, and h3 headings on this Web page the color dark blue.
On the home page, there are no headings, but there are headings on the second Web page,
and later in the chapter you will use this same embedded style sheet for that Web page,
which has h1, h2, and h3 headings.
The third style statement defines one property of the link element. The selector
a
is used to indicate the link element. The property-value statement text-decoration: none;
color: #020390; changes the appearance of links from the default underlined, blue color
text. The default style for text links is underlined text. In order to eliminate that under-
line, you can set text-decoration to none. There are several values for text-decoration,
including: none, underline, overline, and line-through. Also as a default, linked text is blue
before being visited. With the inline style, you can change that color. Because the style
statement uses
a
as the selector, it changes all link states (normal, visited, active) to these
property values. You can also define a unique style for normal, visited, and active links by
creating three separate style statements with
a:link
,
a:visited
, and
a:active
as the selectors.
The last style statement uses the
a:hover
selector to define the style of a link
when the mouse pointer points to, or
hovers
over, a link. In this statement, you use a
