CSS Examples

Generated Content in CSS2 Posted on: 11/01/2004
CSS2 supports the insertion of generated content, which is content that's specified using your style sheet and applied dynamically to the page. See it in action in this example.

Custom scrollbar colors Posted on: 10/19/2004
In IE5.5+ and above, you can use CSS to customize the color of the scrollbars on the page, which includes various components of the scrollbar. The example shows the relevant CSS properties for scrollbar coloring.

Borderize links onMouseover Posted on: 10/14/2004
The goal of CSS link effects is often to draw attention to a link when the user hovers over it. Using the pseudo class "a:hover", this one applies a border to the target link, and for good measure, changes its background color as well.

CSS horizontal Tabs Posted on: 10/08/2004
A horizontal tab interface that's extremely lightweight and scalable. Each tab is simply a list element and set to "display: inline" to cause it to align side by side instead of vertically.

:focus pseudo class (highlight form element onFocus) Posted on: 09/30/2004
The ":focus" CSS puesdo class applies the style to an element when the user sets focus on it. Using it, for example, you can easily highlight the form element the user is currently typing in.

Markerless and “no indent” Lists Posted on: 09/27/2004
Removing the default marker that appear to the left of lists is useful when you wish to use lists purely for semantic reasons or to fully customize visually. This CSS demonstrates both removing a list's default marker and indentation.

Image Marker Lists Posted on: 09/26/2004
CSS makes it possible to use images for a list's markers. And through descendant selectors, different images can be shown depending on the level of the list item in question, as shown below:

Highlight Image onMouseover (Opacity) Posted on: 09/21/2004
This example changes the opacity of any image link when the mouse moves over it, by leveraging the "hover:" CSS pseudo class and opacity support in IE5+ and Mozilla.