What is a user agent stylesheet?

Question

I'm working on a web page in Google Chrome. It displays correctly with the following styles.

table {     display: table;     border-collapse: separate;     border-spacing: 2px;     border-color: gray; } 

It is important to note that I didn't define these styles. In Chrome developer tools, it says user agent stylesheet in place of the CSS file name.

Now if I submit a form and some validation error occurs, I get the following stylesheet:

table {     white-space: normal;     line-height: normal;     font-weight: normal;     font-size: medium;     font-variant: normal;     font-style: normal;     color: -webkit-text;     text-align: -webkit-auto; }  table {     display: table;     border-collapse: separate;     border-spacing: 2px;     border-color: gray; } 

The font-size from these new styles is disturbing my design. Is there a way to force my stylesheets and if possible, completely overwrite Chrome's default stylesheet?

Answer 1

What are the target browsers? Different browsers set different default CSS rules. Try including a CSS reset, such as the meyerweb CSS reset or normalize.css, to remove those defaults. Google "CSS reset vs normalize" to see the differences.