Creating a style sheet

Style sheets are simple ASCII text files that only contain styling instructions for the browser. The style sheet is usually ignored by assistive software because it controls the visual effect only. Special style sheets for audio devices can be created to control volume and accent, but for these lessons we shall concentrate only on the common style sheets used for screen output.

The style sheet below will produce the simple layout we want. You will see this in operation later in the lesson. The file has been annotated to help with maintenance. Notes are surrounded by the /* and */ characters so that the browser knows to ignore them.

/* CSS file demo2.css - to put navigation menu at left of page */

/* set basic font style and background colour */
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: x-small;
color: #000000
background-color: #FFFFFF;
/* Set banner area height and background image */
#banner {
height: 7em;
background-color: #E0E0E0;
background-image: url(banner_grey_3.gif);
/* define content area, leave room for menu on left */
#content {
margin-left: 12em;
background-color: #E0E0E0;
/* define the look for heading level 2 */
#content h2 {
color: #333333;
text-indent: -1em;
#content p {
font-size: x-small;
font-style: italic;
/* define menu area so it fits beside content area */
#menu {
color: #FFFFFF;
background-color: #979797;
position: absolute;
top: 7em;
width: 11em;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
/* hide the menu heading from visual users */
#menu h2 {
display: none;
/* define the list element to use arrow image for the bullet */
#menu ul {
list-style-image: url(arrow_right.gif);
/* define the look of the navigation link text */
#menu a:link {
font-size: medium;
font-weight: bold;
color: #000066;
/* set roll-over colours for mouse and keyboard users */
#menu a:hover { color: #333333; }
#menu a:active { color: #333333; }


Linking the style sheet to the HTML page

The style sheet is linked to the HTML page by a hyperlink included in the <head> section of the page. In this case we would insert the following code just before we close the head section with </head>
<link href="/demo2.css" rel="stylesheet" type="text/css" />

Now whenever the page is loaded into a browser such as Internet Explorer the computer will automatically load the style sheet as well.

It is possible to link to more than one style sheet, in which case the styles defined in the additional style sheets will over-write any similarly named styles in the earlier sheets. This is why they are called "cascading" style sheets. The last style definition for a particular element is the one that the browser will apply.

It is also desirable to provide separate style sheets for different media. By default the stylesheet is applied to any media that the reader is using, (media="all") but you can (should) provide separate style sheets for screen, print, handheld, tv and even audio devices. The media="print" stylesheet might hide the navigation bars and use Times New Roman for the main text font face. The media="handheld" might hide all the images to reduce bandwidth.