Cabinet Office
Cascading Style Sheets (CSS) give the author of an HTML page the ability to separate the styling elements from the content of a document. They are of fundamental importance to the usability of a page for everyone. They are simple to implement and extremely powerful. Their use should be controlled centrally by the organisation’s Web manager and should set the formatting standards for the entire organisation.
Use each checklist to ensure that your web pages comply with these guidelines
6.2.1 Checklist and summary: Core guidance
Checklist
Summary
Although Cascading Style Sheets use a slightly different language to that of HTML they are quite easy to master. When appropriate, web managers should ensure that the organisation’s website is consistently formatted using this technique.
6.2.2 Introduction
Until a few years ago all HTML documents were a mixture of content plus structural and styling markup elements. When viewed the source code looked complicated and cluttered. This clutter could make it difficult to actually see the data amongst all of the mark up information. These elements not only got in the way when the information was viewed and edited but could also cause many usability issues for non-graphical browsers and screen readers.
With the advent of Cascading Style Sheets the Web manager now has the ability to separate styling instructions from the entire page content and structure.
Any element within an HTML page can be referred to as an object - a word, an image or a style of formatting. Using CSS the Web manager can name these objects and assign a particular style to them. These styling elements can be for the formatting of a page or the font style of all text, but they can also be used to format an individual line or word.
There are three main ways in which CSS can be implemented in an HTML document:
Each of these works in exactly the same way and all use the same syntax.
6.2.3 Cascading Style Sheet language
The descriptive syntax used in CSS has its own language and construction rules, which are different from those of HTML.
In the past, if a Web manager wished to format a line of text in red, make it larger, specify a particular font, embolden and italicise it, the following HTML commands would have to be used on each occasion:
<pagt;<balt;<i><font face=”arial, helvetica, sans-serif” size=”+1” color=”#ff0000”> A line of text </font></i></b></p>
This is very inefficient, particularly if many instances of this formatting are required throughout the document or the website.
Using CSS an author can now specify the above example as:
<p class=”redtext”> A line of red text</p>
In this example the author has reused a required HTML element and applied a class attribute and value to it. This class refers to a line in the CSS section. The browser recognises that the line needs to be styled a particular way and displays the results. In this way all objects can be styled.
If this element of the CSS file is examined it will become obvious how this instruction is formatted correctly:
.redtext { color: #ff0000; font-family: arial, helvetica, sans-serif; font-size: 1.5em; font-weight: bold; font-style: italic }
Firstly the class is listed, which in this case is ‘redtext’. A full point must precede this listing, as this is the class identifier.
Each class has a series of CSS formatting rules, which are contained within braces (curly brackets) { }.
Each rule has an attribute and a value. The separation of these is slightly different to that used in HTML. An author would normally use the equals symbol and quotation marks to separate the attribute and value in HTML. In CSS specifications, a colon is all that is used. Each set of attribute(s) and value(s) is separated by a semicolon.
In the example above, the ‘font-family’ attribute has a multiple value: it states not only two values for the font family name (Arial and Helvetica) but also the generic typeface name (sans-serif). This is to ensure that if a user’s browser does not contain the required fonts it will still display the information in a style that is acceptable.
The font-size can be specified in a number of different ways. Pixel height, point value and percentage size can all be used. Pixel and point are particularly inflexible and cannot be changed by a user (known as hard coded). It is recommend that text formatting is stated either by ‘ems’ or by using the x-small, small, medium, large or larger technique.
An author should always make the size of text as legible as possible. It is not sufficient to rely on users to change their font size as some will not bother. Start with a font size equivalent to 10 or 12 pixels, which will render acceptably on most web browsers.
Many browsers are still being used that have no understanding of CSS. Although information on an HTML page should always be formatted using this method it is important to ensure that you website is still legible if this facility is disabled.
Important:
An easy way to test that a page is usable on non -CSS-capable browsers is to disable the CSS line in the document, ie: - -> Once this line has been commented out and viewed on any browser, the page will be displayed without the desired formatting. Can it still be read? Can you still navigate around the page? If not, you will have to make corrections.
This difference can be illustrated very easily. The following diagram shows exactly the same page - on the left it is accessed by a browser that can understand CSS and uses the formatting rules that have been specified, while on the right is rendered by a browser that does not understand CSS and therefore displays the page with the basic HTML formatting.
Because this page has been formatted correctly, it is also readily accessible by all varieties of browsers. The next illustration is the same page viewed through the Lynx browser. This really is the most basic of web browsers: it works within the MS DOS screen of a PC and therefore does not support graphics or font manipulation at all.
Even though it has been rendered basically, the page is still structured and easy to use. The navigational elements are listed at the top and the real content of the page is shown underneath.
Although CSS are one of the latest advances in web publishing, a Web manager must always ensure that it is implemented correctly and that it does not interfere with the basic construction and usability of the website. Ensure that your CSS is validated by W3C.
These screen shots are from the template website that supports these guidelines use CSS to format all of the major elements on the page.
More detailed explanations of the correct use of CSS can be obtained from the W3C website.
See section 2.6.6.2 Fonts.
6.2.4 Examples
The following very simple example can be styled using any one of the three methods mentioned above.
In a standard HTML document a heading would be formatted as follows:
<h1>This is a heading</h1>
This text would be displayed as a heading 1, in bold and black text, aligned to the left-hand margin and displayed in the base document font.
A Web manager may wish to display a particular heading within a document in red, indented from the top and left of the document’s margins, italicised and in a particular font face.
This can be accomplished in several ways as outlined in the following sections.
6.2.4.1 In-line styles
To format the <h1> in the required style, each of the CSS elements is added to the opening <h1< tag.
<h1 style="margin-left: 2em; margin-top: 2em; color: #ff0000; font-family: arial; font-style: italic">This is a heading</h1>
The margin-left and margin-top attributes each have a value of two ems. An em is useful as it scales to the size of the font employed and is safer to use than pixels or points, which can cause problems for users who require large font sizes.
This method is fine but becomes unmanageable if all <h1> tags in the document need to be formatted in the same way because all the CSS specification would have to be repeated on every opening <h1> tag. This can be overcome by using a style sheet at the very top of the document.
6.2.4.2 Style Sheet inclusion
Including a style element at the top of a page within the head element of an HTML file is another way to achieve the same results as the previous example. In this way all h1 elements within the document will be styled in the same way. The following shows how this is accomplished:
<html>
<head>
<title>Cascading Style Sheets</title>
<style type="text/css">
h1 { margin-left: 2em;
margin-top: 2em;
color: #ff0000;
font-family: arial;
font-style: italic; }
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html<
This has the benefit of simplifying the HTML markup and locating all styling elements at the top of the page. Now all that is left within the body of the document are the structural elements.
This method is fine for a single document but would become unmanageable if all h1 elements in the organisation’s website needed to be formatted in the same way. This problem can be overcome by using a separate style sheet file to which all other files refer for their styling.
6.2.4.3 Style sheet file (CSS)
The final example will give exactly the same results but will add even more flexibility to the formatting of publications within a website.
All documents can refer to the styling elements contained in a centrally located CSS file. In this way one change to the external file will effect the change on every page within the website. This is far more efficient for a Web manager and helps co-ordinate the organisation’s publishing style.
For this to work each document within the website must link to the external style sheet. The following is an example of how to do this:
<html>
<head>
<title>Cascading Style Sheets</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
The link element shown after the opening <title> tag tells the browser where the style sheet is located. The browser will access this file and format the specified tags in the appropriate manner. The contents of the ‘style.css’ file are as follows;
h1 { margin-left: 2em;
margin-top: 2em;
color: #ff0000;
font-family: arial;
font-style: italic; }
This method is the preferred authoring style when managing complex websites. It is flexible and easily controlled. All authors and editors of web pages within the website only need to know the location of the CSS file and how to link to it. All other styling is then completed automatically for them.
6.2.5 Implementation of CSS
The example given in the previous section was very simple. As Cascading Style Sheets can be used to format virtually all elements of an HTML page, the CSS file can get very long and complicated, very quickly. It is the Web manager’s role to ensure that it is maintained correctly.
As well as ensuring that all styles are correct the Web manager must also make sure that access to the CSS file is limited to staff who have responsibility for styling and no-one else, as any change to this file will have an immediate effect on the entire website.
Important: Care should be taken when using CSS absolute and relative positioning to ensure that content remains presented in the correct order in browsers that do not implement CSS positioning.
Relative values - allow the author to specify that the next object on a page should be placed 40 pixels down and 40 pixels to the right of the last object.
Absolute values - allow an author to specify page x, y and z co-ordinates for an object. Although this is potentially very useful, it is likely to cause layout problems in browsers that do not implement it.