Subject: [css-d] What's the difference, when to use?

From: scotts at rci-nv.com (Scott Schrantz)
Date: Tue, 29 Apr 2003 09:20:50 -0700

> -----Original Message-----
> From: Gerard Samuel [mailto:[email-masked]]
> 
> Just beginning my journeys with CSS.
> With <p> <div> and <span>, I've noticed that
> <p> creates 2 line breaks before/after the open/close tags.
> <div> creates 1 line break before/after the open/close tags.
> <span> creates 0 line breaks before/after the open/close tags.
> 
> Im just looking for verification on this observation.
> If Im correct, are there any rules as to when or when not to 
> use these to gain a "special" effect.

One of the first things to learn when using CSS is not to choose elements
based on what their default presentation is, but rather on what structure
they give to the page. You then use CSS to give them the presentation you
want.

<p> denotes a paragraph. Use it when you are marking up a single paragraph
of text. It is a block element, meaning that there is a line break before
and after it. It doesn't "create 2 line breaks", it has margins that create
white space between it and other elements. That white space can be done away
with using CSS.

p {margin: 0px;}

<div> is a container, used for grouping elements. You use it when several
paragraphs need to have the same style or be separated from the rest of the
page somehow. It is also a block element, but its margins are zero by
default.

<span> is also a container, but it is an inline container. As you noticed,
it doesn't come with any line break or margins. You use it when you need to
isolate a few words or a passage in the middle of a paragraph and give them
a particular style.

The true way to use CSS is to start by using basic HTML properly, and then
add the CSS to make it look the way you want. Don't choose HTML elemnts for
their "special effects". Add the effects with CSS.

--
Scott Schrantz
www.computer-vet.com/weblog/
[email-masked]