HTML and CSS Reference
In-Depth Information
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
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
Figure 14-61
htMl code for the style switcher buttons
You'll place the code for the changeStyle() function in the switchstyle.js file.
Search WWH ::

Custom Search