how do you reset CSS localized in your small Universe of your ?

Scenario:

1
What to do if you're using some CSS layout by somebody else,
and you want to style differently at certain parts, BUT...

the original CSS already styled stuff like <p> and <div> generally...

how do you reset CSS localized in your small Universe of your <block> ?


2 what is the CSS syntax actually?

Why does this work
p.opening-intro
and this doesn't
.opening-intro p


And why does this work
#opening-jqm-homeheader p
and this doesn't?
p #opening-jqm-homeheader
p#opening-jqm-homeheader

What is the space combinator, and the , (comma) combinator?





http://stackoverflow.com/questions/9515534/disinherit-reset-the-css-style-of-a-specific-element

This is a problem that is solved best by avoiding it from the beginning. I try to keep contextual (or decendeant) selectors to a minimum and I avoid using tag names as selectors. Instead I make use of classes so that my html elements (<a>, <p>, <ul>, <span>, etc) will always look like they've not been styled no matter what the context/its parent element is.

In your case, I think you can only overwrite the inherited styles as you have mentioned with the inline-style attribute or with !important or even better, create a .reset class.

.reset { with: auto; height: auto; padding: 0; /* etc */ }

All solutions mentioned above have drawbacks, so you'll need to chose your battle.

Contextual/descendent selectors =
http://reference.sitepoint.com/css/descendantselector



Q. Ok, I have a beautiful web, with its styles within a CSS and everything

But now I've found a problem, I want ONE list to be virgin, without any style inherited.

I know I can do it just giving it a style="(...)" so it overwrites the inherited style, but, is there any instruction / trick / something to do it without doing this?

Solution to #1, just make a localized css style block next to the new html block you put in, for ease of testing:

    <style type="text/css">
p.opening-intro {
    border-top: 1px solid #75AE18;
    font-size: 0.96em;
    line-height: 1.3;
    padding: 0.5em 1em 0;
color: #558E08;
}
#opening-jqm-homeheader p {
    color: #666666;
    font-size: 0.9em;
    font-weight: bold;
    line-height: 1.3;
    margin: 0.3em 1em 0;
}
#opening-jqm-homeheader {
    margin-bottom: 1em;
}
    </style>

http://stackoverflow.com/questions/8228980/reset-css-display-property-to-default-value



2
http://snipplr.com/view/7438/element-specific-css-reset/
http://perishablepress.com/a-killer-collection-of-global-css-reset-styles/
css specific reset
http://weblogs.asp.net/bleroy/archive/2009/04/14/css-isolation-there-has-got-to-be-a-better-way.aspx
how to locally reset css