HTML and CSS Reference
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
< 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
/* CSS Document */
font-family: Verdana , Geneva , sans-serif ;
font-size: 11 ;
background-color: #FFFAF0 ;
color: #7F7052 ;