The CSS
     Cascading style sheets are what define how DHTML elements look and behave. For information on style sheets visit our "How to Make Cascading Style Sheets" tutorial. Without CSS, we wouldn't have any handles on the <div> tags to which we can hang on to. Let's look at the example DHTML page again.

Each block has a set of attributes that specify how it looks and works.

     Above, each DHTML block has a set of attributes that control how the element looks and works. The text block has a position of 200 pixels from the left and 250 pixels from the top. It also defines what type of font to use as well as color. All this is done with inline style sheets. By adding a style attribute with a list of style definitions enclosed in double quotes to a <div> tag, we order the browser to take this block and display it how we want it. Below is what the code of the text block looks like.

   <div id="story"
   style="position: absolute;
   top: 250;
   left: 200;
   width: 400;
   z-index: 1;
   font-family: 'tahoma';
   color: #333333">
   
      A pleasing land of drowsy head it was,<br>
      ...
   
   </div>

<!-- -------------CONTROL BLOCK------------- -->

<div id="controls"
style="position: absolute;
top: 100;
left: 700;
width: 50;
height: 300;
Z-Index: 1;
Visible: true">

   <div id="scrollup"
   style="position: absolute;
   top: 0;
   left: 0">
      <img src="up.gif" alt="Scroll Up">
   </div>

   <div id="scrolldown"
   style="position: absolute;
   top: 200;
   left: 0">
      <img src="down.gif" alt="Scroll Down">
   </div>
            
</div>

Basic DHTML with Internet Explorer
     Part 1: The HTML
     Part 2: The CSS
     Part 3: The Script
Related Article: Introduction to DHTML

Have a comment or question dealing with this tutorial? Write us!