Visual consistency maintained throughout website
When using external CSS style sheets, it is much easier to maintain visual consistency throughout a website. Rather than having to edit the code of every page, adjusting column widths, column heights, spacer gifs, and all of the other ugliness that comes with table-based layouts, CSS gives the designer control over elements that are used throughout a website, on a few pages, or on a single page.
For example, say you want to change the width, height, and background image of the header that is found on every page of your website. Rather than having to edit every single page on your website (or using find and replace to search through a specified directory or set of documents), all you would need to do is:
- open up your external CSS style sheet, find the "header" div (or whatever you decide to call it)
- change the values for the properties "background-image", "width", and "height"
- upload the style sheet with the new settings.
Bam! Assuming that you've uploaded the new background image, every page within your website that includes the header div will display the new header background image with its newly assigned width and height attributes. Very simple, very fast, very consistent.
When using table-based layouts, it is easier to lose visual consistency due to the fact that each page's style, layout, and design are independent from each unique page within a website. The reason for this (as mentioned earlier) is because table-based layouts include the visual data and content within the same page - intertwined. CSS-based layouts keep these two elements separate from each other, which not only makes tweaking visual information easier, but also allows you to change the appearance of divs, body text, headers, and all of the other elements included site-wide within a website simply by changing a few values in a CSS style sheet.
Again, any page using the elements that are located within the style sheet will automatically display their assigned attributes. Unlike table-based layouts, this feature guarantees visual consistency throughout your website.