Dreamweaver CSS styles
I’ve got a buddy who always says, “Let me see that in design view.” When he gets done with a web site, the style sheet looks something like this:
.style1 {
font-family: Georgia, “Times New Roman”, Times, serif;
font-weight: bold;
font-size: 16px;
color: #000000;
}
.style2 {
font-size: 12px;
font-family: Georgia, “Times New Roman”, Times, serif;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
color: #000000;
}
.style3 {
font-family: Georgia, “Times New Roman”, Times, serif;
font-weight: bold;
}
.style4 {…
.style5 {…
.style6 {…
Tighter, more concise markup
Although Dreamweaver gives you the ability, even in design view, to rename your styles, I more often see style sheets like the one above.
The are several problems with this stylesheet:
- How can you ever distinguish style 1 from style 6 (or 25)? Your goal should be to create style classes that can be re-used throughout your html page.
By naming your class or id something meaningful, such as, ‘maincopy’ or ‘error’ you are better able to reuse them.
- Your style sheet will be more concise if you declare the font-family and color on the body tag, like this:
body {font-family: Georgia, “Times New Roman”, Times, serif; color: #000000;}
This way you don’t have to repeat the font-family & color with every new style. If you want to deviate from that font-family or color in a certain area or your document, just define it there.
- Consolidate your rules with CSS shorthand.
{padding-top: 5px; padding-right: 5px; padding-bottom: 5px;}
Can be written like this:
{padding: 5px 5px 5px 0;}
Padding and margins always go in order of: Top, right, bottom, left. Just like a clock.
Pretty simple stuff, hunh? A little bit goes a long way. Tomorrow, I have an example from a web site that boasts their product ‘generates XHTML 1.1 compatible output code’. Well, we’ll see what their code…er, markup really (but that’s another issue) looks like below the surface.