Future Media Standards & Guidelines

Cascading Style Sheets (CSS) Standard v1.3

Navigate on this page:

  1. Introduction
  2. General Principles
  3. Implementing CSS
  4. Typography
  5. Links
  6. Page colours
  7. References
  8. Appendix A: Why
  9. Appendix B: How

1. Introduction

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

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 defining layout. CSS can be used to minimise the code required to render a site. Used with care and particular attention to cross-browser compatibility, style sheets can provide reduced download times and simplify site maintenance.

A full discussion of CSS rules is beyond the scope of this document. Further resources are listed in the References section. This document MAY be more understandable when read in conjunction with the Browser Support Standards and XHTML Integrity Standards.

Top of page

2. General Principles

2.1. CSS MUST be used to specify presentational aspects of page design such as typography, layout, interaction (along with JavaScript) and design features.

2.2. The page MUST be usable and readable without the CSS.A1

2.3. Style sheets SHOULD be tested against all level 1 and level 2 browsers, see Browser Support Standards.A2

2.3.1. In Level 1 browsers the CSS MUST render a fully usable representation of the page design. In level 2 browsers a page MUST be readable and usable, but doesn’t have to completely represent the design.

2.4. Use 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.4.1. If you wish to use browser specific syntax, you SHOULD do so in such a way as to limit the impact on future browsers. B1

2.5. The presentation of any page employing CSS MUST degrade gracefully (see: Browser Support Standards) in browsers that do not support, or provide only partial support for certain CSS features.

2.6. Style sheets MUST NOT be used to modify the appearance of the toolbar or global site elements unless is allowed as stated in the Barlesque Standard

2.7. You MUST NOT use !important. A3

Top of page

3. Implementing CSS

3.1. Definitions for this section:

  • External CSS files = using <link> in the <head>
  • Document head CSS = using <style> in the <head>
  • Inline CSS = using the style attribute on a tag, i.e. <div style=”color:red;”>

3.2 External CSS files SHOULD be used in preference to document head CSS and document head CSS SHOULD be used in preference to inline CSS.

3.3. CSS files MUST have the file extension .css and SHOULD be stored in the relevant includes directory in the site structure, usually /style/.

3.4. The file size of CSS files SHOULD be kept as low as possible, especially on high demand pages.A4B2

3.5. External CSS MUST be linked to using the <link> element which MUST be placed in the head section of the document.A5

3.6. External style sheets MUST NOT be imported (i.e. using @import) as it impairs caching. A6

3.7. Document head CSS MAY be used where a style rule is only required for a specific page.

3.8. Inline styles MUST NOT be used.

3.9. Query string data (e.g. "style.css?v=0.1") MUST NOT be used on an external CSS file.A7

Top of page

4. Typography

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

For example: "helvetica, arial, sans-serif".

4.2. Typographic sizes MUST NOT be specified in units that are not resizable in all browsers such as px and pt, except for in print stylesheets. A9

4.3. Typography SHOULD be sized using em, but MAY be sized in % or keyword values.

4.4. Text MUST be readable when the text size is increased by two steps in any of the Level 1 supported browsers (Note: For browsers that support text resizing, as some only zoom the page). A10 B3

Top of page

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

5.2. When styling links the order is important, and as such you SHOULD order them using the LVHA method. B4

Top of page

6. Page colours

6.1 You MUST always define a page background colour in your CSS, even if it is white.A11

6.2 When specifying a text color or a background image, you MUST specify a background color that compliments it and vice versa.A12

6.3 A full default set of definitions for colours (equivalents of text, link, alink, vlink and bgcolor in html) MUST be specified in the page's CSS style-sheet.A13

6.4 Please also refer to the Use of Colour and Colour Contrast Standard.

7. References

Top of page

Appendix A: Why

  • A1. This is to ensure the page is still usable and readable if the CSS fails to load, CSS is not supported by the browser or if the user has disabled CSS. Additionally, automated systems such as search engines do not need CSS to interpret the content, so if the content is dependent on the CSS then it may fail to be correctly interpreted in many search engines.
  • A2. Varying support across browsers can lead to inconsistent results or even render pages unusable or unreadable.
  • A3. This prevents users overriding the style, which they may need to do for accessibility, assistive technology or personal preference reasons. It also prevents the use of BBC site wide style override systems for the purpose of user defined accessibility features.
  • A4. For the purpose of page weight calculations, all attached style sheet files will be taken into account.
  • A5. This is the preferred method of using CSS. It offers the best experience for the user as it helps prevent FOUC (flash of unstyled content), promotes code reuse across a site and is cacheable.
  • A6. Explanations:
  • A7. Use of query strings on CSS files prevents them from caching in some browsers. Whilst this may be desirable for testing, and of course may be used for that, it is very undesirable for production sites.
  • A8. If a browser does not have any of the fonts specified it will generally default to Times new roman or similar, which is not ideal from a design or readability perspective.
  • A9. This is largely for accessibility reasons, so as to enable users to adjust the page text size if they require, or if an assistive technology attempts to do the same on a users behalf.
  • A10. This for accessibility purposes, to allow users with vision impairment to simply adjust the size of the text so they might be able to read it.
  • A11. Whilst all current level 1 browsers default to a white background, that default may have been changed, or a new browser may emerge which does not have this as a default.
  • A12. This is good practice for accessibility and usability reasons. If the page's CSS changes due to an aggressive overriding of font or background colour, because of a change to the site's CSS files or by a user style, it should help text remain legible. This is of particular relevance to cross site code such as toolbars and page modules.
  • A13. This is to ensure that text is still readable if images are not loaded, or when certain assistive technologies are used.

Top of page

Appendix B: How

  • B1. Consider using conditional comments for Internet Explorer specific syntax, especially when it violates the CSS language specification (such as filters).
  • B2. It is important that CSS be readable for page maintenance reasons, but it is recommended that the CSS is optimized and compressed before serving to the user, using a tool such as the YUI Compressor
  • B3. In Internet Explorer: View > Text Size > Choose a size. In Firefox and Safari: View > Zoom > Enable Text Zoom Only, then View > Zoom > Zoom In. opera and Chrome do not provide direct access to text size changing.
  • B4. 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 known as LVHA. 
    
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;}

    For more information see: Eric Meyer, LVHA Hyperlink CSS

Top of page

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.