Simple CSS Strategies

As you read articles on how to build/use CSS, one thing to really consider is should you support IE 6? As of this writing I would say forget IE6, it is at now a small percentage. For example in the month of November 2010 we had 72254 visits and 1806 visits were IE6 that is only 2.3%

  1. Semantic HTML
    It starts with semantic HTML! If you don't know how to use HTML correctly you won't be able to use CSS correctly either. Start learning how to use HTML correctly.

    Your first rule should be this, create your web page design with only necessary HTML elements. There should be no span tags at this point!

  2. Add divs
    Start with the big content sections and put them in div's with meaningful id names. Some of the most common id names are: wrapper, banner or header, content, nav, sidebar and footer. The basic concept of wrapper is what the name suggests, it wraps all of the other content. The other elements are named for where they are on the page or the type of information that is with in them.

    Note: Pick good and descriptive names when you chose id names! And again only put an id or class if it is absolutely necessary.

  3. CSS for visual structure
    At this point add an external CSS file and start to add the layout CSS, which is the structure. If you are a beginner you should stick with a fixed width design, as this will greatly simplify your life. I recommend only be using the CSS attribute float for layout and avoid using the position property.

    Some basic things to remember:

    1. Keep the CSS rules in order. At the top of your page should be your universal selectors followed next by CSS selectors as they appear in the HTML. So wrapper would be near the top and footer near the bottom of the page. This helps in keeping you CSS easy to read and reduces possible redundant rules.

    2. Tab or space in and place each property on a new line for each of your CSS rules.

    3. Start with the universal selector with the properties of margin and padding and set both to zero. This removes browser default spacing which is different on every browser! Just note that you now have to set all margin and padding when you want it.

    4. Every structural div needs to have a width declared on it!

    5. Use spacing! Remember padding, margin and border add to the width or technically the total space in width used. See the box model for more information.

    6. You probably should set a height for banner and possibly footer and nav, but all other elements 99 times out of a hundred should not have a height. Why? Remember you are designing a web site and both the content and sidebar will change and it needs to be dynamic. You don't want to have to set the height every time a page edit is made. Plus every browser can display the font size differently. Okay then what do you do if you want your content and sidebar different colors? Its easy! Look at this technique called Faux Columns. In our example just put it repeating background image on the wrapper.

    7. Where needed use float or clear properties.

  4. CSS for typography
    Once you have the structure looking how you want it, then it is time to work on the typography. This is basically just setting font size, color, font family, line-height, margin, padding and any other property you wish for all HTML elements that might be used on your web page. For example start with the ones that certainly be on page like h1, h2..., p, ul, ol, li, em, strong, a, q, blockquote, cite, img, pre, code, and address are a good start. There will probably be more, just think through as many elements that could be used and how they should look.

Comments (4)

  1. Just another webguy:
    Aug 10, 2012 at 01:03 AM

    It's all CSS these days, tables seem to be gone. Anyway, CSS can be tricky somethimes as one declaration can influence another. For example I have a slideshow in the body of a page with some CSS declarations. They seem to influence the Menu that is on top of the page. If I delete the slideshow, the Menu comes down to the right a few pixels. Despite that the slideshow is in it's own DIV. I haven't been able to trace the problem to it's origin, so like I said, CSS can be tricky somethime.s

  2. last minute ferien buchen:
    May 25, 2013 at 03:28 PM

    Wow! thank you! I constantly needed to write in my web site
    anything like that. Can I take a part of your post to my web log?

  3. Lavada:
    Sep 22, 2013 at 08:07 AM

    Simple CSS Strategies to make make Web Development easy.

    This is helpful!

  4. Buffy Janes:
    Nov 06, 2013 at 04:33 PM

    Howdy this is kind of of off topic but I was wanting to know
    if blogs use WYSIWYG editors or if you have to manually code with HTML.
    I'm starting a blog soon but have no coding expertise
    so I wanted to get guidance from someone with experience.

    Any help would be enormously appreciated!

Leave a Reply

This thread has been closed from taking new comments.