<p> inside <p>

hi all

although <p> and <div> both are block level elements.

then why

  1. <p> inside <p> cannot accepts any styles.
  2. <p> inside <div> accepts all styles

if i want to apply styles on a <p> that is inside another <p>, then whats the solution

here is my example which doesnt applied styles to <p> inside <p>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document</title>
<style type="text/css">
p{
margin:0px;
padding:0px;
background-color:#FF0000;
}
p p{
margin:0px;
padding:0px;
background-color:#ffff00;
font-size:24px;
}
#divhel p{
font-size:30px;
}
</style>
</head>

<body>
<p>hellow how are you</p>
<p><p>hello how are you</p></p>
<div id="divhel"><p>hellow how are you</p></div>
</body>
</html>

vineet

You cannot nest P elements it is illegal. The P element represents a paragraph. It cannot contain block-level elements (including P itself). DIV however is a generic container where content can be inline e.g SPAN or block-level. Hence DIV can contain P but not the other-way around.

This makes sense semantically too if you relate it in the real world. When do you ever open a book and see a paragraph within a paragraph?

What you may want to do is this:

<p>hellow how are you</p>
<p><span>hello how are you</span></p>

Use the span element and style that.

If the span is wrapped around the entire content of the paragraph like that then it is an unnecessary tag since you can just apply a class to the paragraph to give it a different style and may not even need that once the CSS3 selectors are all supported.

Yeah but if it does not contain all the content, then you would wrap it in a span. The way I understand his question is that he wants a certain section within his paragraph to behave a certain way but not the entire paragraph.

For styling part of a paragraph different from the rest you’d use

<p><span>hello</span> how are you</p>

Wrapping all the content of the paragraph inside a span wouldn’t allow you to style part of the paragraph differently from the rest.

That’s what the span element is for. What I understood is that he wanted part of the paragraph to be a certain text size and was attempting to do that by nesting another paragraph element and styling it differently.