css inheritance

[thoresson]

I'm building my first stylesheet, and have run into problem.

My stylesheet looks like this.

.login	
	{	
		position: absolute;
		left: 600px;
		top: 500px;
		color: black; 
		background: lightgrey;
		font-family: verdana;
		font-size: x-small;
		border-style: dotted;
		border-width: 2px;
		padding: 10px
	}

H1.login
	{
		color: black;
		font-family: verdana;
		font-weight: bold;
		font-size: large
	}

And this is the html-code

<P CLASS="login">
<H1 CLASS="login">Login</H1>
Welcome to log in.

But it's just the header which get's into the box, not the rest of the text which end's up in the upper left corner of the screen.

What am I doing wrong? I want to be able to define different styles for H1 to be used in diffrent areas of my site/page.

[blufive]

If memory serves, you can't put a <h1> inside a <p>.

try doing this in your html instead:

<div class="login">
<h1>Login</h1>
<p>Welcome to log in.</p>
</div>

And amending the "h1.login" in your CSS to ".login h1".