HTML CSS Examples

On this last page of the tutorial, I thought I would just show some simple examples of CSS styling. Hopefully it will give you some ideas of your own.

Example of one page using multiple style sheets

This first example uses Javascript to switch between multiple style sheets, 4 in all. The HTML page does not change, only the style sheets change. It is not particularly difficult to do, since the classes remain the same. You just change the styles in the classes. You can add as many styles as you like, and give choices to your user. This may be very useful for people who do not see well, as you can create a page for people with poor vision by increasing the font size in one style. You could offer options such as minimizing menus the user may not want to look at, by using invisible properties, for example. Click to see the example.

Here is the code to make the Javascript switch between style sheets. If you would like to download the files for the CSS switch website example, here is a link. But you will have to rename the file "cssSwitch.zip" after download, or whatever name you prefer, with the .zip file extension. I had to change the file name to "csSwitch.zi_" since the file servers here will not allow zipped files. Download cssSwitch.zi_

Patriotic Website Example

Here is a patriotic page I put together based on the same simple web template. I added a couple of images and some stars in the HTML using special characters.

Click to see the example. If you would like to download the files for the patriotic website example, here is a link. But again, you will have to rename the file "patriotic.zip" I had to change the file name to "patriotic.zi_" since the file servers here will not allow zipped files. Download patriotic.zi_

Medical Website Example

Click to see the example. Download the files for the medical website here. Download Medical Website Files medical.zi_ Don't forget to change the file name from "medical.zi_" to "medical.zip" after downloading.

Travel Website Example

Click to see the example. Download the files for the travel website here. Download Travel Website Files travel.zi_ Don't forget to change the file name from "travel.zi_" to "travel.zip" after downloading.

Guitar Interest Website Example

Click to see the example. Download the files for the guitar website here. Download Guitar Website Files guitars.zi_ Don't forget to change the file name from "guitars.zi_" to "guitars.zip" after downloading.

Bicycle Shop Website Example

Click to see the example. Download the files for the bicycle shop website here. Download Bike Shop Website Files bike.zi_ Don't forget to change the file name from "bike.zi_" to "bike.zip" after downloading.

Additional Resources