dt background-color control?

dear wizards:

How do I control how far to the right a background color extends in a
definition list? For example,

<dl>
<dt style="background-color:blue;">Definition</dt>
<dd>Text</dd>
</dl>

my browser draws the blue background all the way to the right. I would
like it to end with the text. (I understand that I could give it its
own html tag, but this would of course defeat the purpose.)

help appreciated. /iaw

PS: I believe <div> is the "general-purpose" paragraph element. is
there something equivalent for <i>text</i>, which I could then define
attributes for?

ivo.welch (AT) anderson (DOT) ucla.edu wrote:

dl
dt style="background-color:blue;">Definition</dt
dd>Text</dd
/dl

my browser draws the blue background all the way to the right. I
would like it to end with the text.

The dt element is typically treated as a block element by default (as
suggested in the sample style sheet for HTML 4 in the CSS 2 spec, too).
To override this, and to make the element's box just as wide as its
content requires, you can use

dt { display: inline; }

You might wish to add some padding to make the appearance more
pleasant, e.g.

dt { padding: 0 0.2em; }

PS: I believe <div> is the "general-purpose" paragraph element.

No, it is a block level element with no semantics (no meaning).
However some programs use the concept "paragraph" freely, so that e.g.
headings are paragraphs too; effectively, they mean "block".

is there something equivalent for <i>text</i>, which I could then
define attributes for?

The meaningless (semantically empty) inline (text-level) element is
<span>. It's a counterpart to <div>. In CSS terms, the difference
between <span> and <div> is that <span> has display: inline by default
and <div> has display: block by default.

(Some people use <a> instead of <span>, on the grounds that <a> is
semantically empty, too, when it has neither a name attribure nor an
href attribute. But this is rare and not quite orthodox/kosher/pure.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/