Cascading Style Sheets (CSS) Standards v1.1

1. Introduction

1.1. This document describes the use of Cascading Style Sheets on bbc.co.uk web pages.

1.2. CSS allows the separation of content from presentation. At a simple level CSS can be used to style HTML, such as altering text colour and alignment of content. A more complex application would be to use CSS to define layout.

1.3. Cascading Style Sheets can be used to minimise the code required to render a site.

1.4. Used with care and particular attention to cross-browser compatibility, style sheets can provide reduced download times and simplify site maintenance.

1.5. CSS style sheets MAY be used to specify many aspects of page design, such as fonts and colours, providing that the editorial content remains accessible in browsers that do not support style sheets.

1.6. Style sheets SHOULD be designed and tested with care, as varying support across browsers can lead to inconsistent results or even render pages unreadable. See Browser Support Standards.

1.7. A full discussion of CSS style sheet rules is beyond the scope of this document. Further resources are listed in the References section.

1.8. This document may be more understandable when read in conjunction with the Browser Support Standards and HTML Integrity Standards.

Top of page

2. Requirements

2.1. Any usage of CSS MUST be valid according to a published W3C recommendation, unless you need to deviate from this to keep within the BBC Browser Standards.

2.2. The presentation of any page employing CSS MUST degrade gracefully (re: Browser Support) in browsers that do not support, or provide only partial support for style sheets.

Top of page

3. Usage

3.1. CSS style sheets SHOULD be used in preference to HTML-based formatting, where HTML-based formatting is not required for the content to be readable.

3.2. Attached style sheets SHOULD be used in preference to document style sheets and document style sheets SHOULD be used in preference to inline styles.

3.3. Attached style sheets

3.3.1. Attached style sheets are linked to, or imported from external files.

3.3.2. Style sheet files SHOULD be stored in the relevant includes directory in the site structure and MUST have the file extension .css.

3.3.3. The file size of attached style sheets SHOULD be kept as low as possible. For the purpose of page weight calculations, all attached style sheet files will be taken into account.

3.3.4. Linking

3.3.4.1. External style sheets MAY be linked to, using the link element.

3.3.4.2. Any link element MUST be placed in the head section of the document following the inclusion of the global.page file and MUST NOT be placed inside any other element, where the page is using Barley.

<!--#include virtual="/global.page" -->
<link rel="stylesheet" type="text/css" 
href="/[sitepath]/includes/[stylesheet].css" />

Top of page

3.4. Importing

3.4.1. External style sheets MAY be imported within the style element.

3.4.2. Any @import directive MUST be placed in the style element following the inclusion of the global.page file and MUST precede any other CSS rules, where the page is using Barley.

<!--#include virtual="/global.page" --><style type="text/css">
@import url(/[sitepath]/includes/[stylesheet].css);
</style>

3.4.3. The import method MAY be used to hide style sheets from Internet Explorer 3 or Netscape Navigator 4.x as these do not support this method and provide very limited support for style sheets.

3.4.4. @import url("style.css"); is not recognised by Internet Explorer 4, Netscape 4.x and below and MAY be used to hide style sheets from these browsers.

3.4.5. @import url(style.css); is not recognised by Internet Explorer 3, Netscape 4.x and below and MAY be used to hide style sheets from these browsers.

3.5. Document style sheets

3.5.1. Document style sheets are defined in the style element within a document.

3.5.2. Document style sheets SHOULD only be used where the style rule is only required for a specific page.

