I’ve been preparing to write a series on this subject for a long time, but I kept putting it off. Even though there are numerous websites out there with information on how to build a CSS website, I believe it’s important to still write this series for a number of reasons:

• This will be my own content. It’s good to read the same thing in a different context.
• There are still too few places where you can get this information presented in tutorial form, from introduction to advanced techniques.
• This series can be used as reference for beginning web designers who want to work from scratch in order to learn more about how it all works.

XHTML

XHTML is short for eXtensible Hypertext Markup Language, which is actually a variation of HTML, which is combined with XML. XHTML is supposed to help to ensure that content is displayed properly on every device that accesses the Internet. XHTML therefore has a stricter set of rules than regular HTML to create cleaner web content.

Accessibility for people with impairments has played an important role in the development of a language to give everyone the same access to information. Thus, for instance, the old bold tag <b> is replaced with <strong> and <i> is replaced by <em> (emphasis) since these tags are better processed on screen readers used by visually impaired people.

Also, tags that are not paired with a closing tag, like with <strong></strong>, are now supposed to end with a space and a forward slash before the closing >. <br /> is a very much used example of such.

XHTML versions
XHTML 1.0 came with 3 (what I, for ease of understanding, would call) “sub-versions”:

• Transitional - This subversion is allowing the use of a number of old HTML elements and attributes, that are judged presentational, in combination with the XHTML rules, to help ease the transition.
• Frameset - This allows the creation of HTML frame sets within XHTML
• Strict - This uses the strict set of XHTML rules as opposed to the “old” HTML rules.

XHTML 1.1 (also referred to as Module Based XHTML) is actually an updated version of XHTML 1.0 Strict. All elements that had something to do with the look of a website were removed from this version.

Please note that your website may display normally when don’t “abide by these rule sets”, but some user agents (programs on the user’s end that translate (X)HTML into the website you see) may have trouble displaying the content correctly. If you want your website to be displayed without problems on any web-accessing device, you may want to stick to the rules.

Cascading Style Sheets (CSS)

CSS (commonly referred to as stylesheets can simply be defined as documents, containing information, which is used to style web documents. In other words, stylesheets are responsible for the look and feel of web content. These “styling rules” are widely accepted as standards.

Stylesheet use normal, understandable English words in their syntax. The biggest problem right now with stylesheets is that Internet Explorer is, what we call “non-standard-compliant”. So styles that would work in any other browser may produce a different effect in IE.

XHTML + CSS

The whole idea of these 2 is to separate the design of a website from the actual code that produces the website. XHTML is responsible for the content, and CSS is responsible for how the content is presented.

This way, your content is displayed properly on any device, even if that device is not equipped to process stylesheets. In any case, the content of the website will be displayed.

What’s next?

Now we took a brief look behind the scenes, we’ll be able to understand the next part of this series a bit easier.

Next time, we’ll start with a simple website, which we will use as a base for the rest of the series.

Excellent reading material

http://en.wikipedia.org/wiki/XHTML_2.0
http://en.wikipedia.org/wiki/Cascading_Style_Sheets