Cascading Style Sheets
Using Style Sheets
for Consistency || Linked v Embedded Styles ||
Guidelines for Style Sheets ||
Using Relative Sizes || Color and Links ||
Spacing and Positioning
|| Creating User-Friendly Style Sheets||
CSS Guides and Tutorials
||Tutorial
Contents
Using Style Sheets for Consistency.
 |
Create a style of presentation that is consistent across pages. (WCAG 14.3) |
If used properly, Cascading Style Sheets (CSS) can help you create a uniform "look" for your site by defining font type, colors, and backgrounds site-wide.
The design benefits of using Cascading Style Sheets include:
- more precise control than ever before over layout, fonts, colors, backgrounds, and other typographical effects;
- a way to update the appearance and formatting of an unlimited number of pages by changing just one document;
- compatibility across browsers and platforms; and
- less code, smaller pages, and faster downloads.
Linked v Embedded Styles.
|
|
Use linked style sheets rather than embedded styles. (WCAG 14.3) |
Style sheets can be employed using either embedded styles, where the style definitions are inserted between the HEAD element on each page, or linked styles, where a CSS file is created and linked to the pages using those styles.
Embedded Styles.
Here is an example of how to create embedded styles:
Embedded styles look and work just like a linked style. However, it is more difficult to keep the site consistent, because changes to one style class must be changed on each page of the site. Also, embedded styles are more likely to override user preferences in the browser.
Linked Styles.
Using linked styles involves two steps. First, you must create your styles in a separate CSS file (designated by using the .css extension in your file name -- e.g., wacstyles.css, mystyles.css, prettytext.css). CSS files can be created using a wizard in your web editor (e.g. Dreamweaver or FrontPage) or you can create it in a plain text editor, like NotePad. The style definitions look the same as the embedded styles.
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000099;
text-decoration: underline;
font-weight: bold;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
text-decoration: underline;
font-weight:bold;
}
a:hover {
color:#FFFFFF;
background-color: #000066;
}
Next, you must link the CSS file to each of your pages using this style. Let's say this file is called "mystyles.css." In order to link this style sheet to a particular page in your site, your HTML would look like this:
By using the link method, changes made to styles in the mystyles.css file will update all the linked pages in the site, without changing any of the code in those pages. This is particularly helpful when changing the color scheme of a site and helps insure a consistent look across pages.
Guidelines for Using Style Sheets.
 |
