How to prevent a child from inheriting CSS styles

Question

I have a <div> element with a <p> element inside:

 <div style="font-size:10pt; color:red;"> This is my Parent Div. <p>This is my Child Paragraph.</p> My parent Div Ends Here. </div> 

How can I prevent my paragraph from inheriting CSS properties set in a <div> ?

Answer 1

In your case, the best way is simply over the styles that the <p> element inherits:

So, in your CSS file, which you should use instead of inline styles:

 .parent-div { font-size: 10pt; color: red; } .child-paragraph { font-size: 12pt; color: black; } 

Answer 2

In your child, node -

 <p style="font-size:12pt; color:black;">This is my child</p> 

Just set the inline style to whatever you want.

Answer 3

You can use the > selector in CSS to select the immediate child p of the div .

Script Link

 div > p { font-size:1.2 em; color: green; }