<!--#include virtual="/global.page" --><style type="text/css">
.localbg {background: #330000;}
</style>

3.5.3. Inline styles

3.5.3.1. Inline styles are defined within HTML elements within a document.

3.5.3.2. Inline styles SHOULD NOT be used, as it is generally preferable to define styles in an attached style sheet.

Top of page

3.6. Combining style sheets

3.6.1. Multiple style sheets MAY be employed if required and their rules will be combined.

3.6.2. For example, a basic style sheet MAY be linked to, for every page in a site, while importing additional style sheets for more compatible browsers and adding document style elements specific to a particular page.

<!--#include virtual="/global.page" -->
<link rel="stylesheet" type="text/css" 
 href="/[sitepath]/includes/[stylesheet].css" />
<style type="text/css">
@import url(/[sitepath]/includes/[stylesheet].css);
@import url(/[sitepath]/includes/[stylesheetlocal].css);
[other document style sheet rules...]
</style>

3.7. Style sheet rules

3.7.1. The following directives are generally supported by available browsers.

3.7.1.1. Background

3.7.1.2. Background colours MUST be specified using background-color rather than using background, unless you are importing the style.

3.7.1.3. Background images SHOULD be specified using background rather than using the HTML body element. The optional background repeat behaviour MAY be specified. Note that background image positioning does not work in Netscape 4.x.

3.7.1.4. Colour

3.7.1.4.1. Colours SHOULD be specified using hex pair RGB values, such as #336699, or short Hex values, such as #369.

Top of page

3.7.1.5. Fonts

3.7.1.5.1. Font typefaces, weights and colours MUST be specified in CSS rather than using the HTML font element.

3.7.1.5.2. A single generic font-family name MUST be appended to the end of a font statement. This MUST be serif, sans-serif, cursive, or monospace.

For instance:

"helvetica, arial, sans-serif".

3.7.1.5.3. Font weights MUST only be specified using relative weights i.e. normal or bold.

3.7.1.5.4. Font sizes MUST NOT be specified in units that are not resizeable in all browsers, except for print stylesheets.

3.7.1.5.5. Font-size MUST NOT be specified using px or pt (as they are not resizeable in IE), except for print stylesheets.

3.7.1.5.6. Font-size SHOULD NOT be specified using keywords (e.g x-small) as they are rendered inconsistently across browsers.

3.7.1.5.7. You MUST NOT use the keyword xx-small, as it is unreadable in most browsers.

3.7.1.5.8. You MAY use em or % for sizing.

3.7.1.5.9. You MUST import any style sheet that uses em's.

3.7.1.5.10. Font line-height MUST ONLY be specified in @import style sheets.

3.7.1.5.11. Line-height MUST NOT be specified using px or pt (as they are not resizeable in IE), except for print style sheets.

Top of page

3.7.1.6. Links

3.7.1.6.1. Link properties MAY be set using CSS, including control of the underlining of links where appropriate.

3.7.1.6.2. The following example turns off underlining except when the mouse hovers over a link. In this case, the order in which rules are set is significant.

a:link {color: #cc3300; text-decoration:none;}
a:visited {color: #cc3300; text-decoration:none;}
a:hover {color: #0000cc; text-decoration:underline;}
a:active {color: #cc3300; text-decoration:underline;}
a {color: #cc3300; text-decoration:underline;}

3.7.1.7. Margins, borders and padding

3.7.1.7.1. Support for these directives is often inconsistent but they may be used with caution for non-essential layout.

3.7.1.7.2. Negative values MUST NOT be used to move content outside the visible body of the page, because this would obscure the page meaning if images were turned off (image replacement).

3.7.1.8. Reserved definitions

3.7.1.9. Style sheets MUST NOT be used to modify the appearance of the toolbar or global site elements.

3.7.1.10. The prefix "bbcpage" is reserved for template use and MUST NOT be used outside of the page template system. To learn more, see (Implementing Page Layout Standards) using Barley.

Top of page

4. Compatibility testing

4.1. All pages using style sheets MUST be tested with and without style sheets in the test suite of browsers specified in the Browser Support Standards.

Top of page

5. References

• W3C CSS1 standard
• W3C CSS Validator
• Web Design Group's CSS guide
• Web Review CSS compatibility chart
• Web Review browser comparison

Top of page

6. Example style sheet

6.1. A simple use of a style sheet is to remove the requirement to define fonts using the HTML font tag.

6.2. This example style sheet sets the default font to Arial, Helvetica or other sans-serif font with the text set to black and underlining of links turned off.

body, td {font-family: arial, helvetica, sans-serif; color: #000000;
a:link {color: #cc3300; text-decoration:none;}
a:visited {color: #cc3300; text-decoration:none;}
a:hover {color: #0000cc; text-decoration:underline;}
a:active {color: #cc3300; text-decoration:underline;}
a {color: #cc3300; text-decoration:underline;}

Top of page

7. Document history

Date	Version	Change	Author
06/02/2006	v1.1	Revision from CSS Group	Nick Holmes
18/11/2002	v0.81	Final change in line-height prohibition from World Service	Jonathan Hassell
14/11/2002	v0.8	Revisions after News feedback and iF&L questions	Jonathan Hassell
25/06/2002	v0.7	Revisions to Font Size from Lee Harker	William Cooper
28/05/2002	v0.6	Revisions from CSS group	William Cooper
03/04/2002	v0.5	Consolidated revisions	William Cooper
30/04/2002	v0.4	Further corrections	CSS Group
28/04/2002	v0.3	Extensive revisions	Nick Holmes; CSS Group
12/04/2002	v0.2	Substantially restructured and revised	William Cooper
06/03/2002	v0.1	Initial draft based on work of BBC CSS Group	Ian Malpass

Top of page