CSS finesse – Part I

CSS gives you the ability to control HTML presentation with a fair amount of granularity. However, if you take a peek at stylesheets from random websites, you will see that a vast majority of them define styles using Type, Class and ID selectors. This is fine, but only barely scratches the surface when exploring the capabilities of CSS. I’ll try and shed some light on the different CSS selectors and hope it will help you create cleaner, more-compliant HTML.

Let’s start with Type Selectors. These are the most basic of selectors as they require nothing more than an HTML element.

p { background-color: blue; } will change the background of all

elements on the page unless it’s overridden with a local style definition or a nested element’s style definition.

You can define the style attributes for multiple type selectors by separating them with commas, like this:

p, span, div { font-family: Verdana, Helvetica, Sans Serif; }

Take special note of the comma separator as it is often a hard to debug problem. In CSS, the comma is a separator for multiple selectors to which the style definition should apply, while the space character indicates a descendant selector which we’ll examine in a moment. So the following two are completely different:

p, span { font-size: 11pt; }

p span { font-size: 11pt; }

Class Selectors allow you to define style attributes based on the value of the “class” attribute. The most common use of the class selector is like this:

.BorderedBox { border: 1px solid black; }

This would make all elements with a class=”BorderedBox” attribute inherit this style. For example:

You can make this more interesting by keeping the class name the same, but varying the elements to which it applies. This gives you the ability to granularly define a style class based on the element to which it is being applied, like this:

p.Highlight { background-color: yellow; }
div.Highlight { background-color: yellow; border: 2px solid black; }

Some text

Although it is rarely used, CSS does have the capability to define hierarchical class selectors. I suspect it’s not used a whole lot because it is not very well-known. In the example below, although there is no style definition for the class “NewHighlight,” this class is used in a hierarchical class selector to define the appearance of a headline and body text.

.NewHighlight.Headline { background-color: yellow; font-size: 14pt; }
.NewHighlight.BodyText { background-color: http://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.nethttp://www.techbubble.net#efefef; font-size: 10pt; }

This hierarchical class selector technique is very useful for defining zones within your page. You can have a series of standard class definitions used in your markup and completely change their appearance simply by changing the class label of the outermost wrapper element (“NewHighlight” in the example above).

While on the subject of hierarchical selectors, let’s tackle the three selectors reserved for applying styles based on an item’s position. The selectors are Descendant Selector, Child Selector and Adjacent Sibling Selector.

A descendant selector allows you to apply a style attributes to an item based on its order in a hierarchy. “Descendant” is often incorrectly interpreted to mean “direct descendant.” In CSS, this is not the case. An item is selected as long as it is a descendant of the item before it, regardless of whether the relationship is child, grandchild, great grandchild etc. But, I’m getting ahead of myself. Let’s first see an example of a descendant selector style definition:

.DescendantExample div a { background-color: red; }
.DescendantExample div span a { background-color: yellow; }

[Note: The DescendantExample class in the hierarchy exists merely to facilitate displaying examples in this blog. If I did not use it, all instances of the hierarchy on the page would be displayed in the style I have picked for the example. This would make the page look quite ugly.]

Recollect that earlier I cautioned against using a space where a comma was intended (i.e. for multiple items). As you can see from the above example, the space character is used for defining a hierarchical relationship. Using a comma would have completely changed the intended definition.

Here’s how the above appears in practice:

The overall definition is controlled by the wrapper