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.

Same content - different look

This example demonstrates how different a page can look depending on whether it has been linked to a style sheet or not. Both pages are identical, and are linked to an external style sheet. The only difference between them is that the first one has the style sheet link commented out (i.e. the link is broken). Notice, that there are no bitmap images.
Page 1 - no stylesheet (opens in new window)
Page 2 - with stylesheet (opens in new window)

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).

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).

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!

line-height property

This interactive page demonstrates the 'line-height' property. This specifies an effect which is known as "leading" in desktop publishing.

letter-spacing property

This interactive page demonstrates the 'letter-spacing' property. This specifies an effect which is known as "tracking" in desktop publishing.

word-spacing property

This interactive page demonstrates the 'word-spacing' property. This enables you to place extra space between your words.

background property

This interactive page demonstrates the 'background' property. The 'background' property shorthand for specifying an element's background properties such as image, color etc

border property

Interactive page demonstrating the 'border' property. This property is shorthand for specifying an element's "width", "color" and "style" border properties.

font property

This interactive page demonstrates the 'font' property. The font property is shorthand for setting font-family, font-size, font-variant, font-style, font-weight, and line-height properties of an element.

list-style property

Interactive page demonstrates the 'list-style' property. Shorthand property for setting the list-style-type, list-style-position and list-style-image properties for an element.

padding property

Interactive page demonstrates the 'padding' property. Shorthand property for setting the padding properties on all sides of an element.

Default Template

Example default template file. You can use this template as a basis for your style sheets. This is the template suggested by the W3C. Using it will ensure you cover off all the elements you need to and don't miss anything.

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.

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/css/css_examples.cfm">CSS Examples</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites