As a developer this means that the information in your web site should go into your HTML files, but HTML files should not contain information about how that information is displayed. And you've probably guessed by now that information about how the pages should appear goes into CSS files.
You might wonder what advantages this conveys. Why go to all of this trouble? Just a couple of advantages might give you an idea about why this approach has long been considered beneficial in areas of document management that have been around a lot longer than the world wide web.
The traditional HTML approach was to "hardcode" all of the appearance information about a page. So you want all your headings in courier, and at different point sizes to the sizes built into browsers? Then, for every heading, in every page, set the font size and face properties. You've got more than 100 pages?
That is a lot of editing, and a lot of re-editing if you decide to modify the appearance of your pages later. And with all of that editing there is plenty of possibility for introducing errors.
With CSS, you can decide how headings should appear, and enter that information once. Every heading in every page that is linked to this style sheet now has that appearance. Want to make every heading of level 3 more obviously different from those of level 2? Edit the style sheet, and every such heading now has the altered appearance. How many hours' work (and potential errors) have you just saved?
Another major advantage involves the management of large, sophisticated sites. With cascading style sheets, whole organizations can share a small number of style sheets, ensuring consistency across the site with no need for constant updating and editing to accommodate changes.
With HTML formatting, there isn’t really much you can do. But when you discover the options available to you with CSS, it’s reasonably simple to create elegant Web pages that look the way you want.
CSS allows individual HTML tags to be styled, which means, for example, all of your <h1> tags can be a specific size and colour. It also allows for the HTML class attribute, which can style a specific HTML element – giving further customisation abilities. The sames can be used for the ID attribute.
Keep Web pages small in size by keeping all formatting in a seperate file. This way, the browser only has to download your Website’s styling/formatting codes once, as it is stored in the browser’s cache afterwards. This point applies especially to pages with a lot of similarly formatted content.
If your site uses one stylesheet and you need to change something, modifying the CSS makes the change visible on all pages. For example: if all the pages on your site used the Arial font and you wanted to change it to Verdana, using an external stylesheet would mean just changing the font once, and the change would be made across the entire site.
Future proofing your Website is also a must. All the latest browsers support CSS and CSS is also a W3C Web standard. In new XHTML standards, the HTML <font> tag has been removed – which means CSS must be used instead to format text.
The amount of traffic to your website will increase with the use of CSS, as search engines have an easier time crawling your site and determining its content. Structural organization is greatly improved by using h1, h2, h3 tags, ensuring that the Search Engine Spiders know what you’re trying to show them.
