Monday 22nd of January 2018 11:20:19 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. an element is set to be justified, then the spaces between letters and words may be altered to permit full justification, which may in turn alter the spacing declared by the author with word-spacing or letter-spacing. The CSS specification does not specify how the spacing should be calculated in such a case, so user agents are free to do whatever their programmers thought best.

    Furthermore, as usual, the computed value of an element is inherited by any child elements. Unlike line-height, there

  8. 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 »


The situation can become markedly different if we change the vertical alignment of the inline boxes. Suppose that we change the boldface text to have a vertical alignment of middle. This would have the result shown in Figure 8-53.

Figure 8-53

Figure 8-53. Changing the vertical alignment of the larger text

Here, the middle of the boldfaced text's inline box has lined up with the middle of the inline boxes of the other text in the line.

top: 10%; bottom: 20%; left: 50%; right: 10%;

Thus the height is 70%, and the width 40% of the containing block's height and width. That's fine as far as it goes -- but what happens if the containing block is only 50 pixels tall by 200 pixels wide? That gives you an element only 35 pixels wide by 80 pixels tall. That doesn't leave much room to show the content, but if you use auto for the width or height, the element might fill its entire containing block, obscuring the containing block's contents.

11.1.1. Case 1: Consistent Look and Feel

In this project, we will create an external style sheet that will define a basic, consistent look and feel for an entire corporate web site. Our main goal is to create styles that are as simple as possible, using few (if any) classes or IDs. For the purposes of the project, we will assume there is a standard writing guide for employees of the company: document titles

BODY {color: red;}TABLE {color: black;}

That's because the combination of your style, and thebrowser's built-in styles looks like Figure 6-10.

Figure 6-10

Figure 6-10. The result of combining author styles and browser styles

Since there is a color value defined by thebrowser for TABLE elements, it will takeprecedence over the inherited value. This is annoying andunnecessary, but it is an obstacle to be overcome. You can overcome