Web Access Centre

CSS Basics - Web Access Centre

Summary: Basic CSS techniques and accessibility.

Rationale
Techniques
Testing tips
Further information
Compliance with WAI Web Content Accessibility Guidelines v1
Other pages about CSS

Rationale

If you are a raw beginner to Cascading Style Sheets (CSS) this page will help you understand what they are, how to create them and some basic rules to help you create accessible, flexible CSS. To follow this guide, you will have to have some basic knowledge of HTML.

Using HTML to format a web page can lead to bulky, inefficient and repetitive coding. In addition, using HTML to visually format a document can interfere with its structure. Put simply, designing pages with layout and formatting in the HTML documents is like designing a building that requires you to take down walls to change the wallpaper.

Most of the HTML tags and attributes commonly used for visual formatting are now deprecated, and the W3C (World Wide Web Consortium) recommends using CSS (Cascading Style Sheets) for both layout and formatting.

Using CSS can make your web pages more accessible. By removing formatting from the page it becomes much easier for users to control the size and colour of page elements to suit their needs. If they require a special size of text or colour combination for ease of reading they can define their own style sheet.

In addition, the cleaner, leaner HTML is the easier it is on the ear for audible screen reader users. The old style of layout, using tables, might have been invisible to the eye, but as tables were intended to be a structural element for displaying data in a grid, screen readers are programmed to read this structure aloud. So the first information screen reader users get on a page using tables for layout is the number of columns, rows and nested tables used, which apart from being time-consuming, is frustrating, as the user knows that the same information is likely to delay their enjoyment of every page on the site.

A style sheet is simply a list of style rules that tell a browser how to present a web page. It should be used to control the visual effects, or style used, such as font and colour formatting and the visual layout of different parts of the page content.

CSS has been designed to be readable by humans: most of the terms used are self-explanatory whole words, for instance “background-color”, so with a small leap from HTML, you should find it isn’t difficult to master.

The style sheets are called "cascading" because a rule declared for one element can cascade down through other elements without having to be declared again, (see Inheritance, below).

In addition, it is possible to have several style sheets defining the format of any one page, and when multiple style sheets are in use two or more of them may try to affect the same element on the page. When this happens, the browser will cascade through the style sheets to determine which one has the greatest importance.

Techniques

Creating a style sheet - All you need to do is type in a set of rules into a text editor, such as MS Notepad and save it as a “.css” file. A CSS rule looks like this:

h1 { color: blue }

The first part (H1) is called a 'selector', and the bit between the curly brackets - { and } - is called the 'declaration'. This is where you define what the H1 element will look like on your page.

The declaration is in two parts: the 'property', which is “color” in the example, and the 'value', which we have defined as “blue”. The property and value are separated by a colon.

Linking a style sheet to a web page - The best way to link a style sheet to your HTML page is to reference it in the HEAD of the document using code similar to the following examples:

Alternatively you can attach your CSS file by importing it through an embedded style:

@import url"myfirst.css";

</style>

Note that the CSS file name is enclosed in quotes. This method hides the style from nearly all version 4 browsers, few of which are CSS compliant, and may be unable to translate some of the CSS. It means that the page will display as if CSS is disabled, so if the page is well structured it will still be usable, just not styled. Alternatively, you could use:

@import url(myfirst.css);

</style>

This encloses the CSS file name in brackets, which hides the styles from Netscape version 4, but not from Internet Explorer version 4. Netscape 4 has a particular problem with some CSS rules and may even crash.

Now save the HTML file and open it in your preferred CSS enabled browser to see the effect.

Defining more than one property for any selector is just as simple. All you need to do is separate each declaration with a semicolon, as shown below:

body {
font-size: 101%;
margin: 3em;
}

Using external style sheets - External style sheets are the most efficient way to incorporate styles. However, there are two other methods of introducing CSS into your HTML files:

- Inline styles that are coded within an HTML element and only affect that particular instance of the element.

- Embedded styles which are inserted into the HEAD of an individual document as a list.

The World Wide Web Consortium (W3C) recommends that inline styles should be avoided and that linked external sheets are preferable to embedded ones. To get the most benefit from CSS, you will want to use external style sheets anyway, to:

- Reduce the file size of your web pages.

- Allow you to re-use the same styles on different web pages without having to code them again and again.

- Allow you to update the styles on every page on your website simultaneously by updating the master style sheet.

- Provide a quicker download. The file will be saved in users' web caches by default. This means that it doesn’t need to be downloaded for each new page they visit on your site, so performance is significantly improved.

Syntax rules - These are provided within CSS to give web authors greater control and flexibility to determine what the page looks like. One of the first rules you should master is how to cross reference the parts of your HTML page in the CSS file.

Selectors, as mentioned above, roughly equate to HTML elements, but you may not want every instance of your TABLE elements to have the same style throughout one page, let alone throughout the entire site. So CSS selectors come in different flavours for different purposes, among which are:

- Type selectors: Any HTML element is a potential “type selector”. The selector is simply the element that is linked to a particular style. For example in:

li { text-indent: 4em }

The type selector is “li”, exactly the same as the HTML element.

- Class selectors: A type selector can be broken down into different classes, allowing the same element to have different styles. For example, you may wish to specify one text size for most paragraphs, but a larger text size for a few specific paragraphs. You can do this by declaring two different styles for the P element, one of which refers to a specific CLASS for P. The CSS code for this might be:

