Tuesday 07th of February 2012 05:27:46 AM

CSS Style Guide

XHTML and CSS Validation

Before publishing any XHTML page on the library’s server, you must be certain that it contains only W3C-approved tags and properly authored Style Sheets. The process of Kosherizing your XHTML and CSS is known as validation.

Free online tools

Free online tools make validation easy. Just follow these steps:

  1. Upload your page to the library’s server but do not yet link to it externally.
  2. Visit the W3C Validator (or the HTML Help Validator maintained by the Web Design Group).
  3. Type the URL of the web page you just uploaded into the forms at either of these services.
  4. Wait a few seconds while the validator examines your page.
  5. Fix any errors offline, upload the corrected page, and try again.
  6. Be sure to validate your CSS as well and correct errors (if any).
  7. When all documents validate, you may link to your page from the library’s site. (If you are unable to understand or correct your errors, see the Web Coordinator.)

Validation takes getting used to, but soon the process will become second nature. Essentially it is like receiving the consulting services of a world-class HTML and CSS expert for free.

Understanding Validator Error Messages

Note that the Validators’ error-reporting can be confusing. Sometimes an error in one part of the markup gets reported as an error further down.

For instance, if the validator is coughing on a paragraph tag, and the tag appears to be written correctly, check the markup preceding the paragraph tag. Higher up on the page, you may have forgotten to include a closing quotation mark at the end of a link, or you may have neglected to end an IMAGE tag with a a closing forward slash (/). For some reason, the Validator catches these errors, but reports them incorrectly.

One-click validation

If you tire of typing the validation service URLs, you can install free validation "bookmarklets" in your browser’s Favorites bar courtesy of David Lindquist, an independent web developer.

« XHTML Section Index | Cascading Style Sheets »

all elements

WARNING

Percentage values refer to the width of the parent element.

These propertiesoperate as you'd expect by now. For example, the following twoare in the minority.) For instance, IE4 Y/N means that the property is supported in IE4 for Windows, but not IE4 for Macintosh. The possible support values are:

Style declaration is made important, thereby raising its weight in the cascade. Important declarations override all others. In CSS1, important author styles override all reader styles, even important ones. In CSS2, this is reversed, so that important reader styles always win out over the author's styles, important or otherwise.bottom. There are two ways to accomplish this:

H1 {border-bottom-width: thick;   /* option #1 */border-style: none none solid;border-color: gray;}H1 {border-width: 0 0 thick;     /* option #2 */border-style: none none solid;border-color: gray;}

Neither is really convenient, given all the typing involved.Fortunately, a better solution is available: slid up until the edge of one of the piece's plastic touches the edge of the other's content. If the first piece of paper has half an inch of plastic along its bottom edge, and the second has a third of an inch along its top, then when they slide together, the first piece's plastic will touch the top edge of the second piece of paper. The two are now done being placed on the canvas, and the plastic attached to the pieces is overlapping.

This is also occurs where multiple margins meet, such as at the end of a list. Adding to the earlier example, let us assume the following B elements. Similar problems can arise when usingSTRONG, or any other element that would ordinarilycall for boldface text.

The solution is simple enough. Just make sure that you set anexplicit font-weight for these elements. A goodrule to include in your style sheet would be:

STRONG, B {font-weight: bolder;}

This should overcome any reluctance on Navigator 4's part.