This page is just a sample of some basic CSS styling involving :hover pseudoclasses and border-coloring to achieve a button- or inset-like appearance similar to typical OS control widgets.

This page will only render correctly in CSS2-compliant browsers. Firefox and Opera are examples of CSS2-compliant browsers; Internet Explorer is not. IE will, at best, display the elements in this page narrower than they should, and the :hover pseudoclasses won't work.

This is an inset span.

This is a freakin' big inset-styled paragraph. Note that this is the same style for the inset span above, minus a font-weight:bold rule that's only applied to spans. The CSS style for it is:

.inset{
	background-color:#000;
	font-weight:bold;
	color:#fff;
	border:1px solid #444;
	border-top-color:#222;
	border-left-color:#222;
	border-bottom-color:#666;
	border-right-color:#666;
	padding:2px;
}

Note the <pre> tags, which are styled so that hovering the mouse over them will colour them in a slight gold hue. The CSS style is:

pre{
	margin-left:1em;
	margin-right:1em;
	padding-left:0.5em;
	border-left:3px solid #888;
	background-color:#222;
	color:#ccc;
}

pre:hover{
	color:#cc8;
	background-color:#442;
	border-left-color:#884;
}

This is button-type styling. It uses the :hover pseudoclass to change colours upon mouse-over.

—NSD