p { font-size: 100% }

p.big-text { font-size: 120% }

Now, whenever you want a paragraph to be displayed with larger text than the other paragraphs, you can specify the class "big-text". In the HTML code, it would look like this:

<p class="big-text">This text will be bigger than the text in the next paragraph.</p>

<p>This text will be displayed in the default text size for ordinary paragraphs.</p>

Class selectors can also be declared without being linked to a specific element. That makes it possible to use the style with any element, simply by specifying that class for an element. When defining a general class like this, you simply start with the full stop character “.

.theme1 {
background-color: white;
color: purple;
}

In this example, the class can be used with any element so that, for example, headings and their subsequent content might be themed, using the following HTML code:

<h1>Recipes</h1>

<h2 class="theme1">English dishes</h2>

<h3 class="theme1">Meat recipes</h3>

<p class="theme1">This selection of traditional ... etc</p>

The effect of this would be to have the top level heading “Recipes” in whatever the default colour scheme is for H1 headings, but everything relating to the English recipes in a text colour of purple on a white background.

- ID selectors: These are individually created for a particular use of an element. They can only be used once on a page, to uniquely identify a particular element. An ID selector is prefixed by the hash character "#". For example, an ID selector could be:

#footer { font-size: 85% }

This would be coded in the HTML by using the ID attribute:

The effect would be that the “Copyright” information would be displayed at 85% of the normal paragraph text size.

Now that you can cross-reference your CSS rules and the HTML code, you will want to know what properties and values you can attribute to them. We cover several of them in the pages, on layout and presentation, but the full range is too large for us to cover here, so we have also provided a link to some comprehensive lists in the "Further Information" section near the end of the page.

However, it is important that you know, from the outset, some of the rules that will ensure that you declare property values in a way that will avoid making your content inaccessible. So before you launch into the pages on layout and presentation, please read on.

Defining flexible size values - Both fonts and many layout elements, wherever possible, should be defined using relative rather than fixed or absolute values. Relative values will ensure that users will be able to change the sizes you have chosen, if they need to do so in order to read the page. For example:

body {
font-size: 101%;
margin: 3em;
}

table {
width: 100%;
}

tr {
line-height: 1.5em;
}

Note that it isn't only the font size that is defined in relative terms, but also selectors that may contain text. This ensures that when users select larger or smaller text size settings in their browser to suit their reading requirements, container sizes will scale accordingly, and not force the larger text into a space that is too small for it, or truncate it because it doesn't fit.

Relative, or flexible, units to choose from:

- Percentages (%) increase or decrease from the browser font size set.

- Em (relative to the size of the capital M).

- Ex (relative to the size of the capital X).

- Keywords (x-small, small, large, x-large, etc).

Absolute, or fixed, units to avoid:

- Points (pt).

- Pixels (px).

- Standard measurement units (cm, mm, in).

- Picas (pc).

Inheritance matters - In the hierarchy of the HTML code, some elements are the “parents” of other elements and property values declared for a parent will be inherited by its child elements, unless a different set of values is defined in the child element’s declaration. So it is important that the colour is defined for both the text and the background whenever a change is made to either. For instance:

body {
background: white;
color: black;
}

h1 {
color: #cc3333;
background: none;
font-weight: bold;
}

table {
width: 100%;
background: #999999;
}

Notice that the BODY has both the font and background colours defined, and so does the H1 selector, which is the right thing to do, otherwise a child element might inherit an inappropriate value. This is exactly what would happen to the TABLE element in the example above, which doesn’t have a font colour defined, so it will inherit the black colour value from the BODY element. As the TABLE background has been defined as a fairly dark grey, this would make the content very difficult to read.

Testing tips

Font sizes must be flexible i.e. em, %, small, etc, not pt or px.

Automated tools - Tools can pick up on fixed font sizes.
Accessibility toolbar – CSS - Show Style Sheet. This will display the content of any linked CSS style sheets. Search for absolute units: "pt" "px" etc, search for "line-height" and ensure that it has not been defined using absolute values. CSS - Disable CSS. Toggles CSS off and on to ensure that the page makes sense without the CSS formatting and that images do not interfere with the legibility of text. CSS - Show Style Sheet. This will show any linked CSS style sheets. Search for "color" and make sure that both text and background colours are defined for each element.
Browser - View - Source. Edit - Find - "css" AND Source. Edit - Find - "style". This can show if inline CSS styles are being used also search for "line-height". To make sure that tables, DIVs etc will expand to accommodate larger text sizes: View - Text Size - "Largest". Tools - Internet Options - Accessibility check "Ignore colours on the page" to ensure that images are still readable. View - Source. Edit - Find "color" and "font" to ensure that formatting has been removed from the HTML pages.

Further information

A comprehensive and easy to understand list of properties and their possible values has been compiled by HTML Dog.
More information on the accessibility features of CSS is available from the W3C website.

Compliance with WAI Web Content Accessibility Guidelines v1

2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup (priority 1).
3.2 Create documents that validate to published formal grammars (priority 2).
3.3 Use style sheets to control layout and presentation (priority 2).
3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values (priority 2).
11.1 Use W3C technologies when they are available and appropriate for a task and use the latest versions when supported (priority 2).

Other pages about CSS

Back to Design & Build

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 06/03/2008 15:41

Print Email