Use CSS to separate content and presentation

The logic of separating content from presentation is to gain the benefits of CSS and thereby save and earn money from it. When all presentational items are separated from the HTML code, then the following advantages accure:

The benefits of using separate CSS files:

The CSS code can reside in a separate file that can be referenced by any number of HTML pages, thereby giving uniformity to all the pages and imparting a consistent house look feel. This minimizes the task of coding all the HTML pages separately since a single CSS file has to be coded that is referenced by any number of HTML pages.

Considering a website that has more than a hundred pages, the cost of coding all the HTML pages along with the presentational items increases significantly. With a single CSS file, the HTML coding becomes less repetitive, less bulky, more manageable, and less expensive. Thus, the effective implementation of CSS can save money by eliminating the need to code all the HTML documents separately.

The CSS file can have two main views: web view and presentation view

The web view is designed like a website and contains full notes, the presenter's notes and can be customized according to the user's preference and style, if the user so wants it. The presentation view is designed like a PowerPoint presentation containing only the major points that are to be emphasized or highlighted.

This technique is extremely useful on a company's Intranet where specific information is displayed to particular departments. For example, for successful execution of a project, many different functions like sales, management, financial data, projected turnover, charts, development, design, client representation, etc., are involved. Different views of the same project have to be presented to different persons. The developer needs to be presented with the information regarding development only. The developer has no need to view or understand the financial aspect of the project, similarly, the sales department has to be presented with the sales data only, as it has no need to view or understand the development and the designing aspect of the project. Thus, for each department, different HTML pages have to be generated, making the overall website extremely heavy with increased storage requirement. This also results in increased bandwidth and downloading time besides incurring heavy expenditure in coding the pages.

In this scenario, a CSS file proves to be extremely beneficial as a single CSS file can contain all the relevant data. Each of the departments can receive the same CSS file but they can view only that specific data which is relative to their department. The sales department can view only the sales data, the finance department can view only the financial data, and the R & D department can view only the research and development data and so on. This saves considerable time in coding and a lot of money is saved and thereby earned.

A CSS file is cross browser and cross platform compatible

Besides computers, hand held devices like mobile phones, PDAs, and other wireless devices constantly connect to the Internet. The webpage that displays on a computer cannot fit in the small screen of a hand held wireless device; hence, a special CSS file can be made for such devices. Thus with CSS coding all different platforms can be easily accessed.

For a commercial venture, this capability translates into more exposure and therefore more potential for increased sales, which results in making more money by tapping the benefits of CSS.

A CSS file is extremely print-friendly

When a user chooses to print a webpage then a CSS print file can be called up by the page, which removes all the navigation bars, advertisements, the particular formatting, images, and other presentational items, leaving only the content that can appear on the printed version. The CSS file can define size, borders, layout, spacing, color, text alignment, and many other typographic characteristics specifically intended for printing. Thus, independent and different presentations for on-screen display and for print can be done.

This saves download time for the client. This also reduces the storage and bandwidth burden on the server, thereby facilitating increased storage space on the server and better utilization of the bandwidth. This results in an overall more effective utilization of the money spent for the website.

A CSS file can also give better access for people with physical disabilities

For example, users who have low-vision or have other vision related problems, can be shown a webpage having the same content but with high contrast colors and larger fonts. For a speech-based browser or a screen reader, the CSS file can be made accordingly, so that the browser can easily pronounce the required content. It can define non-visual styles like speed and emphasis for aural text readers. The CSS file can also be made compatible for use for braille-based tactile devices for the blind.

Hence, a larger audience can be captured by a website, resulting in increased exposure and thereby more potential for enhanced sales and revenue is generated.