GDT 150 Design for the Internet

Handout: CSS selectors

Selector {Attribute: Value;}

Selectors can be any HTML tag, a class, an ID, a pseudo-class, or any contextual combination of these. If attributes are not explicitly defined, they revert to default values.

HTML tags: BODY, P, TD, H1, etc.

Class: .classname in the stylesheet, class="classname" in HTML. Classes can be defined in two ways: a straight class that can be used in any tag; or a tag-specific class that can only be used with a specific tag, ie TD.classname.

ID: #IDname in stylesheet, ID="IDname" in HTML. IDs are usually used for unique instances on a style, generally only with positioning attributes. DIV tags are generally used with IDs, not SPAN.

Pseudo-class: Generally applied to links A:hover, A:active, A.classname:hover, also can be P:first-letter, P:first-line, but they’re buggy. Pseudo-classes are not supported in NS4.x.

Contextual combinations: TD P, P B The first would be applied to P’s nested inside of TD’s, but not P’s that are outside of TD’s, the second would apply to B nested in P tags, but not B inside H2 tags.

SPAN tags can be used to apply styles to parts of other tags. This text uses a span to apply an inline style and this text is back to normal.

The stylesheet used for this page:

BODY {
	background-color: #FFFFFF;
	font-family: verdana;
	}
P {
	font-size: 10pt;
	width: 50em;
	}
.select {
	color: #666633;
	}
.attribute {
	color: #FF6633;
	}
.value {
	color: #336699;
	}
PRE {
	font-family: verdana;
	font-size: 10px;
	padding-left: 20px;
	}

Chris Cassell Dot Net

GDT 150 Design for the Internet

Handout: CSS selectors