HOME

DHTML Tutorial
DHTML HOME
DHTML Intro
DHTML CSS
DHTML DOM
DHTML Events

DHTML Examples
DHTML Examples

DHTML DOM
DOM window
DOM navigator
DOM event
DOM collection
DOM document
DOM form
DOM input
DOM select
DOM option
DOM textarea
DOM table
DOM tablerow
DOM tablecell
DOM anchor
DOM image
DOM frameset
DOM frame
DOM iframe

DOM Examples
DOM Examples

Please visit our sponsors !

DHTML Cascading Style Sheets

With CSS, HTML elements can be styled.

Examples

Note: Most of the DHTML examples require IE 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 allows us to control the element position in the document.

position:relative

The position:relative property positions an element relative to its current position.

h1
{
position:relative;
left:10;
}

The example above positions the h1 element 10 pixels to the right from where it's normally positioned.

position:absolute

The position:absolute property positions an element out from the margins of the window.

h1
{
position:absolute;
left:10;
}

The example above positions the h1 element 10 pixels to the right from the left-margin of the the window.

Visibility

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

visibility:visible

The visibility:visible property makes the element visible.

h1
{
visibility:visible;
}

visibility:hidden

The visibility:hidden property makes the element invisible.

h1
{
visibility:hidden;
}

Z-index

The z-index property is used to place an element "behind" another element. Default z-index is 0. The higher number the higher priority. z-index: -1 has lower priority.

h1
{
z-index:1;
}

h2
{
z-index:2;
}

In the example above, if the h1 and h2 elements are positioned on top of each other, the h2 element will be positioned on top of the h1 element.

Filters

The filter property allows you to add more style effects to your text and images.

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

Note: Always specify the width of the element if you want to use the filter property.

The example above produces this output:

Header

Different Filters

Note: Some of the Filter properties will not work unless the background-color property is set to transparent!

Property	Argument	Description	Example
alpha	opacity finishopacity style startx starty finishx finishy	Allows you to set the opacity of the element	filter:alpha(opacity=20, finishopacity=100, style=1, startx=0, starty=0, finishx=140, finishy=270)
blur	add direction strength	Makes the element blur	filter:blur(add=true, direction=90, strength=6);
chroma	color	Makes the specified color transparent	filter:chroma(color=#ff0000)
fliph	none	Flips the element horizontally	filter:fliph;
flipv	none	Flips the element vertically	filter:flipv;
glow	color strength	Makes the element glow	filter:glow(color=#ff0000, strength=5);
gray	none	Renders the element in black and white	filter:gray;
invert	none	Renders the element in its reverse color and brightness values	filter:inver;
mask	color	Renders the element with the specified background color, and transparent foreground color	filter:mask(color=#ff0000);
shadow	color direction	Renders the element with a shadow	filter:shadow(color=#ff0000, direction=90);
dropshadow	color offx offy positive	Renders the element with a dropshadow	filter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true);
wave	add freq lightstrength phase strength	Renders the element like a wave	filter:wave(add=true, freq=1, lightstrength=3, phase=0, strength=5)
xray	none	Renders the element in black and white with reverse color and brightness values	filter:xray;

Background

The background property allows you to select your own background.

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 scrolls.

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!

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.

How we converted to XHTML

Active Server Pages Resource Web Site

Your own Web Site?

Read W3Schools
Hosting Tutorial

$15 Domain Name
Registration
Save $20 / year!

Advertise
at W3Schools

Only 0.5 CPM

SELECTED LINKS

University Online
Master Degree
Bachelor Degree

Web Software

The Future of
Web Development

Jobs and Careers

Web Security
Web Statistics
Web Standards

PARTNERS

W3Schools
TopXML
VisualBuilder
XMLPitstop
DevelopersDex
DevGuru
Programmers Heaven
The Code Project
Tek Tips Forum
ZVON.ORG
TopXML Search