CSS Web Design

Basic Tips

• Underlying HTML code structure should be semantic and clean.
• Look for repeated patterns, identify standard chunks of content by similar function and structure. Standardize HTML tags and class names used for these elements. Think in terms of basic reusable building blocks. Try to keep HTML structure and CSS naming schemes semantically-based but include plenty of “hooks” for flexible skinning options.
• Separate CSS styles into two main groups—layout and design. The layout styles are the default styles which will be applied to all skinnable pages. These set up the basic structure and should be bullet-proof. Extensive cross-browser testing is vital. The second group of styles sets the design or “skin”. These consist of fonts, font colors, background colors and images, etc. To change the skin, just create different skin CSS files and swap them out. Creating new skins can either be done by writing skin CSS code from scratch or set up a WYSIWYG system to apply different visual styles (backgrounds, borders, etc.) to the standard building blocks of your web page and generate a CSS file automatically.

When should you include an image as a background in your CSS rather than including it directly in your HTML code?

If the image is primarily for decoration then include it as a background image in your CSS.

If the image contains text such as a fancy button image, you can include a plain version of the image without text as a background in your CSS. Then Use CSS to style HTML browser-rendered text to overlay the background image. This gives the advantage of making your text easy to edit and update later if needed and can reduce the number of background images you need to make since you can use the same background with different text overlaid as needed.

If the image contains text in an unusual font such as display text or a logo that can’t be reproduced satisfactorily by a browser then you can set it as a background image and use CSS to hide and replace the text in your HTML with the image. (Never use empty tags to display text as a background image. Always include the text in your HTML as well.)

If the image represents actual content then it should be included in your HTML as an IMG tag. Examples are photos of products or people and photos or artwork images in a gallery.