Elaborating some on global reset and global styles

A few days back I illustrated use of a blunt-force global reset as part of the most recent step in Project Grace. I relied on this purposefully blunt approach to make the perhaps overly dramatic point that resetting all margins and padding for all structural elements significantly simplifies the process of building out one’s CSS for use in most all browsers. And the blunt approach is especially effective for something like a closed, secure Pika installation because it is highly unlikely your actual users (not necessarily your resident IT geekmeisters) rely on any browser other than Firefox or Internet Explorer. We certainly don’t here at LSNC.

But I am mindful of the broader implications of using a global reset, i.e., there are any number of other web browsers or viewers that may be used with your public web content, which is why I referred to Eric Meyer’s au courant article, Reset Reloaded. My current practice for building out CSS on newer public web projects here is to use a modestly trimmed-down version of Eric Meyer’s code, consistent with those structural elements we actually would use in an XHTML 1.0 Strict build, combined with certain “Webdogs” global style defaults.

So, for the record, here are the more nuanced CSS global reset and initial global styles we currently use on all new website builds, with notations:

/*
global resets based on Eric Meyer's "Reset Reload" at
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 */

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, pre,
a, code, em, font, img, strong, sub, sup,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }
/* remember to define focus styles! */
:focus {
    outline: 0;
    }
body {
    line-height: 1;
    color: black;
    background: white;
    }
ol, ul {
    list-style: none;
    }
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
    }
caption, th, td {
    text-align: left;
    font-weight: normal;
    }

/*
global resets per Webdogs defaults;
font-size set per Clagnut's "How to size text using ems" at
http://clagnut.com/blog/348
*/

body {
    color: #333333; /* reduced contrast black */
    font-family: verdana, arial, sans-serif;
    font-size: 62.50%; /* resets 1.0em = 10px */
    line-height: 1.50; /* reset leading for readability */
    }
a:link,
a:visited {
    background: transparent;
    color: #333333; /* reduced contrast black */
    font-weight: bold;
    text-decoration: none;
    }
a:hover,
a:active {
    color: #0000FF; /* blue */
    }

/* prevents inherited shrinkage in Firefox per Clagnut at:
http://clagnut.com/blog/348/ */
li li,
li p,
td p {
    font-size: 1.0em
    }

/* for Firefox where page content < viewport height,
per Zoe Gillenwater's "Create Pages that Fill the Browser with CSS" at
http://www.communitymx.com/content/article.cfm?cid=BAD95
 */
html,
body {
    margin-bottom: 1px;
    min-height: 100%;
    }

Since this is the type of CSS code one is likely to use over and over, consider putting it into a separate style sheet and then use an import rule to pull it into your overall styles for the site. Just a thought.