Why Style Web Pages With CSS?
Read this article in SPANISH
The web today is a much different place than it was just 5 years ago. Technology for the web has grown in leaps and bounds and is reflected in the sites we see and the way they are built. In the past, the HTML markup language – the language that is used to build web pages, had an assortment of tags to both set the structure and the style of the page.
Today the preferred method of styling pages is something called CSS or Cascading Style Sheets. CSS is an extension to HTML, an extension whose sole task is to style pages. Before CSS, all we had to work with was HTML’s built in styling elements like the bold tag:
<b> This becomes bold</b>
There are several other tags in HTML that allow you to style your pages, but they are limited in many ways. To deal with these limitations and browser incompatibility issues, designers would resort to creating GIF or JPEG images of text rather than using raw HTML text. These images would establish the style for the pages and because HTML (at the time) simply had limited capabilities, images would allow the designers to get the specific look/layout they were after.
This could result in many images in your pages – images not just used to show off a nice photo or logo, but images used to replace text that should have been created with HTML. The only positive about this approach is that you get the exact style you are looking for, after that it goes down hill ...
Having images make up your body text is a time consuming process to be sure. Now you have to jump back and forth between your HTML pages and your image editor to make changes to your text.
Many times the process of fixing one error can require many trips back and forth from the image editor to the HTML editor. If on the other hand the text were created with HTML only, the changes would take only a fraction of the time.
Another negative in using images for body text is that they begin to quickly bloat the page in terms of kilobytes. You should strive to make your pages as ‘light’ as possible so that the user can download the pages very quickly. The old rule of thumb is if a web page doesn’t load within 10 seconds you will lose most of your visitors. Even today with many people going with high speed Internet, I try to get my pages in at around 50-60k.
Another good reason to not use images to create your pages’ text content is GZIP compression. All web servers today support GZIP; GZIP is a method of dynamically compressing HTML content to as much as 1/10th of its original size!
So if you have an HTML page that is 50k, with GZIP turned on you are now only sending the surfer 5k! GZIP only works on text and not images, most images are already compressed to their maximum when in GIF or JPEG format anyhow.
Consider this: HTML not compressed with GZIP is already much lighter than the same text in image format. But when HTML is compressed, then there is simply no comparison! Ok, so now we know that we should use images sparingly in our HTML pages, but how do we get around the limitations of HTML layout? The answer is found in CSS.
CSS is very powerful as it allows you to style your page in a way that was not possible before. Up until recently CSS implementation in browsers was spotty and not consistent. As such people stayed away from it and only used it to a minimal degree. I myself am guilty of that and up until this day I still mix the ‘old ways’ of doing things with the new.
Today I will still use tables as my main structure of the page and will still use some images to create headlines for my pages, but never body text! But I think that at last we can feel safe with using CSS1 and CSS2, the first 2 specifications of CSS, being fairly certain things will work properly in all the browsers. Since IE has about 95% to 97% of the market and it supports the CSS standard well for the most part, we should be ok.
The emergence of stylistic guidelines:
When the web first started to go public and browsers became able to support sophisticated layout and images, people went wild in terms of design. It was a free for all and the diversity of styles and websites that are still out there today is evidence of that.
The problem with the anarchy was that there was no consistency in the way websites worked – navigation and other structural elements could be totally different from site to site and even from page to page. This has had a major impact in terms of usability of the web for the average surfer.
In mature software platforms, patterns and best practices emerge. These standards are put in place to make things consistent for both the guy working to build the software and for the user destined to use it. When MAC established strict look and feel guidelines for their OS there were many complaints at first but in the end it made for a much better user experience and it made it easier for the programmers to create their software.
The web today is slowly moving toward that same goal; CSS starts’ by making the styling of the pages consistent while experienced web developers have developed structures that they know work and they use them consistently on all their projects.
Over the years I have done the same, both with my programming and web design. People will argue this approach it just using templates and not original; I would argue that good ideas should be reused and that original work can be found within the context of an established working structure.
A page's ‘mood’ is all about the colors and fonts; structure only makes it easy for users to navigate the page and website. One nice image properly positioned can make all the difference between a good-looking page and a bad-looking page.
Today I style my pages with CSS and a few well-placed images. I combine some traditional methods (like table formatting) with the occasional CSS positioned element. I am not totally CSS centric yet but plan to explore the possibilities more so over the next little while.
If you want to get the basics on CSS read my article on CSS.
If you liked the article and you want to see more let me know!
Stefan Mischook.
Top