Okay, so you read that separating the content (XHTML) from the presentation (CSS) can save you lot’s of time. But how do you turn that theory into practice? How do I avoid having to open my XHTML files when I want to change the design? The answer is actually a lot simpler than many may think. If you want continuity in your design, your content, the XHTML, will need continuity as well. The XHTML forms the framework to which you attach the styling and the layout. Most web pages are made up of several parts; a heading, main content, navigation links, and a footer. You could compare it to a woman and how she dresses herself. The XHTML is the woman itself and the make-up, clothes, accessories, and shoes are the CSS. The navigational links would fall in the category accessories because they don’t have a fixed place in the XHTML. Sometimes they’re placed between the heading and the main content but it’s becoming more common to place them between the main content and the footer or completely at the end. You’ll want place each of these parts inside <div> tags giving them each a unique "id" as shown in the example.

Example

This will make it possible to format the same elements differently within each <div> tag. To get more control over the page as a whole we place all these <div>’s within a container div so that the XHTML looks somewhat like this:

XHTML

The CSS attached to the XHTML could look something like this.

CSS

The in’s  and out’s on how it’s done this way is covered on other posts

I remember way back in 1995 we got our first Internet connection. I visited the web with Netscape 1.0 or Internet Explorer 2.0. Most websites had a white background with black text. Sometimes I was lucky and the site had an image on it with 256 colors. That is if I had the load images option enabled in my browser. I would type the address of the site and wait for five to ten minutes for the page to load over the mega fast 33.6k modem. A lot has changed since then.

History

When HTML was first written it was designed for scientist to share their research papers. It was a simple language to markup or to define the text. What is this sentence? Is it a header, a quote, part of a paragraph? Nothing was aimed at design. They just needed a way to share information. Once the World Wide Web was discovered as a commercial platform, there came a need to make websites attractive. People wanted more than just black text on a white background and a funny animated GIF. So the different HTML tags started being used for what they looked like in a browser instead of what meaning they had. Tables were used for layout, to create columns or position graphics. If you wanted an indented block of text you used <blockquote>. The meanings of the tags were lost, only their presentational value remained. Since HTML was never intended for this use, many shortcomings quickly became apparent. There emerged a need for a language that contained the design, allowing HTML to return to its original purpose of defining the content, a language that would give designers the freedom of letting the design flow in layers over the page, a sheet that would let the style cascade over the HTML. Cascading Style Sheets or CSS was the answer.

CSS power

CSS provides the designer with the power to define the look, feel and behavior of every HTML element. Every HTML tag can not only be styled differently but different styles can be defined for the same tag depending on their ID, class or HTML element they are embedded in. But you can take it a step further. When you keep the CSS styles in an external style sheet it gives you the ability to link the styles to all the HTML files creating a continuity of style across all of the sites pages. The true benefit of working with external style sheets becomes obvious when a change in design is needed. For example: You have a website with fifty pages. Each page has on average ten paragraphs. If you decide you want to use the Arial font instead of the Times New Romans font for your paragraphs and the font type of your paragraphs is specified with the tag <font face="Times New Roman, Times, serif"> in HTML, you would have to change the tag to <font face="Arial, Helvetica, sans-serif"> on each of the ten paragraphs in all fifty pages. That’s five hundred tags you have to change. If you had styled the paragraphs in an external style sheet, all you would have to do is open the style sheet and change p { font-family: "Times New Roman", Times, serif; } into p { font-family: Arial, Helvetica, sans-serif; }. Yes that’s right just one tag in one place, that’s all.

Why not?

It is clearly obvious that separating the style from the content is by far the more practical and time saving technique of designing websites. So why not do it this way? Why are there still so many beginner HTML courses that teach you the old way first? Why are there still so many corporate websites out there that still use tables for layout? Why aren’t they separating the content and the presentation? Why not?

C$$

The time you save by following the W3C commendations, even if you have to redo the lot, is better than money in your pocket. It can put an end to miserable tedious and repetitive coding, save those countless hours checking the continuity in design across the different pages of your site, and lay to rest those frustrations caused by collapsing tables that you’re using for the layout. Once you realize to which degree this separation will stimulate your creativity and how many doors to new designs it opens, you’ll never code a page in any other way.

So what is a DOCTYPE and what is it good for? What does the DOCTYPE do anyway?

There is not just one type of HTML, there are actually many: HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict, and many more. All these types of HTML are defined in their respective W3C specifications, but they are also defined in a machine-readable language specifying the legal structure, elements and attributes of a type of HTML. Such a definition is called a “Document Type Definition”, or, for short, DTD.
~ Olivier Thereaux

This is used to let the browser know what version of HTML you are using. If you don’t use it, or if you get it wrong, the browser will assume you don’t know what you’re doing and switch to ‘quirks mode’, which will not render things as they should be. Apparently it’s more ‘forgiving’ but it actually seems to be quite random and confusing. The case must be like that in the example below (with upper case ‘DOCTYPE’). It does not close like other tags.
~ Patrick Griffiths - HTML Dog

Example

Do note that the DTD greatly influences how you need to formulate your code that follows it. Some DTD’s require extra tags in your document. To make it easy for you, here’s a list.

HTML

HTML 4.01 Transitional

HTML 4.01 Strict

HTML 4.01 Frameset

XHTML

XHTML 1.0 Transitional

XHTML 1.0 Strict

XHTML 1.0 Frameset

XHTML 1.1

The World Wide Web Consortium (W3C) develops the standards that govern the internet. Unfortunately some companies do not follow and implement all standards and guidelines in their software. It probably won’t come as a surprise when I tell you that I think Microsoft is one of these companies. All versions of MS Internet Explorer up to, and including version 6 have major support issues with CSS2. The new IE7 is a major improvement but still interprets some of the CSS code in a different way than most other browsers. Microsoft has also written their own non-standardized code that can only be rendered in Internet Explorer. When creating a website with MS Frontpage, quite a few features will use this code without any notification that it isn’t supported by any other browsers than IE.

It is my opinion that Firefox is the browser that is best implemented conform the W3C standards. It will therefore be the reference browser for this website. It would be foolish to ignore IE users however I will not go through great lengths of effort to optimize it for IE6. It is not reasonable to expect webmasters to be mindful of previous versions of IE when the author, Microsoft, no longer provides any support on these products. Browsers are downloadable for free. Windows XP Automatic Update will upgrade to IE7, and Vista has IE7 preinstalled. At the time of this writing, more than half of the IE6 users have already upgraded to IE7. Naturally If most of your visitors are from countries where most users are still running Windows 98 with IE5, you must make sure it is presentable and accessible to these people. Remember, the visitor is king.