Taking CSS manipulation techniques further you can program animation of HTML elements. To find out more about CSS try the books The Art and Science of CSS [ADAMS], CSS, DHTML, and AJAX [TEAG], or the W3C Cascading Style Sheets Home Page [W3C2]. Other useful resources are the cssvault [CSSV], cssBeauty [CSSB], Westciv CSS Tutorial [WEST], and the CSS Zen Garden [CSSZ]
In the first block the selector
h2 selects all <h3> elements, sets the
color to #005A9C, and the text alignment to left. The second block selects all <h3>
tags with class
animal. This a HTML tag
<h2 class='animal'> would be
selected.The third block selects the HTML element with id
results, such as
<div id='results'>. You can associate a style
sheet with a HTML page with a line like this in the header:
to position the top left corner of element with id
mydiv 100 pixels from the top
left of the page.
offsetTop properties of an element can be used
to find the position of that element. Similarly, the properties
offsetHeight can be used to find the size. These properties were
implemented by IE 4 and have been supported by other browsers.
Another important position attribute is the z-index. This specifies the stacking order for display of elements. Elements with a higher positive z-index appear on top of other elements in the same container. The default value of z-index is zero.
display attribute determines whether and how an element is displayed, with
possible values of
visibility is similar, with possible values of
visible but does not affect the layout like the
The code finds the HTML element with id
mydiv and hides it.
A tool tip concept can be used to show English and Pinyin information about Chinese text in web pages to save the reader from searching for the term in the dictionary. The page tooltip_example.html illustrates the idea.
It is possible to dynamically enable and disable individual style sheets using
disabled property on the HTML
style elements. For example,
Copyright Alex Amies 2008. Please send comments to firstname.lastname@example.org.