XHTML and Stylesheets

Briefly...

The web is changing. The web is actually changing everyday; different languages, algorithms, concepts, and ideas. It seemed as if, after learning HTML, I started hearing rumors of XHTML.

Introduction to XHTML

XHTML (eXtensible Hypertext Markup Language) is the redefinition in XML of HTML defined in SGML. XHTML1.0 became a W3C Recommendation on January 26th, 2000 as the redefinition of HTML 4.0/4.01. XHTML has a high affinity with both HTML and XML, and is expected to be the description language of Web contents that can be processed by XML-compliant tools. XHTML 1.1 became a W3C Recommendation on May 31st, 2001. In addition, XHTML Basic became a W3C Recommendation as a subset of XHTML for mobile devices. As of right now, there is a working draft of XHTML 2.0. The new version will include Ruby support and a few other very important new modules that, yet again, make the web more dynamic and well-formed.

The Ten Commandments of XHTML

XHTML, as with anything and everything else in life, has rules. If there weren't any rules, where would the web be? (That's a whole other topic) So there are ten basic rules, as set out by the W3C (yeah those guys), for an XHTML document; also known as, the ten commandments of XML:

XHTML/XML shall be straightforwardly usable over the Internet.
XHTML/XML shall support a wide variety of applications.
XHTML/XML shall be compatible with SGML.
It shall be easy to write programs which process XHTML/XML documents.
The number of optional features in XHTML/XML is to be kept to the absolute minimum, ideally zero.
XHTML/XML documents should be human-legible and reasonably clear.
The XHTML/XML design should be prepared quickly.
The design of XHTML/XML shall be formal and concise.
XHTML/XML documents shall be easy to create.
Terseness in XHTML/XML markup is of minimal importance.

These guidelines must be followed to create a well-formed, validated XHTML document.

Basics You MUST Know

In an XHTML document, there are a few things that must be a "standard". These are the rules that must be followed to correctly validate an XHTML document.

XHTML elements must be properly nested
XHTML documents must be well-formed
Tag names must be in lowercase
All XHTML elements must be closed

Properly nested elements mean that you can't improperly nest within each other like this:

This is bold, italic text

Which should actually be this to be properly nested:

This is bold, italic text
Well-formed documents are a must, and at the same time, can help you maintain a very good structure for not only XHTML, but programming too.

XHTML elements must be nested within the <html> root element. While the other elements can have child elements. Child elements must be in pairs and correctly nested within their parent element:

<div>
This is a paragraph!
The turkey ran away from the butcher
</div>
Lowercase is a MUST !!! A lot of people, as I have seen, like to capitalize HTML code; this is a no-no in XHTML:

<A HREF="page.html">Link Here!</A>

Now with XHTML you must have all code in lowercase, like so:

<a href="page.html">Link Here!</a>
All tags must be closed. Yes, even empty tags. Empty tags are the tags that, in HTML 4.0/4.01, that weren't required to be closed; break tag, horizontal rule tag, etc:


This is a paragraph! 
And I have some text right below it!

In XHTML, you would find this code written as:


This is a paragraph! 
And I have some text right below it!

You must follow at least those four basic steps of XHTML in order to correctly validate you XHTML code.

XHTML...XML??
Anyone confused of where XML comes into the picture? Have you heard of XML and XHTML having something in common? Well, partly they do, and partly they don't. HUH?

Let's get to the point. XHT ML is a markup language written in XML; therefore, it is an XML application. So XML is a part of XHTML; that's why you must have complete, well-formed documents that validate entirely in order to call your document XHTML. The "Ten Commandments of XHTML" are the same as XML. The rules go hand in hand. So, a quick, non-technical description of XHTML is: XHTML is a hybrid between HTML and XML.

XHTML uses three XML namespaces (used to qualify element and attributes names by associating them with namespaces identified by URI references. Namespaces prevent identically custom-named tags that may be used in different XML documents from being read the same way), which is like the three HTML 4.0 DTDs: Strict, Transitional, and Frameset.

Document Type Definition (DTD): Schema specification method for SGML and XML documents. DTDs are either contained in the document or belong to its external subset and are then referenced from within the document's document type declaration per URI. Known DTDs are e.g. DocBook, CML, IBTWSH, and HTML. dtd2html generates HTML documentation for SGML DTDs. For XML, DTDs will be replaced by the new XML Schema specification method.

XHTML markup must conform to the markup standards defined in a HTML DTD. When applied to Net devices, XHTML must go through a modularization process. This enables XHTML pages to be read by many different platforms.

Style Sheets, You're My Hero!
A stylesheet is often used in association with structural markup to apply visual formatting to a document. This means that the content of a document, or a collection of documents, can be separated from the presentation. This has a number of advantages. It means that the author does not have to repeat similar presentational information for every instance of a given feature, such as a book title, in every document. It also means that the document can be output in a different format altogether. This can be especially useful when producing material that is accessible to those for whom display on a screen is not useful, such as blind or partially sighted people. A style sheet could be used to generate a Braille or audio version of a document. Equally, the style sheet might simply add color or size characteristics to text for display. Finally, it could control the order and selection of elements to be displayed, such as is commonly done with XSLT and CSS (Cascading Style Sheets).

