search

Home  >  Q&A  >  body text

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>
P粉277464743P粉277464743459 days ago571

reply all(2)I'll reply

  • P粉518799557

    P粉5187995572023-08-28 10:03:10

    If is missing from your HTML content, you may experience the browser prioritizing the "User Agent Style Sheet" over your custom style sheet. Adding a document type solves this problem.

    reply
    0
  • P粉477369269

    P粉4773692692023-08-28 09:06:00

    What is the target browser? Different browsers set different default CSS rules. Try adding a CSS reset, such as meyerweb CSS reset or normalize.css, to remove these default values. Google "CSS reset vs normalize" to see the difference.

    reply
    0
  • Cancelreply