|
Cascading Style Sheets Rule! |
The purpose of this lab is very simple: Write a Cascading Style Sheet for use with some Web page and test it in several browsers. Include tests of some of the more interesting or advanced features of CSS. You might want to try duplicating the "floating text" that you can see to the right, using style sheets. (On this page, it's done with an HTML table, which might, after all, be the best way to do it since it will work with a lot of browsers.) Turn in a copy of your style sheet and a short report on browser support for a few specific CSS features. Add the web page or pages and style sheet to your Web site, and put a link on your main page. This lab is due in class next Wednesday.
If you like, you can write a cascading style sheet for this lab worksheet and the previous one. Copies can be found in /home/cs371/lab7. These pages already use a style sheet. To see a plain text file of the style sheet, click here. A copy of the file can also be found in /home/cs371/lab7. I don't make any claim that this is a good style sheet.
You are welcome to work with other HTML files, instead of the lab worksheets.
You will find some support for Cascading Style Sheets in most browsers, except for very old ones. The browsers with the most support are Mozilla, Internet Explorer 5.5 or 6.0, Opera, and perhaps Konquerer. Mozilla is probably better at CSS than IE 5.5, but I don't know how it compares to 6.0. When the 1.0 release of Mozilla comes around, it is supposed to be the "most standards compliant" browser.
Version 0.81 of Mozilla for Linux is installed on the lab computers. You can run it with the mozilla command.
Opera 5.0 for Linux is also installed, and can be run with the opera command. When you start it, opera will complain about not being able to read its bookmark file, "opera.adr". To get the standard bookmark file, execute the following commands in a command-line window, in your home directory:
mkdir .opera
cp /opt/opera-5.0-dynamic.i386/opera.adr .opera
Note that the directory name begins with a period since it is a hidden directory.
Konqueror is the KDE desktop's web browser. You can start it simply by clicking on the WWW icon on your desktop.
You could also try your style sheet under Internet Explorer and the Windows version of Netscape. If you want to use the Linux version of Netscape, you should notice that it was originally installed with support for Java, Javascript, and CSS turned off. You can enable them in the "Advanced" tab of the Netscape "Preferences" dialog.
And if you have a Macintosh, you could try the iCab browser.
In addition the hard-copy reference in Chapter 10 of HTML: The Complete Reference, here are some on-line references for CSS. (These are also linked to the main page for this course.)
Short CSS Table -- This is meant to be Netscape-specific, but you should take that to mean that it lists some of the more commonly used and supported CSS properties.
An on-line reference -- A nicely done syntax reference with examples written in XML. Try viewing this with Mozilla.
Another one -- Another reference, with more information (such as what the tags mean!) but also with lots of ads and slow response.
CSS at W3C -- W3C (World Wide Web Consortium) is the de facto official standards-setting body for the Web. They are the people who defined the CSS level 1 and level 2 standards, and this is their page on CSS. (Try this page in Konqueror. It has a cool tranparent overlay that seems only to work in Konqueror.)