This article introduces you to Cascading Style Sheets (CSS)—an advanced technology to build modern web pages and explains how this technique can be used by a web developer to improve the quality of websites and optimise their future support
As your business grows and develops, so will your website. When you build it today, you should already be taking into account how you might want to improve it in the future including possible modifications to its look and feel and even complete change of the visual design.
We view websites via so-called browsers—the software built to explore websites and make the best use of their functionality and features. The most popular browsers are Internet Explorer and Firefox, but there are many others. They allow us to see web pages as formatted text. The web pages are formatted using a special markup language called HTML (Hypertext Markup Language) and the browsers interpret the HTML to present the web pages to us properly. HTML is also read by mobile phones, screen readers and other devices.
HTML is responsible for the so-called “semantic” markup of web pages, for example, to tell the browser or another device that a certain part of text is a heading:
For example the following code: <h1>Heading</h1>—will be displayed as
Heading
The <h1> tags mean “the 1st level heading”. However, the presentation can be different in different browsers, because they choose the default colours, sizes and other attributes of different text elements themselves.
It’s possible to define presentation in HTML too, for example by using a <font> tag.
Example: <font color=“#ADDF00”>red </font> will be displayed as red. But the modern standard require that visual presentation of web pages is handled using CSS instead. Consequently, tags like <font> are now deprecated.
This approach offers us several benefits, the most important of which is this: if the site owner wishes to change the look and feel of the whole website—e.g., the colour and size of all 1st level headings—all that needs to be done is changing one line of code in the file that contains all CSS. To achieve the same task with HTML the designer would have to change every <font> tag on every page of the website—and elephant task if the website consists of, for example, two hundred pages.
Another benefit: keeping all Cascading Style Sheets in a separate file allows us to keep the source HTML code of web pages very clean, tidy and light. It makes them easier to modify and support, helps screen reader users and search engines and reduces the load time of web pages. Adding new functionality also becomes much easier with lighter HTML code. This way the programmers can do their work faster without having to worry about destroying the visual design of the page.
Skilful modifications of the CSS file done by an expert can change the look of a website completely without modifying the HTML at all, as shown, for example, by the www.csszengarden.com webmaster community. You can see it at
In other words, using CSS you can separate content from presentation. The content (text you have on the website) is semantically and logically formatted using HTML tags (<h1> for 1st level headings, <h2> for 2nd level headings, <p> for paragraphs, etc…) and the presentation (the way users see the information) is controlled by Cascading Style Sheets (CSS).
Using CSS has even more additional benefits. For example, it’s possible to create a separate CSS file for the printed version of the page and format it differently. This way you can make ensure better compatibility of your printed pages with the printing device. For example, some printers do not support background images, so the web pages look incorrectly on printouts; an alternative CSS file can correct this by applying a different (and simpler) page layout.
New browser versions appear all the time, and some old websites look broken in new browsers due to compatibility problems. Adding a few lines to the CSS file can solve this problem quickly and easily.
Using CSS makes it easier to create web pages that automatically adjust to different screen resolutions. For example, let say one of your users view your website on an old computer with Internet Explorer 6 and at the 1024 by 768 screen resolution, the other one is using the latest version of Firefox and a modern LCD monitor and the third visitor prefers Macintosh computers and a Safari browser. A professional web designer experienced in CSS-powered web page design will make sure all three of your visitors will see the page correctly.
Summing it up, CSS, if used properly and professionally, can help the website owner save a lot of time and money on the on-going support and possible redesigns of the website and greatly optimise the process. It also helps the webmasters with creating modern, advanced high quality business websites.