Monday 22nd of January 2018 11:19:50 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.

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>

Note that the boldface element in this case is positioned in relationto its parent element's content box, which defines itscontaining block. Without the relative positioning of the parentelement, the containing block would be another element. Consider acase where the element being positioned is a child of theBODY element, e.g., a paragraph or headingelement. With the right styles, the containing block for thepositioned element will be the entire BODYelement. Thus, applying the following styles to the

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

By defining a set of programming language independent interfaces that allow the accessing and mutation of XML documents, the W3C made it easier for programmers to deal with XML. Not only does XML address the need for a standard information encoding and storage format, it also allows programmers a standard way to use that information. SAX is a very low level API, but it is more than what has been available before it. DOM is a higher level API that even provides a default object model for all XML documents (saving time in creating one from scratch if you are using data is document data).

SAX, DOM and XML are very developer friendly because developers are going to decide whether this technology will be adopted by the majority and become a successful effort towards the goal of interoperable, platform, and device independent computing.

XML is web enabled

XML is derived from SGML, and so was HTML. So in essence, the current infrastructure available today to deal with HTML content can be re-used to work with XML. This is a very big advantage towards delivering XML content using the software and networking infrastructure already in place today. This should be a big plus in considering XML for use in any of your projects, because XML naturally lends itself to being used over the web.

holds links to the main pages of your site -- it's easy tostyle them without having to change the HTML markup on each page.

Let's assume we have a table of links like this one:

<TABLE BORDER CELLPADDING="4"><TR><TD><A HREF="home.html">Home Page</A></TD><TD><A HREF="read.html">My Writing</A></TD><TD><A HREF="fun.html">Fun Stuff!</A></TD><TD><A HREF="links.html">Other Links</A></TD>

And what is the format of an external style sheet? It's simply a list of rules, just like those we saw in the previous section and in the example above, but in this case, the rules are saved into their own file. Just remember that no HTML or any other markup language can be included in the style sheet -- only style rules. Here's the markup of an external style sheet:

H1 {color: red;}
H2 {color: maroon; background: white;}
H3 {color: white; background: black; font: medium Helvetica;}

The answer is that the browser takes each digit and replicates it.Therefore, #F00 would be equivalent to#FF0000 -- and it's as simple as that.Otherwise, this method is the same as the #RRGGBBmethod we just discussed, only shorter. #6FA wouldbe the same as #66FFAA, and#FFF would come out #FFFFFF,which is the same as white. This approach issometimes called shorthand hex