Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) are used to control the way a web page is presented. To make a web site easier to update they are usually stored in a file that is separate from the content and HTML markup of the web pages. Any changes made to the CSS file will apply to all the pages that refer to it. Web pages are also reduced in size and complexity because they no longer contain presentation markup.

CSS allows the same page to be presented for different purposes such as on-screen, printed, spoken aloud, and even on braille-based, tactile devices. Alternative style sheets can also be created. For example you can have a large text version for visually-impaired users or one with a layout optimised for the smaller screen on a mobile phone. However, readers can also use their own style sheet if they prefer and some devices might supply one ready for them to use.

A Cascading Style Sheet can be used to control:

  • font properties such as typeface and style
  • the colour of text, backgrounds, and other elements
  • text attributes such as spacing between words, letters, and lines of text
  • alignment of text, images, tables and other elements
  • margin, border, padding, and positioning for most elements
  • unique identification and classes of attributes

How Cascading Style Sheets Work

A Cascading Style Sheet contains a structured list of rules which apply to various elements used in the HTML or XML markup of a page. For example:

  • body { font-family: Georgia; font-weight: normal; text-align: left; }
  • h1 { font-family: Verdana; font-weight: bold; }
  • p { font-weight: bold; text-align: justify; }
  • .italic { font-weight: italic; }
  • #logo { color: #2222FF; background-color: #FFFFFF; }

Using the example shown above the text between the <body> and </body> tags is displayed in the Georgia typeface and aligned to the left. The main heading, which is the text that appears between the <h1> and </h1> tags, will be shown in the Verdana typeface in bold. Text that is outside the <h1> and </h1> tags will still be shown in the Georgia typeface.

A paragraph of text between the <p> and </p> tags is shown in the Georgia typeface but it isn’t necessary to state this in the CSS because the font-family characteristics are passed down from the <body> style. However it has been given new characteristics for text alignment and is therefore shown in justified format. The style information cascades from one element down to another unless a new rule applies. The <div> and <span> tags can be added to the markup to give additional control over the styling of elements. Each HTML element or <div> or <span> tag can be assigned a unique identification as well as a class.

The designer must take great care to ensure that the style sheet follows the relevant specifications or unpredictable results will occur. For example the standards state that a background colour should also be assigned when giving an element a colour. Some characteristics should only be specified in a certain way and US-English is used for spelling certain words such as color and center.

CSS Standards

  • The first set of standards for CSS were published in December 1996 and are referred to as CSS Level 1 (CSS1).
  • CSS Level 2 was published as a recommendation in May 1998. With very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets.
  • CSS Level 2 Revision 1 (CSS 2.1) fixes errors in CSS2, removes poorly-supported features and adds already-implemented browser extensions to the specification. In June 2005 it was reverted to a working draft for further review.
  • CSS Level 2 Revision 2 (CSS 2.2) was published as a working draft in April 2016.
  • CSS Level 3 uses the CSS2.1 specification as its core, and is being developed module by module.

Browser Compatibility

Separating the content and markup from the presentation information are important aspects of web accessibility and standards compliance. However many web browsers and devices don’t follow the W3C CSS Specifications and a web page may not be presented in the way the designer intended. An experienced designer can work around many of the limitations but with over 3,000 different web browser versions in circulation it isn’t entirely practical to work around all the bugs.

Some web designers create web sites that will work in a popular web browser and then make it a requirement for using the site. Unfortunately this means that the design will have a limited shelf-live. When people buy a new PC or upgrade their existing equipment they are more likely to use a newer web browser. The number of people that can use this style of web site will decrease even further over time.

It is better to ensure that standards are followed as closely as possible and allow the web site to have a few graceful errors than it is to enforce software requirements. Of course it helps to avoid creating designs that are potentially problematic but if a heading looks bigger than the designer intended it’s not the end of the world.

The designer can validate the markup and validate the CSS to ensure that it follows the relevant standards. The majority of visitors will be able to access the web site and if they use a modern browser that is standards compliant they are unlikely to experience any serious problems. Many web sites now advocate using a modern browser such as Firefox but still leave the visitor to decide which browser they want to use. Over time more people will use a standards compliant browser and see the web site as the designer intended. The number of design issues will tend to decrease.