CSS – Keep it simple
Cascading style sheets (CSS) can be simple, complex, convoluted beyond belief. While CSS is the backbone of modern web design, it’s not fully understood by a lot of people using it. I constantly see CSS with significantly more code than is necessary. More isn’t always better. I’ve always thought it was better to just clearly define what you want and be done with it. Consider this CSS:
body {font-size:medium;}
p { font-family:Arial, Helvetica, sans-serif;}
a:link {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #660000;}
a:visited {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #000000;}
a:hover {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #330000;}
a:active {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #990000;}
Sure, it would work, but what if you want to change it? If you wanted to make a site wide font change, you’d have to change every instance of the the font specification. By first assigning all general specifications, then listing exceptions, we can significantly shorten this code.
body {
font-size:medium;
font-family:Arial, Helvetica, sans-serif;}
a { font-weight:bold;}
a:link { color: #666600;}
a:visited { color: #000000;}
a:hover { color: #330000;}
a:active { color: #990000;}
By defining the site’s basic font on the body tag, we’ve eliminated any need to use it elsewhere. By defining all links “a {” as bold, we’ve eliminated the need to define it elsewhere. To change the font on the entire site would now only require changing the body tag’s definition.
If I wanted some aspect of the site to use a different font than defined in the body tag, it would only be a matter of adding that tag into the CSS with the font defined differently. For instance:
body {font-family:Arial, Helvetica, sans-serif;}
h1, h2, h3, h4 {font-family:”Times New Roman”, Times, serif;}
This would make all fonts Arial, except for headers 1-4. First we defined the site as all Arial font, then we changed the headers to Times. My rule of thumb for CSS is first define the general, then define exceptions. This short post won’t make you a master of CSS, but maybe it can help you keep it simple.
You can leave a response, or trackback from your own site.
1 Comment »
RSS feed for comments on this post. TrackBack URI
[...] Thoughts on Design CSS – Keep it simple Cascading style sheets (CSS) can be simple, complex, convoluted beyond belief. While CSS is the backbone of modern web design, it’s not fully understood by a lot of people using it. I constantly see CSS with significantly more code than is necess… [...]
Pingback by Blogging Openly Open Trackbacks | Adam's Blog October 29, 2007 @ 10:00 pm