Understand the role of user agent style sheets
<p>I'm working on the page in Google Chrome. It displays the following styles correctly. </p>
<pre class="brush:php;toolbar:false;">table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}</pre>
<p>Note that I did not define these styles. In the Chrome Developer Tools, it replaces the CSS filename with <strong>User Agent Stylesheet</strong>. </p>
<p>Now, if I submit the form and some validation errors occur, I get the following stylesheet: </p>
<pre class="brush:php;toolbar:false;">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;
}</pre>
<p>The <code>font-size</code> in these new styles disrupts my design. Is there a way to force my stylesheet, if possible, to completely override Chrome's default stylesheet? </p>