Since we are covering XHTML, we will talk more about CSS. CSS separates content (XHTML) from presentation (CSS), meaning you can change the whole appearance of the website (or set of documents) with a simple change in the CSS document.

As with this article, I do not discuss what a stylesheet consists of, that can be covered in a tutorial later on.

The Stylesheet
The stylesheet (styles.css) is what we will be using to separate the presentation from the content. The examples I will list will be useful for a web-based project and will go into detail what they output, and why you would do it this way.

A stylesheet consists of a selector, property names, and values; what is, when put together, is called a statement (See figure 1).

Figure 1 Source from WestCIV (copyright to WestCIV)

Great Examples, Make Great People
Okay, here come the examples of how to code a stylesheet. I stylesheet is fairly easy to read and follow. There is really not that much logic in it, like PHP and other programming languages. When I say logic, I mean you don't really have to think about it; it comes quite natural, but you DO have to think about it.

Say you want your whole site to have a default font of verdana with a size of 12 pixels, and a color of black. You also want your default background color to be white and the margins to be set to the top left-hand corner of the page so that your site is more formal. The code would be:

.body {
font-family: Verdana, "Minion Web", Helvetica, sans-serif;
font-size: 12px;
font-color: #000000;
background-color: #ffffff;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

This code does everything stated at the top, but the reason it does all this is because it states, unless overwritten by a different rule, that any content in the <body> tag will have the font set at verdana with a text size of 12 pixels and black font color. Margins will be set at 0 pixels, and the background is white.

Another example would be how to format a paragraph to have a set font, font size, font color and padding:

p {
font-family: Verdana, "Minion Web", Helvetica, sans-serif;
font-size: 12px;
font-color: #000000;
padding: 7px;
}

Simply, this set of code assigns the font verdana with a 12 pixel font size being the color black and padding of 7 pixels to each paragraph tag. This means that everytime a paragraph tag is opened, this style will take effect.

Hold My Hand Comments
Comments, comments, comments. No no, not me. I mean your CSS comments. When you write CSS code, and base your website off of separating content from presentation, your style sheets are going to usually be larger than you XHTML code. Commenting you CSS code is critical for updating a certain style and troubleshooting browser bugs. CSS uses C# style comments.

A regular comment:

// This is a regular CSS comment.

A block style CSS comments:

/* This is a block style CSS
Comment. Anything in this comments will not
be outputted by the browser.
*/

A 'Prettier' block style CSS comment:

/*
=================================================
Wanna get cute with a CSS comment? Well you can |
By adding other special characters to make your |
Comments stand out a lot better. Try using and |
Equals sign or something. |
=================================================
*/

Remember, comments are you friend. USE THEM. If you don't use comments, you will trulyregret it.

Conclusion

Although web standards change daily, as with new technology, separating XHTML from CSS is a major step by far the best thing you could do. Better standards and better results keep more users happy. Still many people are coding in HTML 4.01, but have noticed a lot of people are going the XHTML route. CSS becomes XHTML's arsenal and betters the outlook in the web era to a better, well-formed internet.

XHTML vs. HTML
A quick introduction to XHTML
Why You Shouldn't Be Using XHTML
A lot of people these days are using XHTML. Why? Do they actually need it or are they just following a trend?
What is XHTML?
We have all heard of HTML. HTML stands for Hypertext Markup Language. What is a hypertext markup language, you ask? It is a language for specifying how certain text should appear. When you design a web page, you want certain content or text to be displayed in a specific way.
Cascading Stylesheets Advantages
If you think that CSS is something to be ignored then think again. This interesting article will show you all the advantages of CSS and will explain how it can help you.
Comprehensive Guide to Xhtml
Since some time, the internet has been relying on HTML... or Hyper Text Markup Language... Since its been invented, many tries to replace it have been thought up, but none as successfull as XHTML (eXtensive Hyper Text Markup Language)... lets say that its HTML cleaned up...
Cascading Stylesheets Advantages: 5 Reasons To Use CSS
If you are not quite sold on why you should start using CSS then take a look at this interesting article. It might be all you need to convince you that it is time to try something new.
Cascading Stylesheets Advantages: 5 Reasons To Use CSS
Because you are able to create a separate Stylesheet and link it to all your webdocuments, you have great control over how your website looks. So if you want to change a certain aspect of your page, you only need to alter one file: your Stylesheet!
Code Validation & Compliancy - The New Beginning XHTML
Code validation is still widely debated as to whether it is required for performance within the search engines. It is only a guess that the search engines dont utilise it within their algorithm, but nobody is actually 100% sure on that fact...
XHTML bridges the gulf between HTML and XML
Bringing XML to todays HTML-based Web, XHTML justifies the breakthrough label. It will rise slowly but surely. If you take any interest in Web technology, youll have come across references to...
XHTML and Stylesheets
Want to build website content that can be processed by XML-compliant tools? If you answered yes, then its time to learn the rules governing XHTML.