|
Separation of style and content, also known as Separation of presentation and content, is a methodology of web design in which the markup (i.e., HTML or XHTML) of a webpage contains the page's content and structure, but does not define its visual layout (style). Instead, the style is defined in an external CSS file. This differs from the traditional web design methodology, in which a page's markup defines both style and content.
Separation of style and content has many benefits, but has only become practical in recent years due to improvements in popular web browsers' CSS implementations.
One benefit is that the styles only need to be downloaded once, on the first page the user visits. The stylesheet goes into the browser's cache, and thus need not be downloaded again for all other pages that use that style sheet.
Another factor that speeds up browsing of sites with separated style and content is that shorthand is used to describe a set of styles. A page that has, say, 20 occurrences of '<font size=''2'' color=''red''> </font>' could replace those with 20 'class=import' parameters. The more tags that repeat across the pages of the site, the greater the size savings by using CSS styles.
A single change to the CSS stylesheet file can affect the entire site. Changes to site appearance can be cheaper, easier, faster -- thus more likely to happen. Sites are less likely to become stale. However, this also means that a single change can quickly 'break' the site's appearance. Keep multiple backups of the CSS file.
The XHTML or HTML pages are primarily made up of content, so editing those files is less likely to 'break' the appearance of the site.
Sites that use CSS with either XHTML or HTML are easier to tweak so that they appear extremely similar in different browsers (Internet Explorer, Firefox, classic Mozilla, Opera, Safari, etc.).
Sites using CSS 'degrade gracefully' in browsers unable to display graphical content, such as Lynx, or those so very old that they cannot use CSS. Browsers ignore CSS that they do not understand, such as CSS 3 statements.
| 
