full script is in the demo page

base.html
~~~~~~~~~

this heading has different color
properties, depending on the browser

Firefox.css
~~~~~~~~~
#differsByBrowser {
color: green;
text-decoration: underline;
}

IE6.css
~~~~~~~~
#differsByBrowser {
color: red;
}

IE7.css
~~~~~~~~~
#differsByBrowser {
color: blue;
}

altStyle.js
~~~~~~~~~
// set style sheet name to denote the
// default browser
var styleName = ‘Firefox’;

// determine which browser is actually
// being used and reset the value of
// styleName, if the preferred, default
// browser is not the current case
var agt = navigator.userAgent;
// the “sniff” can be as specific as
// needed, according to the different
// browsers to be differentially styled
if (-1 != agt.indexOf(‘Firefox’)) {
// exit for Firefox – already set
}
if (-1 != agt.indexOf(‘MSIE 6′)) {
// reset to indicate IE6
styleName = ‘IE6′;
}
if (-1 != agt.indexOf(‘MSIE 7′)) {
// reset to indicate IE7
styleName = ‘IE7′;
}
//…handle other browsers as needed…

// if alternate styles are needed for
// current browser, bring them in here –
// since they fall later in the cascade,
// they will override any declared in the
// default sheet
if (‘Firefox’ != styleName) {
var s1 = ”;
document.write(s1 + styleName + s2);
}

In all cases .selector denotes that way you’d usually select the elements/classes/IDs:

/* targets all IE */
.selector {
*property: value;
}

/* targets just IE6 */
* html .selector {
property: value;
}
/* or */
.selector {
_property: value;
}

/* to target Safari */
body:last-child:not(:root:root) .selector {
property: value;
}

/* For Safari 3 and Opera 9 */
@media all and (min-width: 0px) {
head~body .selector {
property: value;
}
}

Or to selectively target entire stylesheets to IE:

The last technique is actually used on the question page here on Answers.