[« CSS 101: font control] [Main Index] [New greymatter 1.3 template set: flyby »]

CSS 101: meet DIV and SPAN


In this article we'll examine the generic elements: div and span. Along the way we'll see a bit more detail on how a stylesheet works and how it's put together. At the end of this article, we'll see an example of how CSS is a better way to do things.

A stylesheet is a collection of rules.

A rule consists of a selector and a declaration. The declaration tells what to do, and the selector tells what to do it to. In this example

p {line-height: 16px;}

the p is the selector, and the line-height: 16px; is the declaration. Together, that's a rule. Just wanted to get the terms right before pressing on.

One more important concept: There are two types of elements in HTML, block-level, and inline. A block level element can contain other block-level elemnts, inline elements, and data. Inline elements contain only data, and occasionally other inline elements. In general, the browser will present a block-level element with a line break after it. You probably never gave a lot of thought to this before, but it's an important distinction. <b></b> is an example of an inline element, and <p></p> is an example of a block-level element. You wouldn't write

<b><p>This is wrong!</p></b>

although you may never have considered why not.

Okay, enough background. DIV is a generic, block-level element. And SPAN is a generic, inline element. And that's all they are.

So what? You see, a <p> or a <h3> comes with a certain amount of presentation baggage with it. Even if you don't have a stylesheet of your own, there's a default way the browser presents an <h3> or a <b>. In the <b> case, that's all there is: presentation. So in another article I commented that


is equivalent to

<span style="font-weight: bold;">foo</span>

and it is, at least from a presentation point of view.

But, <span> and <div> come with no presentational "baggage" of their own. They inherit rules from the element which contains them (more on this in a future post). But there's nothing preconceived about these elements--they are blank canvases for you to paint with rules.

So when do you reach for span vs. div? It's the inline versus block-level distinction that's important. If you need to contain other elements in general, pick div. span can contain other inline elements, but that's probably bad style to do it that way. Not illegal, just immoral. A span is the right choice in any setting where you'd naturally use the now-deprecated FONT tag. But it's far more powerful than old FONT was.

Using the power of selectors, we can create our own custom formatting, that we then selectively apply to bits of text on our pages. One really clever use of this is to mark certain technical terms in a page as defined terms, and present a little tooltip help that expands the term for the reader.

Please consider the following demo:

The term for which we choose to present a definition is styled with a couple declarations that make it have sort of a bluish background, and a double underline effect. Already you can see that we've drastically transcended what the capabilities of FONT markup are. But in addition, if you hover the mouse over the term, the cursor changes to a standard help cue. And we use the title attribute of the span element to present an expansion of the term that contributes to the meaningfulness of the text. And this presentation has the benefit that it clarifies the meaning, does not interfere with the flow of the original text, and provides a visual cue to the presence of the helpful tip.

Here's the source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>tooltip-like substance demo</title>
<style type="text/css">
border-bottom: 3px double;
background-color: #ccf;
cursor: help;
Now is the time for all good <span class="help" title="A human
regardless of sex or age; a person.">men</span> to come to the aid of their country.

So one important thing is the visual consistency of the use of this feature across your site. You don't want to leave out the underline sometimes, or use different colors, this will just confuse people. You also don't want them looking too much like hyperlinks, people will get grouchy when they can't click them. Anyway, CSS rules allow custom selectors that solve this problem neatly. The selector


matches to any element with class="help" , which is to say a class attribute whose value is "help". We could narrow it : would only match SPAN elements whose class attribute equaled "help" (look out for more on fancy selectors in a future post).

So we've used the .help selector and a matching rule to define how to modify the presentation of a span that contains a term we'd like to expand. The three declarations in the rule we set are the specific modifications to the presentation. We picked span in this case because it was an inline element, which worked well with our needs. We used the title attribute of the span element to display the tooltip text.

It's all easy as pie when you have a good grasp of the fundamentals, which is why I introduced the important concepts at the top. Needless to say, this example is one of infinitely many possibilities that arise from the CSS mechanisms and their creative application to solving problems. Knowing when to reach for span and div is powerful medicine for webmasters or page designers.

I didn't introduce a div example, but <div> is a generalized <p> in much the same way that <span> is a generalized <b>. It's a style-less element for you to customize to your liking. You add the rules.

text, scripts and images copyright © 2001-2011 . All rights reserved.