C and S Design.
Search Friendly Programming and Design

Go to -> C and S Design -> Articles -> CSS


CSS Layout articles and Code

Reducing page size

Something that should be important to any website designer is the need to make the resulting page as small (in bytes) as possible. This is for several reasons. First and foremost is the fact that a smaller page results in much lower loading times for the end user, especially important for dial-up users who probably will want not be waiting around while several k of page code downloads. Anything you can do to reduce this has to be a plus point for your design.

Separate Style from Structure

Cascading Style Sheets (CSS) allows you to do just that by allowing the separation of style from the structure and content. By moving all the font sizing, colors, widths, positions etc to an external style sheet it reduces the amount of code that must be in the page, and once a style sheet is downloaded and cached it is there for all other pages in the site.
The search engine crawlers do not "see" pages in the same way as human visitors so style and layout is not important, so again not having it in the page is a lot less superfluous code that has to be downloaded and stored.

Browser Differences

One thing to be very aware of though is the many differences between the various mainstream browsers. Internet Explorer is by far the worst but of course it is still the most widely used browser with between 75% and 95% of visitors using a version of IE. The figures vary with the type of site being visited, Webdesign and coding sites tend to show a lower percentage of IE users when compared with e-commerce sites.
An important factor when designing a site using CSS it to use a full and valid doctype declaration. This will ensure that the browsers are in "standards" mode and should be interpreting the CSS rules in accordance with the W3c specifications rather that their own interpretation known as "quirks" mode.
The samples and examples here should not be taken as definitive ways of using CSS, they are provided just as ideas that can be tweaked to suit your own site layout or the look you want to achieve.

Valid HTML 4.01! Valid CSS! copyright © C and S Design 2004 - 2005
Website Design and SE Friendly Coding C and S Design