7

I am working on a webpage, where I am using css stylesheets instead of inline styling. The problem is, when I do inspect element in chrome for the page, I can see almost all elements inherit some user-agent styling. I can't even uncheck the attribute values eg. div{display: block}, in the styles section of the DevTools under user agent stylesheet sections, like I can with the rest of the styling.

How do I fix this? Or better how do I remove the user-agent styling?

utkarsh2k2
  • 1,046
  • 3
  • 19
  • 42
  • Well... `div` *is* a `block` by default, and that default is set by means of the user agent style sheet. If you want it to be some different... apply something different yourself...!? *Every* element has a bunch of default attributes, not sure what's there to "fix". – deceze Jun 28 '16 at 14:39

1 Answers1

11

The user agent stylesheet is just the default styling that elements come with.

Any CSS rule that applies to an element will override the values from a user agent stylesheet.

So just write a ruleset with a selector that matches the element, with a property that matches what you want to change and a valid value for that properly.

div {
    display: inline;
}
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • I have element styling "display:inline" for a form. This is overriden to "block" by user agent (Chrome).. So apparently for some elements it's not that easy ... – Ralf Dec 16 '20 at 10:10
  • @Ralf — https://jsbin.com/fihuqemube/1/edit?html,css,output — I can't reproduce your problem. If you have a new question, then you should ask one with a [mcve]. – Quentin Dec 16 '20 at 10:27