|
CSS Home
CSS TutorialIntroductionCSS 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 CodesCSS AlignCSS bgcolor CSS Cellpadding CSS Cellspacing 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 ExamplesCSS ExamplesCSS Table-layout Example CSS ReferenceCSS Mini TutorialCSS Properties CSS Color Codes CSS Template CSS Media Types Got a MySpace Page?Get "www.yourname.com" for your MySpace page. Learn how >>. |
CSS ExamplesThe 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 lookThis 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 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).Inline 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).Hyperlink 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!line-height propertyThis interactive page demonstrates the 'line-height' property. This specifies an effect which is known as "leading" in desktop publishing.letter-spacing propertyThis interactive page demonstrates the 'letter-spacing' property. This specifies an effect which is known as "tracking" in desktop publishing.word-spacing propertyThis interactive page demonstrates the 'word-spacing' property. This enables you to place extra space between your words.background propertyThis interactive page demonstrates the 'background' property. The 'background' property shorthand for specifying an element's background properties such as image, color etcborder propertyInteractive page demonstrating the 'border' property. This property is shorthand for specifying an element's "width", "color" and "style" border properties.font propertyThis 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 propertyInteractive 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 propertyInteractive page demonstrates the 'padding' property. Shorthand property for setting the padding properties on all sides of an element.Default 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 GalleryPeople 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 Bitmap
free zone 2 Same content, different style. 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?
Oh, and thank you for supporting Quackit! |
FREE Hosting!With every domain name you register with ZappyHost, you get FREE (ad supported) hosting.PLUS you get:
Featured Template:
(Build your websites in minutes!) |