Override Definition In Css File

June 29, 2023 Post a Comment

I have a css file that defines style for all

tags. like this p { ......... } How can I write a

in a page where the stylesheet is included that has default st

Solution 1:

There's no easy way to do this.

There a some common tricks to simulate that behavior though. The best one to use would vary based on how complex the overridden region is, and how often you want to do this.

Method 1 (for simple overrides):

Add an extra class definition in the statement similar to the one where you clear the default styling (such as is discussed at http://www.wordpress.darfuria.com/blog/clear-css-defaults). You might have to arrange the declarations carefully to prevent the 'normal' style from taking precedence.

.override {/*Your default style overrides, color: white;
 margin: 0; background:none; etc */}


<p class="override">foo</p>

Method 2 (clunky, but good for complex regions):

Use an iframe to pull the whole region from a separate .html file hosted elsewhere on your site. The content inside iframes respects the CSS of the page inside the frame, and generally ignores the CSS from the surrounding page.

Method 3 (good for one-shot overrides):

Use inline styles, as others have described here.

Edit: Not Really a Method, But Probably The Most Correct Way

Also probably not what you want to hear

Re-think your how you've arranged your classes.

For example:

If the overridden <p> is special in some way, it probably deserves it's own class that describes what it's purpose is. <p class='override'> doesn't help people who will be looking at your design after you're done, since it doesn't tell them what the overridden text is for or why it's styled that way.

Are the overrides coming in a specific region? If so, them a style definition like div.left_nav p {/*styles*/} might be a better fit.

Lastly, Is your default <p> styling not really default? Maybe a more loosely specified p style might be in order, with additional p.foo and p.bar definitions later on.

This doesn't fix your immediate problem, but it might be worth chewing on before you start your next project.

Solution 2:

You can use inline styling to override the default styling.

<p style="background-color: #ffffff">white bg</p>

Inline styles have the highest precedence. The only styles that have higher precedence than inline styles are user styles applied by the readers themselves.

Solution 3:

Just to check. For all the talk of "default styles", if you set the style for a type of element in a CSS file, e.g.:-

li {...}

Then you also include a css file that contains a class definition and apply that class to an individual instance of that element type, e.g.:-

<liclass="myLiClass">Some Text</li>

From what I understand it is impossible to get the class myLiClass to override any attribute of the style specification "li {...}" for the element by providing that overriding style in a css class.

Therefore I assert that this means:-

"If you specify a style attribute for any html element type (element type, not a class) in a css file, then all pages that use that css file cannot show that element type attribute using any different styling, where that different styling is stated as a css class."

Can anyone confirm this with an absolute yes, or a working example of why this assertion is not true.

Solution 4:

You can apply the style for your tag from your stylesheet like this:

CSS

p.first{ color: blue; }
p.second{ color: red; }

HTML

<html><body><p>This is a normal paragraph.</p><pclass="first">This is a paragraph that uses the p.first CSS code!</p><pclass="second">This is a paragraph that uses the p.second CSS code!</p></body></html>

Solution 5:

I would agree that there isn't really a "Default" style for a tag since each browser has significant freedom on how to display it.

I think the easiest answer is to rethink the problem - define a class that you use for all P tags and then if you fail to use the class it will give you the default styling.

<style>p.all {margin.top:9px;}
</style><p>This would be default style</p><pclass="all">This would have your style</p>

Alternately, if you wrapped all of your stylized content in a div or some other tag, you could nest the styles like this:

<style>div.foop{border:1px solid black;}
</style><p>normal</p><divclass="foo"><p>abnormal</p></div>

Hope this helps.

Code Html5