CSS Web Design

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.)

Coding Your HTML

When starting to code a new web page, before cutting up images think of the basic content of the page apart from the visual design. This means the basic text content as well as any images or other elements which are actual content instead of just decoration. Start coding by adding all this content to your HTML page and then marking it up with simple basic semantic HTML tags such h1 through h6 tags for headers, p tags for most other ordinary text, ul for unordered lists, ol for ordered lists, etc. After you are done with this step your content should look organized and readable when viewed in a web browser even before you’ve added any CSS styles.

The next step is to look at the content in terms of related chunks of information thinking partly of how it will work with the structure of the visual design. Use div tags with semantic classnames or IDs to group and divide content into different sections such as “header”, “main-nav”, “sub-nav”, “main-content”, “footer”, etc.

Add any extra div or span tags needed to recreate fine details of the visual design such rounded corners. Use as few of these as necessary and try to use them in a semantic manner if possible. Use existing semantic tags for styling without adding extra markup simply for the design if you can. Also think in terms of creating standard reusable elements that can be used throughout the site rather than creating elements that will only be used once. Don’t give everything a classname. Style elements instead by selecting them by their semantic tags or by the div they reside within whenever possible.

Coding Your CSS

Code your CSS together with each step of coding your HTML. During the first step add background colors and add basic text styles such as fonts. For the second step you can code the rough layout of your different sections as well as adding more background colors and/or images. Finally add in all the remaining fine details to recreate the finished design. (This assumes you are working from a design mockup created before you started writing any code.)

Semantic Coding Summarized

1. Add content to HTML and mark up with basic semantic tags.
2. Use div tags with semantic class names / IDs to group together chunks of related content.
3. Add any extra divs or spans needed for the visual design details (as few as possible).

Summary of Web Image Types and Appropriate Uses:
(adapted in part from http://yuiblog.com/blog/2008/11/04/imageopt-2/)

• JPG is the format for photos and full color images with lots of gradients. (jpg file sizes are smaller than PNG24)
• GIF is the format for animations.
• PNG8 is the format for everything else — icons, buttons, backgrounds, etc. (size usually smaller than GIF, supports alpha transparency, Fireworks can output variable transparency)
• PNG24 is the format for true color images with transparency (largest file sizes, requires filter hack for IE6)

PNG8 = 256 indexed color PNGs. Newer versions of Photoshop (CS3) can output these using “Save for web”. Supports alpha transparency just like GIFs but generally results in smaller file sizes than GIFs. Fireworks can output PNG8 with variable transparency which degrades nicely to 100% transparency in IE6, useful for transparent rounded corners for example.

One slight problem with PNGs is they use gamma correction which can cause problems when colors in a PNG image need to match background colors (so colors will be slightly off in the PNG). This can be solved by using a program like pngcrush to strip the gamma chunk from the image (which reduces file size a bit more as well).

NOTE: When saving images from Photoshop always use “save for web”; results in greatly reduced file sizes than just saving normally.

EXTRA NOTE: Saving JPGs as progressive reduces file sizes further in 94% of cases for files over 10k (for under 10k baseline JPGs are generally smaller)

Have you ever needed to make an embed into a link (such as linking a small preview video to the full video)? An unfortunate bug seems to make this impossible in IE6.

After searching for a solution online and failing to find anything I did some more experimenting on my own and finally discovered a simple solution.

Just add a transparent GIF background image to your link and suddenly it will become clickable in IE.

Example HTML:

<a href="full-video.html" class="video-link"><embed src=""></embed></a>

Example CSS:

.video-link
{background: url(one-pixel-transparent.gif);}