HTML and CSS Reference
In-Depth Information
CSS Resets
In the Chapter 2 discussion of browser- and user-created style sheets, you
saw how the default styling for common elements such as paragraphs,
links, and forms can be different from each other. Building a site on this
inconstant foundation can make cross-browser consistency a more diffi-
cult task than it already is.
A CSS reset creates a common baseline to work from and zeros out some
or all aspects of browser default styling. For example, it is common for
browsers to have padding set on the <body> element so that plain HTML
content has a little room to breathe. However, it may be easier to style
a site if you are instead starting exactly the top-left corner. Font sizes,
padding, margin, table properties, and form elements are all typical
candidates for being “reset.”
Using Resets
It is common to include a reset file so it is the first CSS code that the
browser encounters. This is done by inserting its contents into the begin-
ning of the main style sheet for the web site, by referencing it directly
using a <link> element before your global style sheet, or by using an
@import statement at the beginning of the main style sheet file, similar
to the following:
@import url(reset.css);
There isn't much to a reset, but a few solid examples have evolved over
the years. They're written to normalize inconsistencies between the
default setting of various browser or trimming down default rules when
they're too overbearing (as in the case of form elements). Whichever one
you use, look it over before you use it on a project to make sure it isn't
doing anything you don't want (such as setting colors or font sizes).
Search WWH ::

Custom Search