Cascading Style Sheets (CSS) are the basis for Dynamic HTML in both Netscape Navigator 4.0 and Internet Explorer 4.0. CSS allows a way to create a set of "styles" that define how the elements on your page are rendered. Cascading Style Sheets Positioning (CSS-P) is an extension to CSS that gives a developer pixel-level control over the location of anything on the screen. Due to the fact there are already good CSS and CSS-P documentation and tutorials I won't be duplicating them - rather I'll be building on top of them.
Here are 2 documents/tutorials that explain the syntax of CSS and CSS-P:
Those sites will give a complete overview of CSS and how to implement it. But I'll just quickly re-iterate the parts of CSS that will be used throughout this tutorial.
Using DIV Tags:
When using CSS-Positioning, these properties are usually applied to the DIV (division) tag - an empty, non-formatting tag, that is best suited for CSS. When you put HTML/text into a DIV tag it is commonly referred to as one of: "DIV block", "DIV element", "CSS-layer", or as I say, just a "layer". When you read about Dynamic HTML on websites or in newsgroups, if someone is talking about any of these terms they're all talking about the same thing - some piece of HTML that is inside a positioned "DIV" tag.
To markup an empty DIV tag is no different than any other tag:
<DIV> This is a DIV tag </DIV>
Using DIV tag by itself has the same results as using <P></P>
But by applying CSS to DIV tags we can define where on the screen this piece of HTML will be displayed, draw squares or lines, or how to display the text that's inside it. You do this by first giving the DIV an ID (sort of like a name):
<DIV ID="truck"> This is a truck </DIV>
What you use for your ID is up to you. It can be any set of characters (a-z,A-Z,0-9, and underscore), but starting with letter.
Then you apply your CSS in one of 2 ways:
Inline CSS:
Inline is the way most commonly used. And it is the way I will begin showing how to write DHTML and JavaScript.
<DIV ID="truck" STYLE="styles go here">
This is a truck
</DIV>
External STYLE tag:
Using the external method will work as well, however there are a few issues involved with writing CSS like this, so I suggest you wait until you get to the Nesting Layers lesson before trying it on your own. For right now just take a look to see how it is done...
<STYLE TYPE="text/css"> <!-- #truck {styles go here} --> </STYLE> <DIV ID="truck"> This is a truck </DIV>
Notice how the ID is used in the STYLE tag to assign the CSS styles.
Cross-Browser CSS Properties:
Because the goal of this site is to produce DHTML that works in both Netscape and Internet Explorer, we are somewhat limited to which CSS styles/properties we can use. Generally, the following properties are the ones that work (fairly closely) to the standards as defined by the W3C.
Important:
When using layers for animation you should always define the width. This is because in IE the default is the entire width of the screen. If you move the layer around the screen a scrollbar will appear at the bottom, which is annoying and causes the animation to slow down.
The syntax for CSS differs from HTML, you use colons to separate the property and it's value, and semi-colons to separate the different properties:
position: absolute; left: 50px; top: 100px; width: 200px; height: 100px; clip: rect(0px 200px 100px 0px); visiblity: visible; z-index: 1; background-color:#FF0000; layer-background-color:#FF0000; background-image:URL(filename.gif); layer-background-image:URL(filename.gif);
You have a bit of flexibility when assigning CSS properties. You do not have to define all of them. White space is ingored so you can either have them all on the same line, or on separate lines, tabs between values etc. As well, the default unit value is pixels, so you do not necessarily have to have the "px" after the left, top, width and height values, although it is recommended to do so.
position:absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); background-color:#FF0000; layer-background-color:#FF0000;
Inline Example:
<DIV ID="divname" STYLE="position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;">
</DIV>
External Example:
<STYLE TYPE="text/css">
<!--
#divname {position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;}
-->
</STYLE>
<DIV ID="divname">
</DIV>
A demo is worth a thousand words:
| Home | Next Lesson: Cross-Browser JavaScript |