Motive [Home].Glossary.
Updated 4 Jun 2006
Home > Glossary > Definition

Guides

The Motive Web Design Glossary

Cascading Style Sheets (CSS), stylesheet, styles

On this page

The Cascading Style Sheets Specification (CSS) is a computer language that is used to write formatting instructions (rules). These rules tell a web browser how webpage content should ‘look’— in terms of:

layout
position, alignment, width, height, etc.
style
typeface, font-weight, colour, border, etc.

As an example, all level-one headings can be set in the typeface Verdana and coloured red with the rule:

h1 { font-family: Verdana; color: red; }

The CSS language was created to meet the aesthetic demands placed on HTML: the computer language used to author webpages.

The CSS language specification(s) set out how rules can be written and should be implemented by web browser developers.

Stylesheet

CSS rules are added to a webpage either by writing the code directly into the <head> of the webpage HTML, or by linking to a separate file.

A separate file containing only CSS rules is commonly referred to as a ‘stylesheet’, and has the extension .css (dot-C-S-S).

The benefits of CSS

Separation of content and presentation
CSS rules can be provided in a file that is separate to the (content) HTML. If all pages link to this centralised CSS file, then the look of a website can more easily be updated. For example, the colour or size of all level-one headings can be changed by updating a single CSS rule.
Smaller webpage file sizes
As the code required to style content can be removed from individual webpages, the size of each webpage file is reduced. Depending on the benchmarks, file sizes may be reduced by up to 60%.
Improved webpage download speed
Once a stylesheet has been downloaded, it is typically stored on the user’s computer (cached). For each subsequent webpage viewed, only the HTML needs to be downloaded.
Improved rendering speed
Once a webpage has been downloaded, a browser processes the underlying code to determine how content should be displayed. This process is referred to as ‘rendering’. The time a webpage takes to render is affected by the complexity of the code the browser receives. Using CSS to control the layout of a page typically simplifies the the code structure making it ‘easier’ (faster) for the browser to render.
Streamlined maintenance
As less code is required for each webpage, both the likelihood of coding errors and time required to add content to a website are reduced.
Changing presentation for different devices
The CSS specification enables different rules to be used depending on the device used to access the web. For example, a different set of rules can be used to reformat a webpage for printing or viewing on a mobile phone.
Accessibility
Additional features can be added to webpages that provide ‘hooks’ for assistive technologies such as screen readers. (A screen reader is a program that reads aloud the interface to computer programs and computer-based content, including webpages). CSS-based techniques can be used to provide such hooks without impacting on the experience of mainstream users. For example additional headings can be added to content that will only be ‘seen’ by a screen reader. These headings can be used to provide additional contextual information that would otherwise be communicated by the visual design. As an example, the list of glossary terms at the foot of each glossary entry is preceded by the invisible heading: ‘Glossary Trivia’.
Table-less layout
Prior to the introduction of CSS, multi-column layouts could only be created using HTML tables. Unfortunately, at a code-level, a table used for layout purposes cannot be differentiated from a table used to mark-up tabular data (such as statistics). This has the greatest impact on technologies that ‘read’ webpage content at a code, rather than visual, level. If the meaning of content is affected by how it has been marked-up, then using a table for layout purposes has the potential to change the meaning of the content. Utilising CSS-positioning, layout can be achieved without compromising content structure or meaning.
Customisation
Advanced web browsing software enables the user to easily override the author-specified styles. Although admittedly requiring the user to know more about the mechanics of the web, content display can be completely customised.
Search engine optimisation
Search engines may assign greater relevance to content found first in the code, and/or limit the amount of content indexed on each page to a certain character-count. If content blocks are positioned using CSS, the order of webpage code does not need to match the display order. For example, the code for global navigation bars positioned at the top of the screen may come after the content in the source.

CSS Specifications: A moving target

As use of the web has changed, additional presentational requirements have been identified.

For example a webpage may be viewed using hand-held devices with screen sizes and proportions that differ to those of a computer monitor.

To keep pace with these and other changes in the way the web is used, the CSS specification continues to be revised and improved by the World Wide Web Consortium (W3C).

Each version of the language is referred to by a level number, with levels 1 and 2.1 implemented by commonly-used web browsers (as at publication).

CSS rules

CSS rules are commonly referred to as ‘styles’.

A CSS rule comprises a selector, and a property:value pair (declaration).

selector
how content can be selected for styling
For example, the selector for a level-one heading element is h1; selectors include element name, ID and class.
property
how a presentation attribute of an element can be targeted
For example, the font-family property refers to the typeface content should be set in.
value
the values permitted for each property.
For example, a colour can be set using a keyword: red, green, blue; or a hexadecimal code: #f00, #0f0, #00f.

A rule may contain a number of property:value pairs.

selector { property: value; } \_declaration_/ \___________ rule __________/

For example:

p { color: #c60; } .warning { color: #900; font-weight: bold; }

Selector Property Value Sample HTML Code Result
p (element) color #c60 <p>Sample text.</p> Sample text.
.warning (class) color #900 <h3 class="warning">Sample text</h3>

Sample text

Style inheritance

…the ‘cascading’ in ‘Cascading Style Sheets’

Rather than write separate rules for each HTML element, global/parent rules can be used to style all nested/child elements. For example, in the structure of an HTML document, text elements are nested inside of a <body> element. The typeface for all text elements can be set by styling the <body> element:

body { font-family: Verdana; }

The ability to style an element based on its position in the document structure is the ‘cascading’ in ‘Cascading Style Sheets’.

Specificity

The rule defined last, applied to the element closest to the content, or that uses the most specific selector, ‘wins’.

A rule can be redefined by a subsequent rule

p { color: #000; font-weight: bold; } strong { font-weight: bold; } p { colour: #c60; }

In the above stylesheet, the paragraph text colour is first set to black (#000) but then changed to orange (#c60) by the subsequent rule.

A rule applied to a child element will override a rule applied to a parent element

a:link { text-decoration: none; colour #900; } p { color: #000; }

<p> Sample text including a <a href="index.html">hyperlink</a>. </p>

Although the color of the p element is set after the a element rule in the stylesheet, the rule applied to the a element overrides the rule applied to the parent p element. The text ‘hyperlink’ will be red (#900).

A rule with a more specific selector will override a rule with a less specific selector

#content p { colour #900; } p { color: #000; }

<div id="content"> <p> Sample text. </p> </div>

Although the last rule in the stylesheet sets the colour of p elements to black (#000), the selector that includes the parent div is more specific. The text ‘Sample text’ will be red (#900).

Default styles

Unstyled HTML elements are displayed by a browser according to rules devised by the software developer. For example, text marked up as an <h1> is often displayed as 24-point, bold in the typeface Times New Roman. Default styles also affect the space around elements.

Browser support for CSS

The CSS standard has been implemented, with varying degrees of compliance, since the release of Internet Explorer version 3 and Netscape Navigator version 4 browsers (circa 1998).

The variation in compliance with the specification(s) is often the Achilles’ heel of CSS. As newer, more compliant, browsers are released, webpage designers/developers rely more-and-more on CSS to achieve their designs. This can result in a webpage that has been authored to the CSS specification, but if viewed using a non-compliant browser appears to be ‘broken’.

For more see: Western Civilization Software’s CSS browser compatibility charts.

Related terms: authoring, browser, elements, tags, hack/filter, HTML-text, markup, quirks mode, web standards.

References and further reading

Glossary A-Z
 

Motive Web Design Glossary Trivia