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 the CSS properties set to the <div>?
In your case the best way is to just over right the styles that the <p> element is inheriting:
So in your CSS file, which you should be using instead of inline styles:
.parent-div {
font-size: 10pt;
color: red;
}
.child-paragraph {
font-size: 12pt;
color: black;
}
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.
You can use the > selector in CSS to select the immediate child p of div.
div > p {
font-size:1.2 em;
color: green;
}
all values? Please elaborate a little?