Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Selectors Grouping and Modifying Selectors

Boris Vukobrat
Boris Vukobrat
4,248 Points
Posted by Boris Vukobrat
Boris Vukobrat
4,248 Points

Overriding user agent styles

On what circumstances we can't override user agent styles with our stylesheet? Recently, I had a problem, that browser applied its default values on a property, instead of mine. I didn't resolve it why?

3 Answers

Tarun Mall
Tarun Mall
479 Points
Tarun Mall
Tarun Mall
479 Points

Unless you are facing some browser specific issue, you can always override CSS. Did you try to inspect your element and see the hierarchy of CSS applied on your particular element?

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi Boris, as Tarun said you should usually be able to set any styles you wish. Do you have an example of styles you cannot get to function correctly? If you post the code and browser you are having the problem on then someone can help you with the best CSS to use.

Boris Vukobrat
Boris Vukobrat
4,248 Points
Boris Vukobrat
Boris Vukobrat
4,248 Points

Ok guys, so knowing that I can derive conclusion there is a problem somewhere else. It could be something with specificity, I didn't dive into that yet.

It is a margin that is applied on one element from browser's default style - 16px; I have body {margin: 0;} at the top and had to repeat zero margin declaration in one particular element. Like this:

#sidebar ul {
    margin: 0;
    padding: 0;
    position: absolute;
}

And I have in parent div element position: relative; which, for some reason, annuls my body declaration, and returns to browser's.

Carlos Espinal
PLUS
Carlos Espinal
Courses Plus Student 4,742 Points
Carlos Espinal
Carlos Espinal
Courses Plus Student 4,742 Points

Hi Boris, Negative margin (-16px) coming from the browser is odd. You can just zero out that element. It would be useful if you could post the markup and the rest of the CSS. If you think the problem is a due to specificity you can always append !important at the end of your rule (e.g: #some-element { margin: 0 !important;})