DHTML Cascading Style Sheets

HTML 4.0 introduced CSS, which gave us a style and layout model for HTML. With CSS, HTML elements can be styled with colors, backgrounds, borders, position, and visibility.

Examples

Note: Most of the DHTML examples require Internet Explorer 4.0 or higher.

Position:relative
How to position an element relative to its normal position.

Position:relative
How to position all your headings relative to its normal position.

Position:absolute
How to position an element using an absolute value.

Visibility
How to make an element invisible. Do you want the element to show or not?

Z-index
Z-index can be used to place an element "behind" another element, using Z-index priority.

Z-index
Check that the elements now have changed their Z-index priority.

Cursors
Change the style of the mouse cursor with CSS.

Filters
Change the style of your headings using the filter property.

Filters on Images 
The filter property can also used on images, here are some filter examples which look good on images.

Watermark
A background picture that does not move when the rest of the page is scrolling.

Position

The position property gives us the opportunity to place the elements anywhere on the document.

position:relative

This property places the element based on (or relative to) its current position.

H1
{
position:relative;
left:10;
}

This places the header 10 pixels to the right from where it is normally placed.

position:absolute

This property places the element out from the window's margins.

H1
{
position:absolute;
left:10;
}

This places the header 10 pixels to the right from the left-margin.

Visibility

The visibility property determines if an element is visible or not.

visibility:visible

This property makes the element visible.

H1
{
visibility:visible;
}

visibility:hidden

This property makes the element invisible.

H1
{
visibility:hidden;
}

Z-index

The z-index property determines the placement order of the elements.

H1
{
z-index:1;
}

H2
{
z-index:2;
}

The H1 element is placed before the H2 element, so if  these two elements happen to be placed on top of each other, the H2 element is placed on top of the H1 element.

Filters

Internet Explorer 4.0 introduced the filter property to CSS. The filter property allows you to add more style effects to your text and images.

H1
{
width:100%;
filter:glow;
}

The element you want to add a filter to, must have a specified width. There are many values to the filter property, this example shows the "glow" value, which produces this output:

Filters

Background

The background property allows you to select your own background, in any style.

background-attachment:scroll

The background scrolls along with the rest of the page.

background-attachment:fixed

The background does not move when the rest of the page is scrolling.

Jump to: Top of Page or HOME or Printer friendly page

Search W3Schools:

What Others Say About Us

Does the world know about us? Check out these places:

Dogpile Alta Vista MSN Google Excite Lycos Yahoo Ask Jeeves

We Help You For Free. You Can Help Us!

• Tell your newsgroup or mailing list
• Link to us from your pages
• Help us correct errors and broken links
• Help us with spelling and grammar
• Validate the XHTML code of this page

W3Schools is for training only. We do not warrant its correctness or its fitness for use. The risk of using it remains entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

Copyright 1999-2002 by Refsnes Data. All Rights Reserved

How we converted to XHTML