CMPT 165 Style Example: Web 2.0-ish Buttons

The Styles

There are several styles that can be used on the pages of this web site. If you're using a reasonable browser, you can choose them from the selection of "alternate stylesheets." In Mozilla, select "Use Style" from the "View" menu.

These pages are here for the benefit of those using browsers that don't do CSS as well, Internet Explorer in particular. They might also help people actually notice the alternate styles—most sites don't use them, so people don't look for them.

In addition to the style sheet in question, all of the styles use some common CSS rules as well.

This Style

This style was created to mimic some of the web style that is common in “Web 2.0”. The overall page alignment is strongly centred. The stylesheet adds the gradient-image buttons as part of the menu at the top of the page. The colours used are taked from the standard SFU look-and-feel (but the design itself is not).

There are borders added around subsections of the page. The borders are constructed with <div class="h2">...</div> around each of the sections (where a "section" starts after an <h2>, and continues until the next). The border is extended around the heading itself with some delicate alignment of a partial border on the <h2> itself.

The style contains a some rules for printing that let it print well.

After some experimenting, this style should display nicely in Firefox, Internet Explorer, and Safari. It is now the default style on the course web site.