Web Accessibility Center

Cascading Style Sheets (CSS) - If You Use It, It Will Transform.

Find out how to eliminate deprecated and inaccessible design and formatting elements from your pages using style sheets. Designers who haven't used a style sheet in the past will get a quick introduction to redefining HTML elements, using relative sizing, and creating on-the-fly styles for all your formatting needs.

Resources

W3Schools "Introduction to CSS": An excellent tutorial for learning style sheets. Features a simple "try it out" hands-on approach that allows you to create and test various style sheet definitions without coding a web page.

Big Baer Explains CSS Font-Size:A short tutorial on controlling font sizes using css.

Popular Style Codes: An outline of some of the most common used selectors and declarations in css.

WAC Guide: Cascading Style Sheets

Wednesday, May 26, 2004

This outline adapted from the W3Schools online tutorial: Introduction to CSS. The WAC recommends this tutorial as an excellent introduction and reference for CSS authors. View the tutorial online at: http://www.w3schools.com/css/css_intro.asp.

What is CSS?

CSS stands for Cascading Style Sheets. Styles define how to display HTML elements and are normally stored in a separate file (###.css) and linked to the HTML document that uses those styles. Multiple style definitions will cascade into one, allowing users to customize their experience with your web pages without interfering with the content.

Why was CSS Created?

HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium responsible for standardizing HTML - created STYLES in addition to HTML 4.0.

Forms of Styles.

Cascading styles can be created in several different forms.

In-line styles: appears inside the HTML element. For example to center some text, you may choose to use the “align” formatting attribute inside the P element.

<p align=”center”>This text will appear centered.</p>

Internal styles: style definitions are stored in the HTML document, located between the HEAD element tags. For example, if you wanted the body of your page to have a blue background and your text to be yellow, you might have a style that looks like this:

<head>

<title>Page with embedded styles</title>

<style>

<!--

body { color: #FFFF00; background-color: #000080 }

-->

</style>

</head>

External Style Sheet: style definitions are stored in a separate CSS file (name.css). In the HEAD element of the style sheet is linked to the document.

<head>

</head>

Browser Default: no styles are defined. Pages will use the settings customized by the user or the default settings included with the browser software.

Cascading Order

Cascading style sheets are designed to work together so that styles layer on top of each other. Thus, it is important to understand which style will write-over which other style and which will simply add-to the existing styles.

Generally speaking we can say that all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number one has the highest priority:

Inline Style (inside HTML element).
Internal Style Sheet (inside the <head> tag).
External Style Sheet.
Browser default.

So, an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser (a default value).

See an example of how cascading order works [css-order.htm].

Formatting Your Style Sheet

Standard Format of a Style Definition.

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon and surrounded by curly braces:

body {color: black}

If the value is multiple words, put quotes around the value:

p {font-family: "sans serif"}

also valid: p {font-family: sans-serif}

Note: If you wish to specify more than one property, you should separate each property with a semi-colon. The example below shows how to define a center aligned paragraph, with a red text color:

p {text-align:center; color:red}

Multiple Style Definitions Per Element.

You can combine style definitions for a particular HTML element in one style entry:
Option One (separate):

body {font-family: Verdana, Arial, Helvetica}

body {background-color: rgb(255,255,204)}

body {color: rgb(102,102,51)}

Option Two (combined):

body

{

font-family: Verdana, Arial, Helvetica;

background-color: rgb(255,255,204);

color: rgb(102,102,51);

}

The semi-colon separates each definition attribute, and the braces enclose all the definitions related to that element.

Using Relative Sizes

To insure your formatting transforms gracefully across screen resolutions and sizes, and to allow the greatest flexibility for users, you should use only relatively defined sizes and spacing in all your CSS definitions. There are many forms of relative sizing and it does not significantly effect the result if you choose one or the other (for instance using ems v percents). However, you should be consistent throughout your style sheet to insure the size relationships are equitable.

Get more information about using relative sizing wisely [Big Baer Article].

W3C Relative Sizes
(most portable and flexible)

em: the 'font-size' of the relevant font
ex: the 'x-height' of the relevant font
px: pixels, relative to the viewing device

NOTE: If you use a relative size font, it is important to specify the primary or base font-family on which all of these sizes are based.

W3C Absolute Sizes
(only use if user output device is known – e.g. everyone in computer lab)

in: inches -- 1 inch is equal to 2.54 centimeters.
cm: centimeters
mm: millimeters
pt: points -- the points used by CSS2 are equal to 1/72th of an inch.
pc: picas -- 1 pica is equal to 12 points.

Redefining HTML v Using Class

You can define styles for any HTML tag (H1, P, TABLE, IMG, and etc.). This definition overrides the default browser preferences whenever the tag appears. The advantage of using existing HTML elements is that if the style sheet does not work or is not available, the browser will still know how to handle the content.

Alternately, you can create customized “classes” of styles that can be applied to your content either using the HTML element or using a SPAN tag. Here are some examples:

<!--

body { color: #FFFF00; background-color: #000080; text-align: left}

.center { text-align: center }

h2.right { text-align: right }

p.white {

color: #FFFFFF;

font-weight: bold;

}

-->

</style>

<P>This text would appear left justified.</P>

<P class=center>This text would appear centered<BR>

(p class=center).</P>

<H1 class=center>This text would appear centered as well <BR>

(h1 class=center). </H1>

<H2 class=right>This text would appear right justified<BR>

(h2 class=right)

.</H2>

<H1 class=right>This text would appear left justified<BR>

(h1 class=right -- invalid class for h1).</H1>

<P>This text would appear in the default color.

<P class="white"> But this

text would appear bold and white<BR>

(p class=white).

<H2>Can you tell why this text doesn't appear white?<BR>

(h2 class=white)</H2>

See style sheets in action [default.htm].

OSU Web Accessibility Center (WAC)
1760 Neil Ave 150 Pomerene Hall Columbus, Ohio 43210
Phone: (614) 292-1760 Fax: (614) 292-4190 E-mail: webaccess@osu.edu
For questions or problems with this site, including incompatibility with assistive technology, email the WAC Webmaster.

Our Partners
ADA Coordinator's Office	OSU College of Education	Office for Disability Services	T.E.L.R.

The Ohio State University

Web Accessibility Center