Geeks With Blogs
Lee Brandt's Blog You're only as smart as your last line of code

OK. I am not a designer. However, a few years ago I was forced to get good at CSS and have gotten to the point that I feel confident I could create almost ANY look and feel using CSS and table-less design. There are some things that I do regularly to help me out.

1. Start at the top. Start with your master page and style that up really good. That will be your base.designer

2. Start with * { font-family: Arial, Helvetica, Sans-Serif; Margin: 0px; Padding: 0px; font-size: 1.0em; } It is at the top of almost every style sheet I do. The font-family may change (like Verdana, Helvetica, Sans-Serif) but the margin and padding set to zero and the base font size set, means your starting from a known state.

3. Name your classes by function and leave any hint of appearance out of it. This is ESPECIALLY important. I recently saw a class called “.SmallColoredLabel” the style? { font-size: large; } Chances are it started out as a small colored label. but as the clients reviewed and changed their minds, they decided they wanted them black and a bit larger. If the class had been “.SubHeader” then you could change the style of that without ever confusing anyone.

4. Use fluid designs when you can. Sometimes the design is so specific that you can’t make the alterations necessary to create a good fluid design. Maybe a designer could, but I can’t. But a fluid design (one that stretches with the browser window, will be much more useable to people.

5. Use web-safe colors whenever possible. Sometimes the demand for a specific branding color makes this impossible, but using web-safe colors will ensure that your site looks the same across most machines. using the three-letter short hands for the colors (#CCC {light grey} or #369 {grey blue}) helps.

6. Use ids for things you can, when you know it will only be used once. Like the Main Page Div, the Master Page header div, etc.

7. Remember you can use more than one class on every element. So a text box might have class=”Input PhoneNumber CustomerPhone” letting me set a style for all Inputs, shorten it for PhonNumber text boxes and setting any specific styles for the customer phone number in particular.

OK, kiddies these are the rules I generally follow to start with when styling a site. Again, I am not a designer, but these rules have helped me quite a bit and some have been hard-learned lessons.

Hope this helps.

Posted on Monday, August 31, 2009 10:41 PM | Back to top

Comments on this post: Some Simple CSS Rules

# re: Some Simple CSS Rules
Requesting Gravatar...
Great blog. Funny on Item 3 as I have seen it before.
Left by Boon Lee on Aug 31, 2009 10:56 PM

Your comment:
 (will show your gravatar)

Copyright © Lee Brandt | Powered by: