we said:
I am beginning to use css for my pages. Always only used simple html.
Simple HTML and CSS go together like coffee and pie. You'll enjoy it.
Now, when studying a css file from a homepage, I read:
"all.clsMenuItemNS, .clsMenuItemIE{text-decoration: none; font: bold 12px
arial; color: white; cursor: hand; z-index:100}"
What does this line do in a css file?
It applies the properties within the brackets to any element with a
class of "clsMenuItemIE" and any element with a class of
"clsMenuItemNS". I am unsure if that is correct though, because
technically one rule is being applied to any element of "all" that has a
class of "clsMenuItemNS". In HTML, there is no element "all".
If one wants to apply the style to any element with a class of
"clsMenuItemNS", then the following is enough:
..clsMenuItemNS { ... }
So, what else is wrong with the above example.
- Font size specified in pixels; this will leave IE users out in the
cold who want to change a website's font size to their preference.
Better to specify in relative units (%, ems, keywords) or not specify
font size at all.
- When specifying color, also specify background color. Authors cannot
know what colors the visitors has by default (or set up himself, in a
User Stylesheet). And there is inheritance of CSS properties to keep in
mind as well. In a worst case scenario, the site ends up with white text
on a white background.
- Messing around with browser UI is not wise. Better to leave the mouse
pointer alone. It's not the author's, it's the visitor's.
- Specifying z-index only has effect when also setting the position
property to "absolute". That, however, may have been done in another CSS
rule, that you didn't quote here.
The quoted CSS suggests that the original author tries to hack around
different browsers, ignoring the fact that there are more than Netscape
and IE. Better not to hack, but to stick with webstandards (and some
trial and error practice with IE); the only thing close to a guarantee
of crossbrowser compatibility.
