Let's Do Cascading Style Sheets

Virtual University

Virtual University students first jumped in to Cascading Style Sheets in the Summer of 2002. Herein lie the class page links:

Late Fall 2004: Class page courtesy of Brad
Spring 2004: Class page courtesy of lcr
Fall 2003: Class page courtesy of Songweaver
Summer 2003: Class page courtesy of Shirley_c
Spring 2003: Class page courtesy of StellaB
Winter 2003: Class page courtesy of Mike
Fall 2002: Class page courtesy of Samtex

Summer 2007: Class page courtesy of Tricia
Winter 2007: Class page courtesy of Terry
Fall 2006: Class page courtesy of Anna
Summer 2006: Class page courtesy of Jenny
Spring 2006: Class page courtesy of LarryR
Fall 2005: Class page courtesy of Holly
Summer 2005: Class page courtesy Tasha

Must-have Downloads

Free Gmail: I have 50 free invites for Google Mail. Click the link above to request one.
Webtester: Allows you to try out all your .gif and .jpg background images to see how they would look on a web page.
Anfy Team Applet: 52 Java™ applets: Ultimate effects and navigational menu for web sites.
NoteTab Light: Free Notepad replacement and a handy HTML editor. Handle a heap of files with a tabbed interface. Search files, strip HTML tags and format text quickly.

Browser Resize with JavaScript

Web page developers should view their designs in common screen resolutions to determine how others will see their creations. The most common resolutions are 800x600 and 1024x768. To create a simple JavaScript screen size viewer, create an html page with the following content. Then open the page in your browser and bookmark it.

To use the viewer, open an html document in your browser, then click the bookmark/favorite to change to browser size.

Create a JavaScript bookmark/favorite for each browser size by changing (800,600) as needed.

<html>
<head>
<title>800x600</title>
<script>
self.resizeTo(800,600)
history.back();
</script>
</head>
</html>

<html>
<head>
<title>1024x768</title>
<script>
self.resizeTo(1024,768)
history.back();
</script>
</head>
</html>

Abbreviated Hex Code

In CSS, you can use 3-digit Hex color codes in place of the traditional 6-digit codes. Because there is just a small difference between adjacent colors, most times you can get away with using the 3-digit code.

In your style sheet, where you would use a color like red (#FF0000), black (#000000), or blue (#0000FF), you would use #F00, #000 or #00F. Characters in 3-digit codes can then be duplicated to make a 6-digit code. Thus #ABC becomes #AABBCC.

With 6-digit hex colors you have 167,772,216 slightly different colors to choose from. If you use the 3-digit method you have only 4,096 colors to work with.

Note: These do not work in HTML, only in style sheets.

HTML/CSS/JavaScript Tester

To use the Tester, write the CSS, HTML or script in the text box below. Then press the test button to open a new window displaying your product. For more help press the help button. Please note that the Clear button doesn't work in Netscape.

Dynamic Color Wheel

	Hello Goodbye Hello Goodbye	Hello Goodbye Hello Goodbye	Hello Goodbye Hello Goodbye	Hello Goodbye Hello Goodbye
	A little quirky and does not work in some browser versions, but good fun and quite useful when it does work. Or try this one.

If scrollbars are not displaying in Internet Explorer 6, try adding this bit before the doctype statement at the top of your HTML page:

‹?xml version="1.0" encoding="iso-8859-1"?›

Alternatively, you can try using both html and body together:

BODY,HTML { 

 scrollbar-face-color: #cc0099;
 scrollbar-shadow-color: #663399;
 scrollbar-highlight-color: #336699;
 scrollbar-3dlight-color: #800000;
 scrollbar-darkshadow-color: #00cc00;
 scrollbar-track-color: #800000;
 scrollbar-arrow-color: #cc0099;

}

Let's Do

Cascading Style Sheets