JavaScript-Powered Stylesheets

In this sample I've used both Java Script and Cascading Style Sheets.

Simple Description: Change the size of your browser window, refresh the page, and the code will select a more appropriate font-size for the title "JavaScript-Powered Stylesheets" above.

Java Script is used to identify the browser and change the default point size of the < H1> tag in the correct CSS syntax for that browser.

All this is based upon the size of the browser window and resolution. You can test this by making the width of your browser window smaller and reloading the page (simply resize the window).

I've chosen 600 pixels as the cut off (to accomadate the 640x480 folks). If your browser window is less then 600 pixels wide the text at the top will appear at half the point size that it would if you screen were 600 or greater pixels wide.

Again, the whole thing is browser independent.

Return to Sample Page

Return to Home Page

This sample was taken from an article written by William Robert Stanek for PC Magazine and modified.