In this lesson
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 also hide all the images to reduce bandwidth whilst the media=”audio” can define the volume, stress, richness, voice-family and audible cues before or after an element. For a full description of the aural properties available see http://www.w3.org/TR/CSS2/aural.html.
Stylesheets for Internet Explorer 6
Early versions of Microsoft's Internet Explorer have a number of "bugs" that make it difficult to produce a layout style that looks the same on Internet Explorer and more compliant browsers such as Firefox and Opera. Fortunately Microsoft introduced the idea of conditional commands that Internet explorer can recognise. These commands are placed in an HTML comment that most other browsers will ignore. An example is given below that loads a special stylesheet just for Internet Explorer version 6 and below.
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" href="css/ie6.css" />
<![endif]-->
By declaring this stylesheet in the <head> section, AFTER all the other styleheets have been declared, we can over-write any styles commands that give problems in Internet Explorer. This means that you can safely create compliant stylesheets that work correctly for compliant browsers such as Firefox. After testing the page you can then provide "fixes" that just affect Internet Explorer in the seperate stylesheet. In a few years time, when everyone is using compliant browsers, you can just delete the conditional link safe in the knowledge that you main stylesheet works on all browsers. More information is available from Elated http://www.elated.com/articles/internet-explorer-conditional-comments/
On the next page we shall take a quick look at how different style sheets can create entirely different looking pages from the same content.