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.

• Apply margins or padding to containers rather than to individual elements. This makes it easy to keep margins consistent and to easily update later if needed.
• When looking at a design, look for repeated elements and structures. Think about the most basic functions of these structures when coming up with class naming schemes.
• Look at the functions of elements from general to more specific. For example, a design may include several types of “notices” such as for errors, warnings, and success messages. The design of these notices should be the same except for colors for example. So use a general classname for the basic “notice” styles together with a second classname for the type of notice that sets the colors.
• Use basic semantic HTML tags. If you use semantic tags properly it’s not necessary to give everything a classname in order to distinguish seperate elements and your HTML documents will be more accessible and search-engine friendly.

CSS frameworks such as the 960 Grid System can be helpful in creating complex multi-column magazine-style page layouts. A major drawback of these frameworks however is that they are mainly presentation-based instead of being semantic-based. In addition they can be overkill when all you want to create is a fairly simple layout with just a few types of columns (The 960 Grid System for example is based on 12 and 16 column grids).

The Pretty Semantic CSS Framework is an attempt to address some of these issues. The Pretty CSS Framework works together hand in hand with the Pretty Semantic HTML Template. The HTML template uses HTML5-based elements such as “header”, “nav”, “section” and “footer” (div tags with class names are used for browser compatibility). It does use some column divs with presentation based names which is what makes it only “pretty” semantic. There are only a few basic column widths defined however which should work fine for most not overly-complex layouts. (Columns are based on halves, thirds and fourths.)

After using Pretty to lay out your page, you can replace the few presentation based column class names with more semantic class names that fit your content such as “sub-nav”, “main-col”, “supporting-col”, etc.

Pretty Semantic CSS

The CSS includes only the basic minimum styles needed for creating rough layouts. The page is based on a 960px width. No general CSS reset is included although some elements within the header, footer and nav have resets. The reason for not including a reset is that in my opinion they can be overkill in some instances when applied automatically to all content. For pages containing a lot of plain text content it’s often more efficient to make use of some default browser rendering of things like paragraph and header margins. Feel free to add a reset if that works best for your design.

Pretty Semantic HTML Template

The HTML template gives examples of how to use the basic class names included in the Pretty Semantic framework in order to structure your page and create the basic rough layout. Delete any parts you don’t need or re-arrange elements to suit your design. Example navigation links are placed inside their own labeled div in the template as an example. This separate nav div could be deleted and the the UL containing the class links could instead be given the “nav” class name and then moved inside the header div with new styles applied as one possible option.

Download Files

Zip of all files: http://www.kristinbradley.com/pretty-semantic-css.zip

After downloading the code you can paste it in here to test it out: http://www.webcodeshare.com

NOTE: This is just the 1.0 release of the framework. So far it’s been tested in FF3.0.16, IE6 and IE7. Please feel free to make suggestions for improvement and let me know of any bugs you find.

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.

Multiple classnames can be used to give an HTML element a more generic style in addition to a more specific one in order to make styling easier and more logical.

To organize your classnames, go from generic to more specific (just a nice way to organize classes, has no effect on how classes are applied). You must separate multiple classnames with spaces (don’t use commas).

Example:
<div class="column main-column">
     some content
</div>

You could use this to apply general styles to all your “column” elements in addition to extra more specific styles for just your “main-column” elements. (If you are sure that the element will be unique then you can just use an id in addition to the generic classname rather than giving it multiple class names.)

NOTE: The order of the class names in the HTML has no effect on how they are applied. In the case of two conflicting style rules in your stylesheet, the style that will be applied is the last one listed in your CSS following normal cascading rules.

Identifying and Styling Form Elements:

You could use multiple class names to identify all text elements as well as all text elements intended to be used to input URLs in a form. (The “text” classname is mainly for the benefit of Internet Explorer 6 which doesn’t understand CSS attribute selectors.)

<input type="type" style="text url-input">

IE6 Bug Caution

http://www.thunderguy.com/semicolon/2005/05/16/multiple-class-selectors-in-internet-explorer/

Most browsers support combining multiple CSS classes to select an element in your style sheet.

Example:
<div class="bottom pager pager-bottom"></div>

In browsers other than IE6 you could select this div with the following CSS:

.bottom.pager {margin-top: 15px;}

This doesn’t work in IE6 so you must add an extra more specific class name such as “pager-bottom” in order to select it. (Or select it in an alternate way such as by its container if applicable.)