CSS and Style Sheets

JQ Johnson jqj at darkwing.uoregon.edu
Thu Mar 9 09:23:19 EST 2000


Bill Drew gives us a style sheet to critique.

>http://www.morrisville.edu/library/

Bill,

Your style sheets look generally good.  A couple of tips:
 1/ test using Netscape.  Many things behave differently in NS and MSIE,
with MSIE generally being more intuitive and arguably a more correct
implementation of the spec.  (you'll of course also test with style sheets
disabled to insure graceful degradation).
 2/ example of the above: given your style sheet, font-family is not
inherited from the body into embedded tables when viewed with netscape.
So, for instance, on your 1.html or 6.html pages, the font is wrong for the
bulletted list.  Conceptually, it's useful to think of Netscape as having a
browser default style sheet that specifies font-family (based on the value
you enter in preferences) for both BODY and TD tags; such a style would
have lower priority than an explicit style you specified for TD, but would
have higher priority than a style applied by inheritance.  You can work
around this problem by adding to your style sheet
	TD,TH {font-family: Verdana, Arial, Helvetica, sans-serif ;} 
 3/ as a generalization of the above, beware of inheritance for styles.
Inheritance is necessary, but it's the source of many bugs.  As another
example, suppose someone used your H1 tag inside a tag that had a black
background-color style.  You'd then get black on black.  Some CSS verifiers
recommend that whenever you code a text color for a style you also
explicity include a background-color (in your case that would be
	H1 {color: black; background: transparent} 
which doesn't address the inheritance issue.  Personally, I'd give up on
the background image)
 4/ note that A:hover is an MSIE extension, and is not supported by
Netscape.  So given your style rules, a Netscape user has less clue that
certain text on your pages is hyperlinked (rather than plain blue or green
dead text).  Particularly problematic for totally colorblind viewers
(granted, that's a smaller segment than R-G colorblind).  Given your
decision on how to represent hyperlinks, I'd recommend that no other text
on the page be presented in bold (so, for instance, don't use bold for
"Click on Instant Message").
 5/ don't use styles unless you think you really need them.  For instance,
why force font-size:medium on your viewers if for some reason they prefer a
different size?

JQ Johnson                      Office: 115F Knight Library
Academic Education Coordinator  mailto:jqj at darkwing.uoregon.edu
1299 University of Oregon       phone: 1-541-346-1746; -3485 fax
Eugene, OR  97403-1299          http://darkwing.uoregon.edu/~jqj/


More information about the Web4lib mailing list