HTML and CSS Reference
In-Depth Information
DHTML stands for Dynamic HTML. It is not a programming language, but a technique
used when HTML/XHTML, CSS, and JavaScript (and Ajax) work together to make up a
dynamic interactive Web page. With CSS we were able to control the style (i.e., color,
font, margins, etc.) of the HTML elements and store the style sheets in separate files. All
by itself, CSS is presenting a style for your page, but now we need JavaScript to bring the
Web page to life, to make it dynamic. Throughout this text we have been using event
handlers and functions with JavaScript to create rollovers, slideshows, animation, sub-
mit forms, and so on. In the next chapter we discuss how to access every element on a
Web page with the DOM. Then you can apply CSS styles and JavaScript to the DOM ele-
ments to create what will effectively make it possible to manipulate, create, and delete
any part of your page on the fly.
Sometimes a page consists of more that one style sheet. When the page is loaded, all
external and embedded style sheets are stored in an array in the order in which they are
placed within the document, just as are images, forms, and links. The array is called
styleSheets
, a property of the document object, so
document.styleSheets[0]
is the first
style sheet, normally the general style sheet for the entire page. The next style sheet,
maybe one that uses the
@import
rule, would be
document.styleSheets[1]
, and if you
embedded another style within the document, that would be
document.styleSheets[2]
.
Because each of the elements of the
styleSheets
array has a disabled property that can be
turned on and off, you can dynamically toggle between styles, allowing a user to select
a style suited to his or her own taste. It is also possible to access a specific rule within a
style sheet by using the W3C
cssRules
array or the Microsoft
rules
array. Both arrays
work with index numbers. The first rule is
cssRules[0]
, the second one
cssRulse[1],
and
so on. Example 14.27 contains two style sheets, one that is imported and one that is
embedded. By using JavaScript the user can toggle between two styles. When reverting
to the first style, one of the rules is changed; that is, the rule for the
h1
selector is
changed to purple.
EXAMPLE
14.27
<html>
<head><title>Stylesheets</title>
<style type="text/css">
1
@import url("pstyle.css");
</style>
Continues
