CSS Examples
Generated Content in CSS2
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.
Posted on: 11/01/2004
Custom scrollbar colors
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.
Posted on: 10/19/2004
Borderize links onMouseover
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.
Posted on: 10/14/2004
CSS horizontal Tabs
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.
Posted on: 10/08/2004
:focus pseudo class (highlight form element onFocus)
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.
Posted on: 09/30/2004
Markerless and “no indent” Lists
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.
Posted on: 09/27/2004
Image Marker Lists
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:
Posted on: 09/26/2004
Highlight Image onMouseover (Opacity)
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.
Posted on: 09/21/2004
