Understand the role of user agent style sheets

Question

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

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

Note that I did not define these styles. In the Chrome Developer Tools, it replaces the CSS filename with User Agent Stylesheet.

Now, if I submit the form and some validation errors occur, 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 in these new styles disrupts my design. Is there a way to force my stylesheet, if possible, to completely override Chrome's default stylesheet?

Answer 1

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.

Answer 2

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.