Quackit Logo
CSS Home

CSS Tutorial

Introduction
CSS Advantages
CSS Syntax
Implementing CSS
CSS Class
CSS ID
CSS Font
CSS Text
CSS Background Code
CSS Border
CSS Margin
CSS Padding
CSS Lists
CSS Height & Width
CSS Positioning
CSS Float
CSS Layers
CSS Summary

CSS Codes

CSS Align
CSS bgcolor
CSS Cellpadding
CSS Cellspacing
CSS Floating Menu
CSS Hyperlinks
CSS Leading
Inline Style Sheets
Embedded Style Sheets
External Style Sheets
CSS Scrollbars
CSS Table Width
CSS Print Version
CSS Table-layout

CSS Examples

CSS Examples
CSS Table-layout Example

CSS Reference

CSS Mini Tutorial
CSS Properties
CSS Color Codes
CSS Template
CSS Media Types
Sponsored Links
FREE Hosting!
With every domain you register with ZappyHost you get FREE hosting.
Create a website for free - uCoz
Build a website quickly and easily Customizable templates and graphics
$1.99 Domain Names
With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.

CSS Examples

Print Version

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.

Before/After

Before (no stylesheet) (opens in new window)
After (with stylesheet) (opens in new window)

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. The only difference between them is that the 2nd one links to an external stylesheet.

Interactive Examples

Tables

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

Hyperlinks

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!

Scrollbars

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

Templates

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.

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.

Enjoy this website?

  1. Add this page to your Favorites
  2. Link to this page (copy/paste into your own website or blog):
  3. Help support Quackit by making a donation
  4. Add this page to your favorite social bookmarks sites:      

Oh, and thank you for supporting Quackit!
Sponsored Links
Cheap Domain Names
Learn Photoshop Video
Need Website Content?
Get unique, quality digital content for your website.
  • 270+ Website Templates
  • 800+ Flash Templates
  • 25,000+ Images, Logos
  • 30,000+ e-Books
  • 15,000+ Scripts
  • 27,000+ Animated GIFs
  • 21,000+ Ringtones
  • ...and much more!
Get your content now!