Craft > Cascading Style Sheet Tips

Introduction

The Cascading Style Sheets (CSS) standard has evolved from level 1 (CSS1) in 1996, through CSS2 in 1998, and the CSS Mobile Profile specification in 2001. Currently CSS3 is under development. Except where noted, when you see a reference to CSS on SwansonSoftware you can assume the reference is to CSS2.

CSS2 builds on CSS1 with addition of media-specific styles that allow authors to tailor documents for rendering with handheld and other devices, and in formats such as aural, braille, and print. CSS2 adds support for downloadable fonts, table layout, content positioning capabilities beyond those available with CSS1, internationalization, etc.

Features available with the new CSS and HTML standards allow authors to create Web pages that are accessible to an audience that includes people with impairments and people who browse the Web using a device other than a pc with full-size screen.

Standards information for Cascading Style Sheets (CSS) is available free from the World Wide Web Consortium (W3C).

Using CSS

Style sheets have the job of separating content from presentation. They are supposed to help maintain a consistent look across all pages on your site, but designing and implementing stylesheets in your pages can be time consuming and frustrating. The goal of this document is to save you time and frustration - the approach is to show you what you need to know to avoid the pitfalls.

Every CSS-capable browser has a default style it applies when no stylesheet is specified. When you view an html page that uses no stylesheet and sets no style properties, the browser uses its default styles to display the page. Note that all properties have a default value. For example, if you do not set the font color property in a <DIV> tag and the property is not set anywhere in the heirarchy above, the default value will be used.

Here is a checklist you can use when you have trouble with styles.

• Make sure your reference is correct.  It should include CSS support by browser. There are lots of these on the internet although the information can be inaccurate.  The most reliable place to look for these references is World Wide Web Consortium.
• Are you using a document type declaration?  You should.   However, If your browser supports the newer standards (Netscape 6+, Opera, IE 6+) and you use one as you develop your stylesheet, your pages may not display correctly in earlier browsers that do not support the standards. Work arounds include not supporting earlier browsers, and using browser-specific stylesheets. See the example on using browser-specific stylesheets.
• If the style was working until you made a minor change.   The cause could be a bug in the browser's support for the style, or it could be that the browser supports the CSS standard so precisely that the style no longer adheres.   Examples:
  • When specifying margins in a style sheet, and you are using the 'margin-top...margin-right...margin-bottom...margin-left' nomenclature, use the same units for margin-top/margin-bottom and for margin-right/margin-left.
  • When specifying margins in a style sheet, and you are using the 'margin-top...margin-right...margin-bottom...margin-left' nomenclature, specify the properties exactly in that order: top, right, bottom, left.
• Use one of the freely available validators, e.g. at W3.org

You Can Use More Than One Stylesheet

If you use lots of styles for a site and put every style in one file, it can become difficult to manage. You can increase modularity and reuse by splitting off commonly used styles into a separate style sheet. See the example on @import for ideas.

Some Things to Watch Out For

Annotated from Jakob Nielsen's
Alertbox, July 1997

• Use linked style sheets rather than embedded styles. This makes updates to the look of your site easy. Note also that linked style sheets do not need to be downloaded for each page they are linked to - using linked style sheets can increase the download speed of your pages once the linked style sheet(s) have been downloaded.
• Use embedded styles for one-off effects sparingly. Donot bloat an external style sheet with styles that are rarely used.
• Use percentages for font size. If you use other units, the browser's Text Size menu options may not work. Using absolute units for font sizes breaks efforts to increase usability.
• Limit font types to two or three - unless you are trying to creat a ransom note effect.
• Pages must work when styles are disabled in the browser's settings.
• Try to use one style sheet for the site, not including alternates that render pages for specific devices or impairments.

Inheritance

Many style properties - particularly font properties - inherit. So not setting a font color property in a <DIV> tag will cause the text in the div to inherit that property from a tag higher up in the heirarchy.

Not all properties can be inherited. Font properties inherit (font-family, font-style, font-variant, font-weight, font-size, font), and most text properties inherit (letter-spacing, text-transform, text-align, text-indent, line-height).

For example, <DIV> and <P> tags will inherit font properties set in the <BODY> tag. If a font color is set in the <DIV> tag but not in the <BODY> tag, the <DIV> tag will inherit other font properties from the <BODY> tag but the font color will be as set in the <DIV> tag.

Note that <table> tags in IE don't inherit the font color set in a <div> tag. The <table> tag will inherit the browser's default font color property in this case.

The Cascade

The basic rule is: later styles supersede previous styles. For example, take the following:

/* sample css file, saved as styl.css */
div{
   font-size: 24pt;
   color: red;
}


<html>
<head>
   <link rel="stylesheet" type="text/css" href="styl.css">

   <style type="text/css">
      div{
         color:green;
         font-size:44pt;
      }
   <style>

</head>

<body>

<div>
Hello in green, 44pt
</div>

<div style="color:blue;">
Hello in blue, 44pt
</div>

</body>
</html>

In this example, the linked style sheet appears above the style rule in the html document, so the DIV style in the HEAD section supersedes the style in the .css file. If the .css file LINK element appeared after the STYLE element in the html document, the DIV style in the .css file would supersede the DIV style in the document. Also note that the inline style in the last DIV element sets the font color to blue, superseding both the .css file and the STYLE in the head element.

Units

Units are either absolute or relative. Always try to use relative units. If you use absolute units for font size, users will not be able to adjust text size using menu options in Internet Explorer, and it will adjust inconsistently in older versions of Netscape if you are using font tags and styles.

Relative Units

• em - Actual font size. If relative to a 36pt font, the value for 1em would be 0.5 inch.
• ex - The x-height of the font, approximately the height of the x character if the font possesses one. This is because different fonts of the same size may have different x-heights.
• px - Pixel. It is the smallest unit of resolution of the display device. Works well with computer screens but can cause problems with other mediums, e.g. a printer.
  
  Example: a font-size of 40 pixels appears as a font 0.5 inches high on a monitor with resolution 80dpi.
  
  A laser printer of 400 dpi prints the font 0.1 inches high.

Absolute Units

• in - inches
• cm - centimeters
• mm - millimeters
• pt - points. CSS2 points are 1/72 inch
• pc - picas. 1 pica is 12 points

Percentages

Percentage values are always relative to another value, and the property determines what they are relative to. Percentage values may be negative where the property allows this.

Integers

Sometimes an integer can be used:

   height="23"

CSS Selectors

Selectors are used to specify a style for an element. A CSS style rule contains the following:

selector{[property:value;]*}

There are several types of selectors, each with its own characteristic syntax.

Note on naming class selectors: Be careful how you name class selectors. Do not use underscores in the name, some browsers (e.g. Netscape 4.01) will not recognize names with underscores.

Links to More Information

Reference

Tutorials

* IE - specific

References

Cascading Style Sheets, level 2, CSS2 Specification: W3C REC-CSS2-19980512

W3.org - could rank as most improved Web site - the source for definitive references on internet technologies. When in doubt, this is the place to go for answers.

Boumphrey, Frank, 1998, Professional Style Sheets for HTML and XML: Wrox Press Ltd., 673 pages. ISBN 1-861001-65-7
Some of the information on this page is modified from this book.

Copyright © 1999-2008. All rights reserved. | Contact | About SwansonSoftware.com