CSS Examples

The first CSS examples on this page are located on this website. Some are interactive, so you can change the code and see what it looks like on the fly.

Some of the examples are taken from the CSS properties section of this website. This section outlines all CSS properties as specified in the CSS2 specification and you can see other CSS examples that aren't listed here. You can also check out the CSS tutorial for another example of CSS usage.

The next section contains CSS examples from the Microsoft Style Sheet Gallery. Developers could submit their CSS examples to this gallery, so this gives you an idea of what other developers are achieving with Style Sheets.

Interactive Examples

Faster loading tables

This example compares two tables. One has the 'table-layout' set to "fixed" , the other doesn't. Check out how much download time you can save by spending an extra 30 seconds adding code. This works better when you have a large table (smaller tables load so quickly you wouldn't notice the difference).

Hyperlink effects

You can change the appearance and behaviour of hyperlinks (and other text) using the 'text-decoration' property. Be careful with this one though - otherwise your users won't know what they can click on!

Inline scrollbars

You can create your own "inline scrollbars" by creating a box smaller than its contents by specifying overflow:scroll. This has an effect similar to inline frames (but this is much simpler).

Microsoft Gallery

People could submit their CSS examples to Microsoft's Style Sheet Gallery showcasing what they've been able to do with Cascading Style Sheets. This is just a sample of what's available.

Under 6KB
This section demonstrates just what's possible in web layout without resorting to graphics. The most complicated page is only 6KB in size.

Bitmap free zone 2
Similar to the above link.

Same content, different style.
These examples show how the same content can be presented in different ways just by changing the style sheet. The BODY of each HTML page is exactly the same, only the STYLE section in the HEAD of the HTML file changes for each example.

This page represents just the beginning of what's possible with Cascading Style Sheets. More and more remarkable examples are being added to the web each day. If you become familiar with all CSS properties, the possibilities are endless - you are only limited by your imagination.