
If the medium is the message then the user’s choice may affect how your message is received.
The benefits of delivering information separately:
- accessibility
Sites that use CSS with either XHTML or HTML are easier to tweak, so that they appear similar in different browsers.
Sites using CSS 'degrade gracefully' in browsers unable to display graphical content. Browsers ignore CSS that they don't 'understand', such as CSS 3 statements. This enables a wide variety of user agents to access the content of a site even if they can't render the stylesheet or aren't designed with graphical capability in mind.
For example, a browser using a refreshable braille display for output could disregard layout information entirely, and the user would still have access to all page content.
- consistency
Because the semantic file contains the meaning an author intends to convey, the styling of the various elements of the document's content is very consistent.
For example, headings, emphasized text, lists and mathematical expressions all receive consistently applied style properties from the external stylesheet. Authors need not concern themselves with the style properties at the time of composition. These presentational details can be deferred until the moment of presentation.
- customability
If a page's layout information is stored externally, a user can disable the layout information entirely, leaving the site's bare content still in a readable form.
Site authors may also offer multiple stylesheets, which can be used to change the appearance of the site completely, without altering any of its content.
Web browsers also allow the user to define their own stylesheet, which can include rules that override the author's layout rules. This allows users, for example, to bold every hyperlink on every page they visit.
- maintainability
A single change to the CSS stylesheet file can apply to the entire site.
Changes to site appearance - being cheaper, easier, faster - are more likely to happen. Sites are less likely to become stale - this also means that a single change can 'break' the site's appearance, and hence designers must 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. Pages using CSS to store layout information are also easier to update: if the content is properly marked up, no new layout information needs to be added in order for the new content to be consistent with the existing one.
- portability
The deferment of presentational details until the last stages means that a document can be easily re-purposed for an entirely different medium, with merely the application of a new stylesheet prepared for the new medium and consistent with elemental or structural vocabulary of the semantic document.
A carefully authored document for a web page can easily be printed to a hard-bound volume complete with headers and footers, page numbers and a generated table of contents simply by applying a new stylesheet.
- responsive design
Instead of attempting to target a niche audience with separate sites optimised for mobile, TV, or print media, use CSS3 media queries to adapt the output according to the users screen width. For example:
@media screen and (max-width: 1024px) {
#wrapper {
margin: 0 auto;
width: 95%;
}
Style sheets are a way of separating presentation and content, where the markup of a webpage contains its verbal message and structure, but doesn’t define its visual layout or style.
Instead, the style is defined in an separate file, using CSS.
This design approach is identified as a ‘separation’ because it supersedes the traditional methodology in which a page’s markup contains both style and structure information.
Accessibility Speed Maintainability Consistency Portability Customability