CSS question: How to change P tag style within one Div only

This is an HTML or CSS question dealing with the Paragraph and Division tags.
If say  the P tag has a default width of  600px. Then assume you want the
P style to have a width of 400px but only with in one Div.
How can this be done without having to add a style to each P in the Div?
Is there some sort of style look up function?

jimr111998Asked:
Who is Participating?
 
HagayMandelCommented:
You give your containing div an id:
<div id="sample">
<p>
Sample text
</p>

Open in new window


then you can apply the style the following way
#sample p {
	width: 400px;
}

Open in new window


The text in the P tag that is in the "sample" div (and only there),  will have a width of 400px

0
 
moehlerCommented:
Are you saying you have something like this:

<html>
<head>
      
</head>

</body>
      <div>
      <p>para1</p>
      <p>para2</p>
      <p>para3</p>
      <p>para4</p>
      </div>
      <div>
      <p>para1</p>
      <p>para2</p>
      <p>para3</p>
      <p>para4</p>
      </div>
      <div>
      <p>para1</p>
      <p>para2</p>
      <p>para3</p>
      <p>para4</p>
      </div>
</body>

and you want to only apply a given style to para1?

if you want to limit it to just the first para of the first div, you can do this

<style>
      div:first-child p:first-child{
            background:yellow;
      }
</style>

if you want it to be all first para1 then do this

<style>
      div p:first-child{
            background:yellow;
      }
</style>

If so
0
 
moehlerCommented:
the comment was submitted before I was done editing it.

Sorry, that was for background color. If you want to do width, just make appropriate replacement.
0
 
jimr111998Author Commented:
HagayMandel,

Yes tried it and it works but I wanted something more general.
Something that can be used whenever needed without having
to create another style def.

So I took your information and tried this

.P400px P {
  width: 400px;
}

Then used it like this
<div class="BaseDef  P400px">

</div>
and it works. So now whenever I need to limit paragraph widths in a div to 400px
i just add P400px to the class def.

Thanks for pointing me in the right direction. You get the points.









0
 
jimr111998Author Commented:
see my response to HagayMandel
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.