Use style sheets to control layout and presentation. (WCAG 3.3) |
Specifically covered within this guideline:
1. Use the CSS 'font' property instead of the HTML FONT element to control font styles. -- WCAG CSS Techniques #8 Text Formatting and Position.
- Incorrect method:
Here is some <font color="#000066">blue text</font>. - CSS method:
<style type="text/css">.bluetext { color: #000066; }</style>
Here is some <span class="bluetxt"> blue text </span>. - CSS Example: This text is colored using CSS.
Rationale: Unlike CSS formatting the FONT element in HTML is more likely to override user-selected formatting in the browser. For instance, if the FONT element is used to set the size of text on a page, the user cannot use the magnification settings in the VIEW menus of either Internet Explorer or Netscape Navigator to increase the text size.
2. Do not use incorrect HTML elements for formatting (e.g., using BLOCKQUOTE to indent, rather than creating an indent style) -- WCAG CSS Techniques #8 Text Formatting and Position.
- Incorrect method:
<p><blockquote> This text is indented. </blockquote></p> - CSS method:
<style type="text/css"> .indent {margin-left: 5%; margin-right: 5%;}</style>
<p class="indent">This text is indented.</p> - CSS Example: This text is indented using CSS.
Rationale: Special HTML elements were created to identify special text and help assistive technology fully render the meaning of the text. For instance, whenever text is surrounded by the BLOCKQUOTE tag, JAWS screen-reader identifies the text as a "quote." Consider then, how JAWS would render this text:
<p> I want you to focus on the text below, so I'm
going to indent it:
<blockquote>
<blockquote>
<blockquote>
This is the text I want to emphasize. </blockquote></blockquote></blockquote></p>
JAWS would read this text as:
"I want you to focus on the text below, so I'm going to indent it. Quote. Quote.
Quote. This is the text I want to emphasize. End quote. End quote. End quote."
If much of the text on the page is indented in this fashion, you can image how annoying this technique can become for users of assistive technology.
3. Use style sheets to style text rather than representing text in images.-- WCAG CSS Techniques #7 Text Instead of Images.
- Incorrect method:
- CSS method:
<style type="text/css">.redlargetext { font-family: Garamond, Arial, Helvetica, sans-serif; font-size: x-large; font-weight: bold; color: #CC3300;}</style>
<p class="redlargetext">Red Large Text</p> - CSS Example: This text appears larger and a different color using CSS.
Rationale: Text represented in images cannot be enlarged using built-in magnification tools in most browsers. And, if image-text is magnified, it typically becomes pixilated and unreadable. CSS formatted text will transform gracefully, regardless of the users screen or window resolution.
Using Relative Sizes.
|
|
Use relative rather than absolute units in markup language attribute values and style sheet property values. (WCAG 3.4) |
The goal of CSS is to make pages that transform gracefully regardless of users screen-size, resolution, or magnification. When designers set font and element sizes to absolute values, text and elements on the page cannot not "resize" to fit the needs of the user. Relative sizes create a relational system of size. For instance, if Header 2 text is set to be bigger than paragraph text and Header 1 text is set to be bigger than Header 2 text, the user can set the paragraph text to whatever size (i.e., 12 point, 14 point, or 20 point) and both the Heading 1 and Heading 2 text will increase in relation to that size. In the same way, defining the menu section of a page to take up 30% of the page and content 70%, versus 150 pixel width menu and 650 pixel width content, insures that users with smaller screens and lower resolutions will still see a page that is primarily content.
1. Use the "em" unit to set font sizes.
Named after the letter "M", the em unit has a long-standing tradition in typography where it has been used to measure horizontal widths. For example, the long dash often found in American texts (--) is known as "em-dash" since it historically has had the same width as the letter "M". Its narrower cousin (-), often found in European texts is similarly referred to as "en-dash".
In CSS, the em unit is a general unit for measuring lengths, for example page margins and padding around elements. You can use it both horizontally and vertically. 1 em unit equates to a 10 point font.
Here is an example of a style defined using em:
H1 { font-size: 2em }
For more information on using the em unit of measure, see W3C's The amazing em unit and other best practices. For an excellent explanation of the pitfalls and considerations when using ems, see "Big Baer Explains CSS Font-Size" from Bigbaer.com.
2. Use relative length units and percentages.
CSS allows you to use relative units even in absolute positioning. Thus, you
may position an image to be offset by "3em" from the top of its containing
element. This is a fixed distance, but is relative to the current font size, so
it scales nicely.
Only use absolute length units when the physical characteristics of the output
medium are known, such as bitmap images.
For more good ideas for formatting your text, see W3C's Quality Assurance
article: "Care with Font Size."
Color and Links.
Most web browsers use different colors to identify visited links (links to pages the user has seen before) and unvisited links (links to pages the user has not seen before). The generally accepted standard typically displays unvisited links in blue and visited links in either purple or red. In most cases, it is best to use this standardized color scheme to identify links on your pages. When non-standard link colors are used, users lose the ability to quickly identify which parts of the site they have already seen and which parts they have yet to visit.
If you must
change use an alternate color scheme for your links, consider using a close
variation on the blue/purple standard. Otherwise, help make it clear to
visitors which is which by using a dark/strong color for unvisited links and
lighter/faded color for visited links. In this way, you de-emphasize visited
links - places where visitors already know about and possibly did not find the
information they were looking for.
Use these CSS properties to specify colors:
- 'color', for foreground text color.
- 'background-color', for background colors.
- 'border-color', 'outline-color' for border colors.
- For link colors, refer to the :link, :visited, and :active pseudo-classes.
Spacing and Positioning.
Spacing and positioning continues to be a difficult probelm for those conscious of accessibility issues. many users have developed strategies for adding spaces and indents,such as manually entering spaces ( ) or incorrectly using the BLOCKQUOTE tag, that creates an acceptable visual result, but also makes for less-accessible content. Creating and applying appropriate CSS definitions can help avoid this problem.
Use CSS properties to create space between elements, words, and letters:
- 'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Each of these properties allows users to control spacing without adding additional spaces. Use 'text-align: center' instead of the deprecated CENTER element.
- 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'. With these properties, authors can create space on four sides of an element's content instead of adding non-breaking spaces ( ) or BLOCKQUOTE.
Creating User-Friendly Style Sheets.
   |
Documents shall be organized so they are readable without requiring an associated style sheet. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document. (508.d) (WCAG 6.1) (M.W.A.S. 5) |
One of the accessibility advantages to using style sheets is the option for the user to either override your style sheet with his/her own or to turn-off style sheets altogether and render the page in settings established by the user in the browser. Thus, the user can turn off color, change the default color scheme to increase contrast, or even change the font type and size to a more readable setting.
To insure your site can accommodate these user preferences, you need to test
your site both with and without style sheets. When style sheets are removed does
all the text appear in the correct order on the page? Does the page maintain its
hierarchy with headings indicating the structure of the document? Do the default
colors interfere with the readability of the text?
Quick Tip: the free, online validator,
Bobby automatically turns off style
sheets when evaluating your site. Run your page through Bobby to see what it
will look like without your style sheet.
Developers should pay special attention when using CSS to create content, such as background images, lists, or content properties and when using CSS for layout. It should also be noted that most of these CSS techniques are not yet fully supported by browser technology. Be sure to test any CSS2 techniques in multiple browsers and versions.
CSS Guides and Tutorials
Want to learn how to create and use Cascading Style Sheets? Check out these WAC recommended online tutorials and guides:
- W3Schools CSS tutorial (highly recommended),
- Web Design Group CSS tutorial series,
- RichInStyle.com CSS2 tutorial,
- Mulder's Stylesheets Tutorial from WebMonkey.
Once you have created your CSS, you can use the
W3C's CSS Validation Service
to insure it meets WCAG standards.