Working with Document Nodes and Styles - HTML, CSS, and Dynamic HTML - page 1009

To create links to the alternate style sheets:

◗

1. Return to the usconst.htm file in your text editor.

◗

2. Locate the link element for the hdo.css style sheet, and then insert the following
attribute:

title=”Web”

◗

3. Below that link element, insert the following link elements for the print and
large text style sheets (see Figure 14-60):

<link type=”text/css” title=”Print” href=”print.css”
rel=”alternate stylesheet” disabled />

<link type=”text/css” title=”Large Text” href=”largetext.css”
rel=”alternate stylesheet” disabled />

Figure 14-60 inserting preferred and alternate style sheets

◗

4. Save your changes to the file.

To switch style sheets, you'll create a function named changeStyle() that uses the title
of each style sheet as a parameter value. You'll run the function from three buttons that
you'll create now on the Constitution page.

To create the buttons to switch the style sheets:

◗ 1. Scroll down to the article element. Directly after the opening <article> tag,

insert the following code as shown in Figure 14-61:

<div id=”styleOptions”>
<button onclick=”changeStyle('Web')”>Web view</button>
<button onclick=”changeStyle('Print')”>Print view</button>
<button onclick=”changeStyle('Large Text')”>Large Text
view</button>
</div>

Figure 14-61 htMl code for the style switcher buttons

You'll place the code for the changeStyle() function in the switchstyle.js file.