Guide to using stylesheets (CSS)
Cascading Style Sheets (CSS) are a simple mechanism for adding styles, such as
fonts, colours and spacing, to web pages. They can improve accessibility, as
they separate content from presentation, allowing users the option
to override style sheet settings with personal viewing preferences (eg bigger
font sizes, different colours, etc).
This page lists some of the key elements used in constructing CSS both for
conventional browsers and for users of assistive
technology.
Contents of this page:
See elsewhere: Accessibility
techniques | Effective web design
Introduction to stylesheets
Stylesheet syntax
It is best to think of a stylesheet as a set of rules controlling
the presentation of your web page. Each rule is made up of a selector,
usually an HTML element such as BODY, P, or H2, and the style to be applied to
the selector.
Each HTML element has selections of properties (also known as attributes)
which may be defined for it. Assigning a value to each of these properties
describes how the selector should be presented, eg:
selector { property: value }
Multiple style declarations for a single selector may be separated by a
semicolon as in this example:
P { font-size: x-small; color: #FFFFFF }
In order to decrease repetitious statements within style sheets, grouping of
selectors and declarations is allowed. For example, all of the headings in a
document could be given identical declarations through a grouping:
H1, H2, H3, H4 { color: #FF0000; font-family: Arial; font-weight:
600 }
Stylesheet Classes
A simple selector can have different classes, thus allowing the
same element to have different styles. For example, an author may wish to
display ordinary paragraphed text in a different colour depending on its
position on the page:
P.header { color: #808080 }
P.footer { color: #663300 }
To make use of a class with its HTML element when you are working in
an
HTML code view of your web page, to make use of the style example given
above, the code would need to read:
<P CLASS="header">This is text written in the head of my
web page</P>
<P CLASS="footer">This is text written in the footer of my
web page</P>
To make use of a class working in FrontPage Page view use the left-hand
drop-down selector on the Formatting Toolbar (usually set to Normal),
to apply a class to highlighted
text. Providing you are using an external stylesheet, the classes it defines
will appear at the bottom of the drop down selector's list, making them easy to
apply without entering the HTML code view.
Classes may also be declared in the stylesheet without an associated element, just prefixed by
a full-stop (.), eg:
.makebolder { font-weight: 800 }
This type of class can then be called upon by any appropriate HTML element
(in this case any element containing text), eg:
<P CLASS="makebolder">Your text here</P>
<TD CLASS="makebolder">Your text here</TD>
<H4 CLASS="makebolder">Your text here</H4>
<A HREF="link.htm"
CLASS="makebolder">Your text
here</A>
[top of page]
Linking style rules to a web page
There are two main ways of linking these style rules to your HTML documents.
Method One: Use the <STYLE> element.
Use HTML's <STYLE> element. This element is placed in the document
HEAD, and it contains the style rules for the page, eg:
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>
Method Two: Use an external stylesheet
An external style sheet is ideal when a style is to be applied to several
pages. The look of an entire site can be changed by simply changing one file. An external style sheet may be linked to an HTML document through HTML's
<LINK> element placed in the document HEAD:
<LINK REL=Stylesheet HREF="stylesheet.css" TYPE="text/css"
>
The <LINK> element also supports the MEDIA attribute, for which you
can specify the type of media the stylesheet should be applied to, eg:
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css"
MEDIA=aural>
<LINK REL=StyleSheet HREF="print.css" TYPE="text/css"
MEDIA=print>
[top of page]
Testing your stylesheet
One you have set up your desired styles and applied them to your web page, it
is very important to test it using a variety of browsers. What
looks great previewed in FrontPage, or running in Internet Explorer 7, may
look extremely different, or even unreadable in Netscape 4.7, for example; or a
highly decorative image-based site, may be extremely disappointing when accessed
using a text-only browser.
Additionally, accessing web pages from different computers can also have a
severe effect on the look of a page. For example, it is worth bearing in
mind that font sizes can often appear smaller on a Macintosh computer, and
colours can appear much lighter.
Note: If you are uncertain how to test your pages in different
browsers, or do not have access to a machine (or machines) with the necessary
software installed, Web and Learning Technology has
the necessary technologies available and will be happy to advise University web
authors on testing, or
to check their web pages for them.
[top of page]
Common stylesheet elements and values
| Style |
Function |
Values |
Example |
| Font-family |
Specifies a font to use in a
class. Can be used to specify more than one font by using commas. |
Any font type or name. |
Font-family:
Verdana, Arial |
| Font-size |
Tells a
web browser how large to
display a font. |
xx-small, x-small, small, medium,
large, x-large, xx-large, larger, smaller, and values as percentages, eg:
125%. |
Font-size: x-large |
| Font-style |
Specifies a style to be used with
a font. |
Can be used with normal, italic,
and oblique. |
Font-style: italic |
| Font-weight |
Tells a
web browser to display a
font with a specific "bold" setting. |
Can be used with bold, bolder,
lighter, and numeric values 100-900. |
Font-weight: bolder |
| Text-transform |
Allows for text to be set with
either capitalize, uppercase, or lowercase. |
Uppercase, lowercase, capitalize. |
Text-transform: uppercase |
| Text-decoration |
Tells a
web browser to display
text with either an underline, overline, a line-through, none, or will
cause the text to blink. |
Used with underline, overline,
line-through, blink, and none. |
Text-decoration:
overline |
| Text-align |
Tells a
web browser how to align
text used in a document. |
Used with left, center, right, and
justify. |
Text-Align: left |
| Text-indent |
Tells a
web browser how much to
indent specified text. |
Can be used with points, pixels,
inches, cm, mm, and other units of measure. |
Text-Indent: 40 |
| Letter-spacing |
Specifies a fixed amount of space
to be used between letters. |
Can be used with points, pixels,
inches, cm, mm, and other units of measure. |
Letter-spacing: normal |
| Word-spacing |
Specifies a fixed amount of space
to be used between words. |
Can be used with points, pixels,
inches, cm, mm, and other units of measure. |
Word-spacing: normal |
| Color |
Tells a
web browser to display a
specific colour when used with a specific property. |
Mostly used with the font classes. |
Color: #FFFFFF
and
Color:
white |
| Background-color |
Tells a
web browser to display a
specific colour for the background of a specific object. |
Can be used with many different
items, such as fonts and tables. |
Background-color: green
and
Background-color: #00CC33 |
| Background-image |
Tells a
web browser to display a
specific image (or no image) for the background. |
Can be used with background-color. |
Background-image:
url(background.gif) |
| Background-repeat |
Used with background-image. Tells
a web browser if a background image should be repeated, and if so, how it
should be repeated. |
Used with repeat, no-repeat,
repeat-x, and repeat-y. |
Background-repeat: repeat-x |
| Background-attachment |
Used with background-image. Tells
a web browser if a background image should be fixed or scroll when a
document is scrolled. |
Scroll or fixed. |
Background-attachment: scroll
and
Background-attachment: fixed |
| Background-position |
Used with background-image. Tells
a web browser where a background image should be placed within the
document. |
Can be used with left, right,
center, or a numerical value. Must be used twice to specify an X and Y
coordinate. |
Background-position: center center
or
Background-position: right right
or
Background-position: 50% 50% |
| Width |
Used to determine the width of
items such as tables. |
Can be used with points,
pixels, inches, cm, mm, and other units of measure. Can also be used with
auto. |
Width: auto |
| Height |
Used to determine the height of
items such as tables. |
Can be used with points, pixels,
inches, cm, mm, and other units of measure. Can also be used with
auto. |
Height: 100% |
| Padding: left, right, top, and
bottom |
Used to add padding to a table or
other objects in a document. |
Can be used with points, pixels,
inches, cm, mm, and other units of measure. |
Padding-left:
2pt
Padding-right: 5pt
Padding-top: 10px
Padding-bottom: 12% |
| Margin: left, right, top, and
bottom |
Used to determine margins of a
document or items in a document. |
Can be used with points, pixels,
inches, cm, mm, and other units of measure. |
Margin-top: 10px
Margin-bottom: 50%
Margin-left: 10pt
Margin-right: 8cm |
| Border-color |
Used to determine the border color
of a table. Must be used with four colors for border. |
Determines color in the following
order: TOP, RIGHT, BOTTOM, and LEFT |
border-color: #CCFF66 #66FF00
#33CC00 #009933 |
| Border-style |
Tells a
web browser how
borders should be styled. |
Can be used with none, dotted,
dashed, solid, double, groove, ridge, inset, and outset |
Border-style: dashed
|
| Border width: top, bottom, left,
and right. |
Used to determine the border width
of a table. |
Can be used with thin, medium,
thick, auto, and points, pixels, inches, cm, mm, and other units of
measure. |
Border-top-width:
thin
Border-left-width: auto
Border-right-width: 10px
Border-bottom-width: thick |
| List-style-type |
Tells the
web browser to
display a specific kind of bullet for bulleted lists. By default, a web
browser will display a bullet list using circles. |
If list-style-type is used, you
have the option of using the following items instead: disc, circle,
square, decimal, lower-cased roman numeral, upper-cased roman numeral,
lower-cased alpha, and upper cased alpha. The option of having no bullets
in a list is available as well. |
List-style-type:
square
List-style-type:
lower-roman
List-style-type: upper-alpha
List-style-type: none
List-style-type:
disc |
| List-style-image |
Like the list-style-type, but
allows a browser to display a specific image. |
Any image specified. |
List-style-image: url(mypic.gif) |
| Cursor |
Tells the
web browser to display a
specific cursor when the mouse is over a class. |
Can be used with hand, crosshair,
text, wait, default, help, e-resize, ne-resize, n-resize, nw-resize,
w-resize, sw-resize, s-resize, se-resize, and auto. |
Cursor: hand |
[top of page]
Aural stylesheets
Aural properties of a stylesheet provide information to non-sighted users and
voice-browser users much in the same way fonts provide visual information, eg:
H1 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("ping.au")
}
The
most common elements required are:
| Element |
Function |
| 'volume' |
controls the volume of spoken text. |
| 'speak' |
controls whether content will be spoken and, if so, whether it will be
spelled or spoken as words. |
|
'pause', 'pause-before', and 'pause-after' |
control pauses before and after
content is spoken. This allows users to separate content for better
comprehension. |
|
'cue', 'cue-before', and 'cue-after' |
specify a sound to be played before and
after content, which can be valuable for orientation (much like a visual icon). |
|
'play-during' |
controls background sounds while an element is rendered (much like
a background image). |
|
'azimuth' and 'elevation' |
provide dimension to sound, which allows users to
distinguish voices, for example. |
|
'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', and 'richness' |
control the quality of spoken content. By varying these properties for different
elements, users can fine-tune how content is presented aurally. |
|
'speak-punctuation' and 'speak-numeral' |
control how numbers and punctuation are
spoken, which has an effect on the quality of the experience of aural browsing. |
| 'speak-header' |
describes how table header information
is to be spoken before a table cell. |
Where to find out more