HTML and CSS Reference
In-Depth Information
THE LINK ELEMENT AND ITS KEY ATTRIBUTES
h e major link element is the
a
element. So, most of this chapter will focus on the
<a>
tag.
However, before doing that, the
<link>
tag is important to consider. It, too, loads pages, and
while the i les loaded using the
link
element cannot be seen, they're an important kind of
data-loading feature that needs to be understood for optimum use.
h e attributes used with both
<a>
and
<link>
tags share attribute characteristics with all
HTML5 elements, so they can be treated just like an attribute for
<h1>
,
<body>
, or any other
HTML5 tag. However, the attributes used with link elements tend to focus on loading i les
(
.html
,
.css
, and
.js
) rather than on appearance.
h e
link
element itself is part of the metadata content and is found within the head con-
tainer at the top of a Web page. In Chapter 3, you saw how to use
link
to load external CSS
i les. In the i rst section, I show you how to set up your Web page to load mutually independ-
ent style sheets.
ALTERNATE STYLE SHEETS
In an attempt to make Web pages as accessible to as many users as possible, the new HTML5
browsers have pop-up menus that allow you to select from more than one style sheet. Using
the
<link>
tag with the
rel
attribute set to
alternate stylesheet
, you can include as
many style sheets as you want, and the user can select which she likes best. Here's the general
format:
128
<
link rel
=
”stylesheet”
type
=
”text/css”
href
=
”default.css”
title
=
”default”
>
<
link rel=
”alternate stylesheet”
type
=
”text/css”
href
=
”other.css”
title
=
”alternate”
>
h e
ref
value
alternate stylesheet
is an entity that is dif erent from the
alternate
value that I cover in the next section. You can load as many style sheets as you want; however,
the user can only change to an alternate style sheet — not to a regular style sheet.
To see how the alternate style sheets work, this next example begins with two dif erent
external style sheets saved in i les named
warm.css
and
cool.css
. h en, the Web page
code creates the code that loads the warm style sheet as the default, and users may choose to
switch between the two styles.
Warm Color Theme
@charset “UTF-8”;
/* CSS Document */
body
{
/*FFE0A3,7F7D78,FFFAF0,7F7052,CCC8C0 */
font-family:
Verdana
,
Geneva
,
sans-serif
;
font-size:
11
;
background-color:
#FFFAF0
;
color:
#7F7052
;
}