Monday 22nd of May 2017 09:25:57 PM

CSS Style Guide

XHTML: Guidelines

All developers are familiar with HTML, the web’s original markup language. But the W3C currently recommends using XHTML instead. This hybrid language looks and works much like HTML but is based on XML, the web’s “super” markup language.

The Library has standardized on XHTML 1.0 Transitional, a version of XHTML that works well in both old and new browsers, and that accommodates the needs of older browsers (such as Netscape Navigator 4 and Internet Explorer 4) that are used by a significant portion of the NYPL audience.

Rules of XHTML

Converting from traditional HTML to XHTML 1.0 Transitional is easy, as long as you work carefully and observe the following rules:

1. Open with the proper DOCTYPE & Namespace

XHTML documents must begin with tags that tell the browser how to interpret them. All library web pages must begin with the following DOCTYPE declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

The declaration above should be typed (or cut and pasted) into the very top of every XHTML document, before any other code or markup. View Source on this page to familiarize yourself with the proper placement of this DOCTYPE.

The XHTML 1.0 Transitional DOCTYPE must be followed by this XHTML namespace declaration:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Once again, View Source to familiarize yourself with the proper placement of the namespace declaration.

Note: many XHTML pages begin with an optional XML prologue (<?xml>) that precedes the DOCTYPE and namespace declarations. Unfortunately, this XML prologue causes problems in many browsers and must be omitted from NYPL web pages.

One of the main purposes of the prologue is to specify character encoding within your document. If you’re working on an international site and your page will include non–ASCII characters, you can probably get by with a simple meta tag such as:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
2. Write all tags in lowercase

Unlike HTML, XML is case–sensitive. All XHTML tags and attributes must be typed in lowercase, or your document will not validate. (Validation ensures that your pages are error-free. See the section on validation if you are unfamiliar with this subject.)

In order to "translate" an older document to XHTML, the following markup ...

<TITLE>New York Public Library</TITLE>

... would be recast thusly:

<title>New York Public Library</title>

Likewise, <P> becomes <p>, <BODY> becomes <body>, and so on.

3. Quote all attribute values

In HTML, you needn’t put quotation marks around attribute values. In XHTML, they must be quoted, e.g., height="55", not height=55.

4. Close all tags

In HTML, you have the option to open many tags such as <p> and <li> without closing them:

<p>This would be invalid XHTML.
<p>I forgot to close my Paragraph tags!

In XHTML, every tag that opens must close:

<p>This is valid XHTML.</p>
<p>I close my tags after opening them.</p>
5. Close “empty” tags, too

In XHTML, even “empty” tags such as <br> and <img> must close themselves by including a forward slash /> at the very end of the tag:

<br />
<img src="library.gif" />

Note the slash /> at the very end. Note also that a single blank space precedes the slash to avoid confusing older browsers that were released prior to the XHTML standard.

Important: To remain valid and accessible, the image tag in the second example would also have to include an “alt” attribute, and an optional “title” attribute wouldn’t hurt:

H3 {font-size: 36pt;}

Values

xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | <length> | <percentage>

oblique, or normal text. Italic text is generally a defined font face within the font itself, whereas oblique text is less often so. In the latter case, the user agent can compute a slanted font face.

Example

EM {font-style: oblique;}
<img src="library.gif" alt="New York Public Library" title="A view of the main Library at 42nd Street and Fifth Avenue, Manhattan." />
« XHTML Section Index | XHTML Benefits »

Navigator 4 has the most trouble getting it right, but its failuresare not consistent. The best minds in CSS analysis have yet to comeup with a recipe for predicting Navigator's behavior,unfortunately.

WARNING

Something else to watch out for is Navigator 4's handling ofvalues for color that it doesn't recognize.If Navigator 4 encounters an unknown word (such asinvalidValue) somehow, through mechanisms knownFigure 5-30. This is obviously not an ideal solution, but it is permitted.

H1 {font-variant: small-caps;}
Figure 5-30

Figure 5-30. Legal, if not optimal, rendering of small caps

WARNING

Of the browsers which even recognize font-variant: small-caps (Explorer 4 and 5, and Opera 3.5), only Opera and IE5 for Macintosh do what authors would expect in the display of the text. Other versions of Explorer take the all-capitals

Example

TD {white-space: nowrap;}TT {white-space: pre;}
widthIE4 P/Y IE5 P/Y NN4 P/P Op3 Q/-

Used to setthe width of an element. This is most often applied to images, butcan be used on any block-level or replaced element. Negative valuesare not permitted.

Example

word-spacingIE4 N/Y IE5 N/Y NN4 N/N Op3 Y/-

Used to set the amount of whitespace thick is always wider thanmedium , which is in turn always wider thanthin.

However, the exact widths are not defined, so one user agent couldset them to be equivalent to 5px ,3px , and 2px , while anothersets them to be 3px , 2px , and1px . Whatever width the user agent uses for eachkeyword, it will be the same throughout the document, regardless of

Now we have the sidebar enclosed in its very own classed table cell.Since the background color for the sidebar is green, we can createour first style:

.sidebar {background: green;}

Moving on with the sidebar, we want to get rid of all theFONT tags, and hopefully the other style tags aswell (like <B> and<U>). Since the entirety of the sidebar usesthe font Verdana, we can add that to our style sheet: