can't change inherited styling 2

[1DMF]

hello all,

I have a div of id 'pagefooter' i have created the following CSS rule

#pagefooter p {
    line-height:16px;    
    font-size:0.6em;
    font-style:italic; 
    text-align:center;}

however one of the paragrapghs i want a different font size, so have coded <p class="myclass"> , but it refuses to apply the myclass styling and just applies the global <p> styling?

why won't it apply the class to the paragraph I want?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[ca8msm]

Which style comes first in the CSS file ("myclass" or "#pagefooter p")?


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[traingamer]

try

#pagefooter p.myclass { ...

See thread215-1307992 for Vragabond's brief explanation of specificity and some helpful links.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Foamcow]

IT can get messy, but you can add an !important to a specific rule in order to override the specificity.

#pagefooter p.myclass {
  font-size:1.5em !important;
}

Note that the !important comes before the ;

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[1DMF]

thanks guys.

knew it'd be something silly

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[ChrisHunt]

This is a fun way (no, really!) to remember how CSS specificity works:

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[traingamer]

Good link, Chris!

 

[1DMF]

hmm i might be a star wars child, but i found the other post confusing enough without adding siths , storm troopers and darth vader into the mix.

basically # beats . and . beats <element>

so if you apply #whatever {color:blue;}

and within #whatever you have a class you cannot just use .myclass to override, you must use #whatever.myclass {color:green;}

why these people can just say it like it is instead of confusing us poor mortals is beyond me.

it took me a few days and a good kicking from Vragabond before i got my head round margin collapsing.

I guess I must be thick!


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.