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.
Before/AfterBefore (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 |
TablesFaster loading tablesThis 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). |
HyperlinksHyperlink effectsYou 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! |
ScrollbarsInline scrollbarsYou 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). |
TemplatesDefault TemplateExample 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.