2 Degrees of Separation

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 recommendations, 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.

Comments are closed.