How to override font-size (em) in this condition?

Question

I don't want to edit p {font-size:1.3em; padding-bottom:15px;} and can't add page specific external css files.

only for one page of site I want to remove font size from p {font-size:1.3em; padding-bottom:15px;} and want to add in this

#mainIntro {font-size:1.3em;}

How to make this possible?

The questions is how to neutralize the font size in #mainIntro p {....}

if i keep

#mainIntro {font-size:1.3em;} then i will get double size.

Answer 1

You can add a jQuery script to check for the page and modify the style on the fly.

I am not a master in jQuery and so not writing the script for you.

Answer 2

Add this in the head after the external stylesheet. Depending on styling you might need to add !important to the p declaration.

<style>
p {font-size:1em}
#mainIntro {font-size:1.3em;}
</style>

Answer 3

You can enclose html body code on this particular page with

<div class="mySpecialPage"> 

... [page's html code]
<div />

and then add statement to css file using selectors

Answer 4

Because of the cascade, you can't just remove the font-size:1.3em specification.

Try this:

#mainIntro {font-size:1.3em;}
#mainIntro p { 100%; }

This will set the font size for that div to 1.3em, and then override the existing font size for #mainIntro p to 100% of it's current size; thus preventing the double font-size.