WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

CSS Simplifies Your Life Part 3

CSS Simplifies Your Life
Part 3

by Scott Clark

The How and Why!

The Style Sheet code for the moving "layer" is very similar to the first part of the style sheet, except that a number sign "#", is placed at the beginning of the line.

 #layout{position: relative; visibility: show; left: .02in; top: .02in;} 

The JavaScript which is used to move the "layer" is also very simple:

 function moveme(left,top){ if (navigator.appVersion.substring(0,1) == "4"){ if (navigator.appName == "Netscape") document.layers.layout.moveTo(left,top); else { layout.style.pixelLeft = left; layout.style.pixelTop = top; } } else alert('This effect requires a DHTML-capable Web browser.') } 

The browser uses the ID parameter of the P "layer" to indentify the style sheet properties:

 <P ID="layout">paragraph text goes in here</P> 

The JavaScript which causes the function to be executed is very simple:

 <A HREF="#" onMouseOver="moveme(40,21)";>this text</A> 

The function checks for browser and version, and writes the correct code for the appropriate Web browser. If it's Netscape4, then it uses the "layers" terminology and the moveTo() function to move the layer. If it's MSIE4, then it uses the pixelLeft and pixelTop properties of the style to move the "layer." If it's neither, then it just pops up an alert telling the user that they need a DHTML-capable browser.

Although the above example may look like JavaScript SS, it's actually just CSS and JavaScript. What's the difference? Here's a similar Style Sheet in JavaScript Style Sheet format:

 <STYLE TYPE="text/javascript"> classes.NSDoo.P.color = "green" classes.NSDoo.P.fontStyle = "italic" classes.NSDoo.P.marginLeft = 20 classes.NSDoo.P.marginTop = 10 </STYLE> 

This is an example of JavaScript Style Sheets. This paragraph is defined as a class with green, italic text, with a marginLeft of 20, and a marginTop of 10.

JavaScript Style Sheets give a further amount of control over the elements contained in a Web page, but at this time they only work in Netscape 4+ browsers. While a few if/then statements would allow you to write code for the appropriate browser, at this point the advantages of inline JavaScript Style Sheets are slim. Using a standard CSS which is linked to each document seems to be the most effective use of Style Sheets.

The main advantage of linked Style Sheets is that you can change the entire look of many pages at once by simply changing the single Style Sheet. Standard CSS can be used by each browser, and as you have seen, you can utilize JavaScript with standard CSS to create some nifty, useful effects. Additionally, JSS could be used on individual tags as needed or desired for Netscape-specific effects.

Style Sheets are useful for developers who wish a bit more control of the styles used on the pages they create. They're useful for corporate sites that wish to feature their corporate style on each page of the site. They're easy to use, and fairly portable. We've only skimmed the surface here, so now we'll just point you to the many CSS resources that are available on the Web.

[ < CSS Simplifies Your Life:
Part 2 ]
[ CSS Simplifies Your Life:
Links and Resources > ]

HTML5 Development Center

Recent Articles