Style Sheets: Tips to Better Designs
Key Reasons for Developing and Using Style Sheets
- provide you with external control of how your pages will be presented (thereby separating content and design)
- provide for better accessibility to your content (allowing the user the ability to turn off or reformat your content in a manner in which they can better use your information, a key issue with accessibility web sites)
This page contains tips to help you design better style sheets that result in a more consistent presentation of your content. The information here is noted for specific implications between Netscape Navigator (NN) and Internet Explorer (IE).
First, take a look at the style sheet that we currently use for these tutorials. Then look through the explanations below which detail why the style sheet is written this way.
List All TAG Elements Separately
Any tag that you intend to use on your pages must be have its own definition. While body {...} is supposed to work on all undefined tags, it does not work with NN. (ex.: anything contained inside of a table will not inherit the attributes of the body of the page.)
One way around this bug is to use the wildcard character, the asterisk (*), to define any and all tags with a default.
Do not combine elements by comma separating them like so many web sites and programs suggest. (example: p,br,li {color:#000000;}) If you do, visitors using NN will not be presented with your full design. NN applies the definition only to the first occurrence in the list, the rest are ignored.
Do not use sequential tag configurations having requirements of a particular nesting order. (example: p b {color:#cc0000;} which is supposed to change the color of any bold tag that is within a paragraph tag.) Again, NN does not support this convention and only looks at the first occurrence in the list. You should only use such methods when you are looking to provide an enhancement in presentation, rather a dependency.
Font family:
If you define a font family, be sure to define one of the five defaults as a back up to the desired one. (i.e.: serif, sans-serif, cursive, fantasy, and monospace keeping in mind these fonts are selected by the browser, and may be internal to that browser, for a closest match.) example:
* {font-family:'Arial','Helvetica',sans-serif;}
By using the asterisk wild card method for this font definition, the font style gets applied to any and all tags and thereby giving the document a default font style of your choice.
If you do not provide alternatives the browser will select a font which it thinks closely represents your choice. That choice could be wingdings or bullets. (We've experienced this one ourselves.)
Font size:
The best approach is to define all of your fonts in relation to a norm [i.e.: bigger, smaller, x-large, x-small, or relatively in percentage].
Use a relational sizing for text with a percentage [i.e.: 100% is the default font size]. Be aware that applying a percentage size to a header tag can cause problems in IE.
AVOID the use of point (pt) or the printer's (em) size for fonts. Use pixel (px) sized fonts sparingly and with caution as these can become fixed in size and cannot be adjusted, causing an accessibility issue. A font's point size varies physically between systems and is noticeably smaller when displayed on a Mac. The pixel size of a font is more consistent but a particular systems ability to render a font at that pixel size may be less than adequate. Another problem with point and pixel sized fonts is that the fonts may become fixed at this size with some browsers [i.e.: IE]. In contrast a font defined with as (em) will experience extreme size changes with IE. This prevents the visitor from adjusting the page for readability and is therefore less accessible to people with vision impairments.
Color:
When you define a font color it is advisable, where ever possible, to define a background color. However, it is better to not define the background color at all than to define it as an 'inherit' or 'transparent' color. Some browser versions will unpredictably inherit a background color from other parts of the page (not what you intended). Also, in defining a transparent background, at least with one version of NN, it will always result in a black background color, meaning the selection is void of all color. Remember to design your color schemes around the 216 color browser safe palette. You will get a more consistent result when your page is viewed on various systems.
Ensure that information conveyed with color is also available without color. If you disable underlines on links, and have links and text of the same apparent color intensity, how are the color blind going to know where to click? The same issue applies to images. Try a 'black & white' test by printing a template page which contains all of the design elements of your web site. Is all of your information still conveyed clearly in this format?
Background colors:
When you define a background color for an element of the page, remember that the color is not always rendered in a 'block' format with all tags and all browsers. NN will render paragraph tag with the background color only behind the actual characters when a border is undefined (the footer of the next page example) or is defined as zero (the first paragraph of the next page example).
Any border width defined to a paragraph, other than zero, will render the paragraphs background color in a 'block.' Another thing to consider is that the border will always have some separation form the block you are bordering with NN, but IE allows the border to be flush against the defined block.
Defining columns in CSS:
It is possible to define columns in a web page without using tables. A method of doing this is exampled in the links provided at the bottom of this page. This method would have to be implemented with care, but it can make your pages better meet the W3C Web Accessibility Guidelines.
The Columns Example with CSS illustrates the implementation of columns with style sheets. The Columns Example without CSS illustrates what the same page would look like if your browser did not support style sheets. The pages are identical in structure and content except for the title and the provision of style sheet information.
