Geek Answers Handbook

Override USER AGENT STYLE SHEET - Chrome

I have a list item that displays on a web page using a hover effect. The problem that I am faced with is when I apply some kind of border or background to the list item, it looks awful because the filling is created automatically.

Look at this image.

Someone please help me redefine it.

I already looked through the forums, but I only got a way to turn it off from the console so as not to convince him.

enter image description here

+9
html css google-chrome css3
source share
2 answers

Just add the following style:

ul { padding:0 }

This will override the default style.

+8
source share

What you see is the "user agent style" - the template rules that are introduced by your browser in order to have some correspondence between web pages. You can just override this.

Style sheets from different sources have different priorities as follows (from lowest to highest) *:

  • user agent styles => these are the styles that you see in the screenshot
  • custom styles
  • Author CSS styles (beware of priorities)
  • author’s built-in styles
  • Author styles with !important
  • custom styles with !important

user agent = browser
author = you
user = browser user

So for you, all you need to do is declare

 ul { padding:0 }

and this will overwrite UA styles. However, if the user would declare their own styles using !important , you cannot do anything about it as an author - (fortunately for the user) you cannot undo these styles.

* In real life, cascading nature is even more complex than this list may suggest, which I did not cover for simplicity. If you're interested in this, look at CSS priority.

+16
source share

More articles:


All Articles