Fluther: How do I override earlier styles in my CSS stylesheet?

How do I override earlier styles in my CSS stylesheet?

Asked by vekteur (107

) July 21st, 2010
10 responses
“Great Question” (3

)

One of the objects in a group of objects needs to be different. I added the unique styles for this object after the styles that apply to the main group but the unique style is not showing up. In firebug the unique selector is showing up for the element but it’s all crossed out and the main group selector is being used. Any ideas?

Follow this question

Send to a friend!

Topics: technology, HTML, internet, web design, CSS, code

Observing members: 0

Composing members: 0

Answers

Are the unique styles inline? That should do it. Like this:

<p style=“color:sienna;margin-left:20px”>This is a paragraph.</p>

http://www.w3schools.com/CSS/css_howto.asp

jaytkay (25810

)“Great Answer” (1

)

Thanks that works – but is there a way to do this in the stylesheet? I’m just confused since the selector is there and shows up in firebug but doesn’t get applied.

vekteur (107

)“Great Answer” (0

)

Like this?

<html>
<head>
<title>Testing Style Override</title>

<style type=“text/css”>
body {color: red;}
.headlines {color: blue;}
</style>

</head>
<body>

This should be red<br />
<div class=“headlines”>This should be blue<br /></div>

</body>
</html>

jaytkay (25810

)“Great Answer” (0

)

you can always use the important tag. this will stop anything from overwriting that specific attribute. For example.

.class{ background:white !important; }

once that has been declared, nothing can override the white background.

wgallios (1768

)“Great Answer” (2

)

@vekteur Welcome to Fluther. It’s great to have another HTML coder join us.

Your new style was a victim of inheritance. Read up on CSS inheritance. As @jaytkay noted, you could use a local style. If this uniquely styled element is going to show up in lots of places, you could give it its on class that would be added to the class of the main group. Just see that it ocurrs below your main group’s style in your style sheet so its inheritance rules.

ETpro (34605

)“Great Answer” (0

)

I believe this is also a specificity issue. You can read about specificity here and here. In other words, styles for “div span.class” will overwrite styles for “div .class”, regardless of which came first, because the first has a more specific selector.

The easiest solution would be to add the !important declaration to the style. Otherwise, just make sure that you’re as specific as possible when trying to overwrite another style because the order they’re defined doesn’t always matter.

jpwilson25 (266

)“Great Answer” (3

)

As people have pointed out, !important is the quick solution to your problem. Specificity is a slightly better solution. Bear in mind that stylesheets with too many !important declarations or overly specific selectors designed to override prior declarations quickly get disorganized and hard to read. My advice is to work with the cascade. Reorganize your stylesheet so that the more general declarations are closer to the top and the more specific ones closer to the bottom. Not only does CSS then naturally apply styles in an order that makes sense (starting at the top, with later more specific styles overriding the previous more general ones) but it’ll be easier for you to go back later on and understand what you’ve written.

lapilofu (4325

)“Great Answer” (1

)

Thanks for all the great answers! As my old English teacher once said: if your writing is B.S. it means you need to “be specific.” Apparently it applies to coding as well.

vekteur (107

)“Great Answer” (1

)

@vekteur Boy does it ever. I keep waiting for computer technology to advance to the point where the “Do what I meant, not what I said.” instruction works.

ETpro (34605

)“Great Answer” (0

)

Response moderated (Spam)

Answer this question

Login

Join

to answer.

General Question

How do I override earlier styles in my CSS stylesheet?

Answers

Answer this question

Login

Join

Mobile | Desktop

Send Feedback