Nested elements inside p tag does not inherit its properties

Hi,

I am relatively new here and like many other forums I tried to search for a similar topic in the forums before I posted; and I had no luck doing that. I assume that it is safe to post here. If anyone finds a post relevant to this subject, please provide the link in your reply to this post. I appreciate it very much.

Anyhow, here is my question:

It seems that the elements nested under the paragraph element do not inherit its properties. For instance:

You have an html document with the following code in the body and an external stylesheet (css)

In the HTML document:
<p class="someClass">
hello<br />
<h1>blah1</h1>
<h1>blah2</h2>
</p>

In the stylesheet
.someClass { background-color="purple"; }

the part that would be highlighted with a background color of purple would only be the word "hello" whereas "blah1" and "blah2" would usually inherit the purple property if it were nested in another tag besides p. I would just like to confirm that this is because p is not necessarily an element rather something to declare the content following it as a separate paragraph. If there are any other explanations, please provide them. I really appreciate it. It is just something I observed and want to get it off my mind. Thanks to all who reply in advance.

 

First, post valid markup. CSS is only applicable against valid markup, and error handling is by definition, unknown. Hypotheticals with invalid premises are also invalid.

cheers,

gary

 

No. Let's say you used valid markup instead of a p:
<div class="someClass">
<h1>Foo</h1>
<h2>Manchoo</h2>
</div>

div.someClass {
background-color: purple;
}

h1 and h2 still don't inherit anything. The purple background of the div will show, and the text of the children (h1, h2) will simple sit above the purple background. But they themselves do not get a purple background.
Some things can be inherited but not everything. Backgrounds do not get inherited. Even if something does get inherited, it's only when the child is inside the parent.
<p><span>foo foo foo</span> and MOAR COWBELL</p>
p {
color: purple;
}

The span text should also be purple, but only when in a p. Spans anywhere else aren't going to be purple.
If the span were an anchor <a href="foomanchoo.html">text</a> the colour of the p would not inherit, because the browser has its own styles for anchors (usually blue text and underlined). To change anchors then, you'd have to say so in your CSS:
p a {
color: something;
}
or even all anchors everywhere:
a {
color: something;
}

P is definitely an element. In older HTML you will see people have used it like a "space betwen paragraphs" but as was explained to me, what was really happening was, the browser saw you write
<p>
some text...
<p>
some more text

and the browser silently put </p> right before the second <p>, thus the p still actually wrapped the text. The spacing you see is simply the browsers' default margins they put on p's.

What you're thinking of might also be the <br> tag, which is an element as well (all tags are elements) but <br> is an empty one and does not wrap text. It forces a newline wherever it is. So on older HTML pages you may see people using <p> and in other places <br> for exactly the same reasons. However they were wrong (and the spec is different now, if you use a Strict doctype (which you should be using)).

As Gary stated, a p holding header tags is invalid HTML, so each browser has to do whatever it thinks it should do with invalid code, which is not necessarily the same thing per browser. A p can only hold inlines. Headers are blocks.

 

So a simple fix to this problem would be to simply add a doctype?

 

Since we haven't seen your code, who knows? But of course yes, you should always have a Doctype. Not just any doctype, but be kind to yourself and get a Strict one. Transitional is NOT for people learning proper HTML.

The true solution to your problem is to get this excellent book, which is likely sitting at your public library cause it's old enough:

Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd.

It will teach you how to properly nest elements, how to style them, why one style works and another doesn't. HTML actually isn't something you can learn by fumbling around in the dark, because often bad code will seem to show you the result you want. Browsers try to correct for errors. So you need a guide to show you right from wrong, since the browsers aren't going to do that for you (nevermind that I think they SHOULD).