Sunday 24th of September 2017 01:30:04 AM

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.

/*   assume only two faces for this example: 'Regular' and 'Bold'   */P {font-weight: 100;}   /* looks the same as 'normal' text */P SPAN {font-weight: 400;}   /* so does this */STRONG {font-weight: bolder;}   /* bolder than its parent */STRONG B {font-weight: bolder;}   /* bolder still */<P>This paragraph contains elements of increasing weight: there is an<SPAN>SPAN element which contains a <STRONG>strongly emphasizedelement, and that contains a <B>boldface element</B></STRONG></SPAN>.</P>

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:

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

8.2.2.3. More than one auto

Now let us consider the cases where two of these three properties are set to auto. If both the margins are set to auto, then they are set to equal lengths, thus centering the element within its parent, as you can see from Figure 8-14:

P {width: 100px; margin-left: auto; margin-right: auto;}
Figure 8-14

Figure 8-14. Setting an explicit width

This is the correct way to center block-level elements, as a matter of fact. text-align is supposed to apply to only

By making the W3C the keeper of the XML standard, it ensures that no one vendor should be able to cause interoperability problems to occur between systems that use the open standard. This should be reassuring to most companies making an investment in this technology, by being vendor neutral, this solution proposes to keep even small companies out of reach of big companies choosing to change the standards on them. For example, if a big company chooses to change the platform at its whim, then most other companies relying on that platform suffer. By keeping all data in XML and using XML in communications protocols, companies can maximize the lifetime of their investment in their products and solutions.

XML is language independent

By being language independent, XML bypasses the requirement to have a standard binary encoding or storage format. Language independence also fosters immense interoperability amongst heterogeneous systems. It is also good for future compatilbilty. For example, if in the future a product needs to be changed in order to deal with a new computing paradigm or network protocol, by keeping XML flowing through the system, addition of a new layer to deal with this change is feasible.

DOM and SAX are open, language-independent set of interfaces

element with a border is displayed across multiple lines:

B {border: 3px solid gray; background: silver;}
Figure 7-54

Figure 7-54. An inline element with a border displayed across multiple lines of text

In Figure 7-54, the left border is applied to thebeginning of the element, and the right border to the end of it.Borders are not necessarily applied in thisfashion; they can also be applied to the right and left side of eachline in the element, if the situation seems to demand it. Forexample, a grooved border might look better enclosed on each line

1. The left (or right) outer edge of a floated element maynot be to the left (or right) of the inner edge of its parentelement.

Straightforward enough. The furthest to the left the outer left edgeof a left-floated element may go is the inner left edge of its parentelement; similarly, the furthest right a right-floated element may gois its parent's inner right edge, as shown in Figure 8-30. (In this and subsequent figures, the circlednumbers show the position where the markup element actually appearsin relation to the source, and the numbered box shows the position If you're completely tiling GIF, JPEG, or other opaque image types, this doesn't really make a difference, since they'll fill up the document background, leaving nowhere for the color to "peek through," so to speak. However, image formats with an alpha channel, such as PNG, can be partially or wholly transparent, and this will cause the image to be combined with the background color. In addition, if the image fails to load for some reason, the user agent will use the background color specified in place of the image. Consider how the "starry paragraph" example would look if the background image failed to