HTML and CSS Reference
In-Depth Information
Reasonable names for class and id attributes can make your style sheet easier to read;
choose names for these important selectors that reflect the functions of the elements. If
you can, avoid selectors based solely on appearance characteristics, such as the boldtext
or redbox classes. Instead, try something descriptive of why you've chosen those styles,
such as definition or sidebar . That way, if you change your page styles later, you
won't have to rewrite your HTML. There are few things as confusing as a rule like the
following:
.redbox { color: blue; background-color: white; }
In what way is that box red? Well, it probably was red in some prior incarnation of the
style rules, but not now.
When you list your rules in your style sheet, do them in a sensible order. Generally
speaking, it's best to start with the body rules first and then proceed down from there, but
because the cascade order matters only in case of conflict, it's not strictly necessary to
mirror the page hierarchy. What's more important is that you locate the rules that apply
to a given selector and to discern which styles should be applied.
An example of bad style sheet organization is shown in Listing 13.6. This is part of the
style sheet from a high-quality website, but with the rules in a scrambled order. How
hard is it for you to figure out what is going on here?
LISTING 13.6
A Randomly Organized Style Sheet
#sidebar0 .section, #sidebar1 .section { font-size: smaller;
border: 0px solid lime; text-transform: lowercase;
margin-bottom: 1em; }
gnav a:link, #nav a:visited, #footer a:link, #footer
a:visited { text-decoration: none; color: #CCCCCC; }
#nav .section, #nav .shead, #nav .sitem, #nav h1 { display:
inline; }
#sidebar1 { position: absolute; right: 2em; top: 3em;
width: 9em; } a:link { color: #DD8800; text-decoration: none; }
#main { } a:hover { color: lime; }
#nav .shead, #nav .sitem { padding-left: 1em; padding-right:
1em; }
#nav { position: fixed; top: 0px; left: 0px; padding-top:
3px; padding-bottom: 3px; background-color: #333333; color:
white; width: 100%; text-align: center; text-transform:
lowercase; }
#nav .section { font-size: 90%; } #layout { padding: 1em; }
body { background-color: white; color: #333333; font-family:
Verdana, sans-serif; margin: 0; padding: 0; }
#nav h1 { font-size: 1em; background-color: #333333; color:
white; } a:visited { color: #CC8866; text-decoration: none; }
13
 
Search WWH ::




Custom Search