CSS in general hates me

I'm so very new at all this stuff. What the h--- is with CSS?
I want to format a page where the first paragraph starts with a big red letter, but no indentation. The subsequent paragraphs will start with regular letters, which should be indented. Here's my code.

body
{
font-family: Book Antiqua, Times New Roman, Times;
background-color: rgb(255,255,255);
color: rgb(102,102,153);
}

h2
{
position: absolute;
left:29px;
}

p
{
text-indent: 2em;
width: 30em;
line-height: 1.3em;
text-align: justify;
}

div:first-letter
{
width: 30em;
color: #ff0000;
font-size:300%;
line-height: .8em;
text-align: justify;

}


With this code, and <div></div> around my first paragraph, I get my letter all big and no indent, but the paragraph goes on past 30ems and it's not justified.

When I change <div:firstletter> to <p.f:firstletter> and use <p class="f"></p> around my first paragraph, I get big letter, correct paragraph width and justification, but a huge indent almost half the width of the paragraph.

Exactly how does the hierarchy of Selector.class.function work, and how would I format this CSS?

And while I'm at it, is there a way to relatively position my header <h3> based on centering it to the width of my paragraph?

Thanks for any or all parts solved.

The first paragraph letter as a big red one and the setting of the indentation of the other paragraphs can be done defining the common values of the paragraph and then two classes (one for the first paragraph and another one for the others):

The problem of the great indentation is due to the use of 'em' dimensions instead of 'px'... In fact, in the first case the indentation is calculated referring to the font size, in the second one you can decide the indentation's effective pixel dimension.
About the centering of a third level header, the problem is still the definition of the width using the 'em'...
Hope it helps!

ok I had a quick play with your css and have change it a bit:



and with this test html



is that any better?

Kong.