TinySigns

Cascading Style Sheets (CSS) tries to attain a complete separation of content from how the content would look like (presentation), while XHTML is aimed towards providing meaning to the document content – a semantic markup.

You may have been used to old-school web development (Tiny Signs old style), wherein you use tables as layout grids to align areas of the HTML page, using one-pixel transparent GIF images to separate elements or specify typeface with <font> tag on each HTML page. This would all change with an introduction to CSS and XHTML.

Advantages of CSS

Separating content from style provides many advantages, you may have, by now, been aware of these. Here are some of the reasons of separating content from style:

• Adding, Removing or updating content is simpler since you need not to worry about how the site would look like.
• Easier to change fonts, you need not search for every single tag.
• Allows more people to work on the website since teams for content creation and website design could be separated.
• It provides a way of keeping your mind off the style while working on the content.
• Redesigning the whole site is faster since you only need to edit the CSS files, as opposed to editing every single page of the site.

What does XHTML got to do with CSS?

Well, CSS relies on the XHTML that references it. To exploit its fullest, it is necessary to provide CSS with a clean, well thought-out content marked up with XHTML. The purpose of XHTML according to the World Wide Web Consortium (W3C), “HTML is the lingua franca for publishing hypertext on the World Wide Web… HTML uses tags such as <h1> and </h1> to structure text into heading, paragraphs, list, hypertext links etc.” In other words, XHTML is for adding meaning to text content. It does not describe the format of the line or content looks like but tell you what the specific line or content means.

How does this help me in web development?

Simple! It promotes accessibility of your website to visitors. Not all would be able to “see” your CSS and Javascript, but everyone is able to “see” the XHTML part of the website. It is important that your markup is necessary for comprehension of the content.

Visitors who are visually impaired use screen readers to “see” the content of your page, screen readers deliver the contents base from the markups used. An example is the <ACRONYM> tag; the screen reader would spell out the words used rather than pronounce it.

Everyone knows of the valuable “visitor” to websites - Search engine crawlers who heavily rely on your markup to determine the context and weight of keywords used. They are the most helpful users who visit a website, without them, search engine are not able to index your site. When that happens, your users would not be able to find you.

XHTML or HTML: Which one to use?

Well, there is no significant benefit when it comes to users of your website. But as a web developer you would like to consider using XHTML because of its syntax rules which are far more meticulous, and forces you to more precise. It may sound bad at first but you may find out it is easier to maintain than HTML. Remember, in XHTML, all elements and attribute names need to be lowercase, all attribute values be quoted, and everything should be properly closed – even empty ones.

Although, it is unimportant which of the two you choose, as long as you write clean, semantic markup.

After an introduction to the advantages of CSS, importance of writing a clean, semantic markup, and providing some pointers on how to improve your websites readability through XHTML, you can now start learning some basic CSS and create your own stylish website without having problem with website comprehension.