CSS Reset


#1

I have a question. In ‘absence’ of an external stylesheet, the User Agent stylesheet takes over but if in presence of external stylesheet why do we have to reset default values wouldn’t that automatically ignore the user agent stylesheet? or does that still interferes with the external stylesheet?

Thanks in Advance!


#2

The user agent style sheet cannot be ignored, only over-ridden by rules with greater importance. Being as it is at the top of the cascade this is relatively simple to do.

p {
    margin: 0;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: 0;
}

The above over-rides the user agent CSS on P-nodes and UL-nodes making them essentially DIV-nodes, now. We no longer have to wrestle with their default styles.

The only reason for doing this is so that we can trust our own rules will always apply, with no unexpected outcomes in the rendering of our document. With certainty comes confidence.

We should not discount the value of the user agent style sheet, though. It is there for good reason, not the least of which is screen readers. By default, list items should be bulleted, indented and have some padding so they stand out. When all we have in mind is visuals, it is easy to forget that a good percentage of users have accessibility challenges. That is a concern that goes all the way to the top of any well planned and designed site. If your site detects a non-browser user agent, it should revert to the default styles and not introduce any visual elements. Just saying…


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.