 |
 |
The University of Nottingham Staff & Educational Development Unit |
Search suspended |
 |
|
Web forum > Resources > Page formatting using Stylesheets (CSS) | ||||||||||||||||||||||||||||
 | ||||||||||||||||||||||||||||
|
|
With stylesheets (CSS, or Cascading Stylesheets) you can separate the structure of a web document from its formatting; your HTML code is cleaner (no <font tags etc.) and the formatting instructions for visual browsers (such as Firefox and IE) are in the style sheet. This makes your pages more accessible to alternative browsers, such as screen-reading software.
How do they work
When you write web pages you use <H1> and <p> tags etc. to structure your document and the browser (Netscape or Internet Explorer) uses its own stylesheet to determine how to display these elements - <H1> is usually displayed in Times New Roman font, large font size etc.
One way to alter the formatting of your page is to use <font>
tags and attributes of <p> tags (align etc.) in your HTML
code. However, this leads to messy coding and a lot of work if you
want to change the pages. An alternative is to use your own stylesheets.
The browsers use your style declarations to format the <H1>
and <p> elements, rather than using their own default stylesheets.
You must use closing tags for <p> and <li> etc. or the
stylesheet will not work and you may not see anything on your page!
Adding styles to your web pages
You can use styles in your web documents in one of three different ways:
|
3. Inline style |
1. External (linked) stylesheet |
| 2. Embedded style sheet |
1. External Stylesheet
The web page refers to a separate file, the style sheet file,
where the formatting for the page is defined. This style sheet can
then be used by many web pages. In the href attribute of the <link>
tag you can use a relative or absolute link to identify the stylesheet
(just like regular links).
<link rel="stylesheet" href="shared/mystyles.css" type="text/css">
2. Embedded stylesheet
The styles to be used in the web page are defined within the head
of the document and are therefore only available to the current
document. This could be useful for styles exclusive to that document
(a home page for example).
The styles are defined within <style> tags. Comment tags (
<!-- and --> ) ensure older browsers do not display the contents
of the <style> tags.
<style type="text/css">
<!--
(style declarations in here)
-->
</style>
3. Inline Style
The style attribute of an HTML element is used to insert a style
directly within the tag. This is best used for single instances
of a particular style, otherwise you have all the same problems
as using <font> tags - messy code and lots to change if you
want to alter the formatting.
<p style="color:red" >
Stylesheet syntax
An external stylesheet is a text file (filename.css) containing a list of all your selectors with their declarations.
Types of selector
|
Using Stylesheets in Dreamweaver 4 & MX
From the Window menu, choose CSS Styles to open the CSS styles window. you can link to and create external stylesheets, and you can create and edit styles in external stylesheets or in embedded style sheets. If you want to edit and external stylesheet directly, Dreamweaver 4 users will need to open it in Notepad, MX users can edit the style sheet from within Dreamweaver.
To apply a style, select the element in the Dreamweaver editing window and click on the desired style in the CSS styles window.
Browser compatibility issues
Since IE & Netscape have released versions at differing times with respect to the announcement of the CSS1 and then CSS2 standards, it is hardly surprising that they will interpret your stylesheets differently. IE is more standards compliant, but you will need to test your pages in both browsers to account for undesigned effects!
Note how the background colour of a paragraph behaves differently in a simple page that uses an external stylesheet, when viewed in Netscape (v4.7) and in IE (v6.0), in our browser difference example.
Rules in conflict
Inheritance
When elements are nested (e.g. all your elements within the <body>
tag, or a <td> tag inside the <table> tag) the inner
element inherits definitions set for outer element. The 2 main browsers
(Internet Explorer & Netscape) use different models to describe
the relationship between elements (forms, tables links etc.) in
your document, and so inheritance of styles works differently in
the 2 browsers.
Why cascading?
If you are using more than one style definition for an element (e.g.
an external stylesheet and an inline style for a <p> tag),
the one nearest the element will take precedence.
Specificity
You can overwrite inherited styles. By specifically declaring a
style for an element, you override any inherited style that conflicts
with it.
Accessibility matters
CSS was originally designed to separate structure from formatting, partly with the intention of improving accessibility by allowing different stylesheets for different browsers (text, speech, braille etc.). However, some of the styles make it easier to restrict the ways in which your page can be viewed. For example, when specifying font-size you can use a number of units to set the value. Absolute values (e.g. point size or pixel) prevent the user from changing the text size through their browser, relative values (e.g. ems or %) don't impose this restriction. Although it is tempting to control your display, remember that you are making your pages inaccessible to some users; this now contravenes the University's legal obligation to provide equal access.
The key Guidelines and Checkpoints (paraphrased) from the W3C's WAI (Web Accessibility Initiative) are:
- 3. Use markup and stylesheets and do so properly
- 3.1 Avoid using images to represent text - use text and CSS
- 3.3 Use stylesheets to control layout and presentation
- 3.4 Use relative rather than absolute units for property values
- 6. Ensure pages with new technologies transform gracefully in
older browsers
- 6.1 Organise pages so that they can be read without style sheets
Some examples of CSS
Firstly, look at the straightforward HTML file with no stylesheet
information in it. You will see it displayed using your browser's
default stylesheet (unless you have changed it, of course):
Simple HTML file
Now look at the same file when it includes a line that refers to
a separate stylesheet file:
Referring to arial-red stylesheet
Referring to arial-blue
stylesheet
Referring to arial-green
stylesheet
Referring to arial-bw stylesheet
(black and white)
Referring to times-bw stylesheet
(black and white)
If you want to use the stylesheets yourself, or to save a copy
to study, please help yourself (right-click to save a copy):
arial-red stylesheet file
arial-blue stylesheet file
arial-green stylesheet file
arial-bw stylesheet file
times-bw stylesheet file
|
|
|
|
| |