Principles of friendly web pages
This is one of a series of pages that present the basic principles of using HTML to create a user-friendly web site. This page discusses the use of cascading style sheets (CSS).
Principles of friendly web pages
The structure of an
HTML
document
Style sheets
How can style sheets improve legibility?
Creating margins without style sheets
Producing a white background without style sheets
Increasing the line spacing without style sheets
Further problems with <table> ... </table> tags
Calling a style sheet from an
HTML
file
Inspecting the style sheet for a page found on the web
Refinements: using additional features
Further refinements: improving accessibility
Trouble-shooting: why doesn’t it come out as expected?
Cascading style sheets, or CSS, offer an extension to HTML that for a long time I thought too advanced for this guide. Indeed, for a long time I did not use them at all on this site, because the very poor implementation of style sheets on current popular browsers made it difficult to obtain satisfactory results.
However, style sheets can improve the legibility of web pages very considerably and without great difficulty, even though achieving similar effects with other techniques may be difficult or even impossible. For this reason even an elementary guide ought not to ignore style sheets. Moreover, modifying a mature site that contains many pages so as to use style sheets requires a lot of tedious work, nearly all of which can be avoided by designing a site so that it uses them from the outset.
In other words, if you have come to the point where you would like to use <table> tags
or some other technique to trick
the browser into formatting your page, you should think
carefully first about whether
CSS
might not be better both in the short and long terms. Getting
<table> tags to work the way you want is not easy and you’ll need to spend a lot of time
writing the
HTML
and checking that it works correctly. This time could probably be more
profitably spent in learning to use
CSS.
The word cascading
in the name is not important for getting started. It refers to the fact
that
CSS
is designed in such a way that style information can be combined from various sources, and
rules defined in one place can be overruled by ones given elsewhere. This is briefly discussed
in a later page of this guide.
If you look at almost any well produced printed material you will find that it differs from a typical web page in some important respects:
If all of these problems could be solved without the use of style sheets the case for describing them in an elementary guide would be very weak. In fact, as we shall now see, creating margins requires improper use of HTML tags, creating a white background is quite easy, and changing the space between lines cannot be done at all in a satisfactory way. After looking at each case in turn, we shall consider two further objections to misusing <table> ... </table> tags.
There are two techniques that can be used to create artificial margins, both of them using HTML tags for purposes for which they were never intended. The simpler is to enclose the whole of the passage for which margins are required in <blockquote> ... </blockquote> tags. The effect of this may be illustrated by repeating this paragraph with such tags:
There are two techniques that can be used to create artificial margins, both of them using HTML tags for purposes for which they were never intended. The simpler is to enclose the whole of the passage for which margins are required in <blockquote> ... </blockquote> tags. The effect of this may be illustrated by repeating this paragraph with such tags.
With most browsers this produces wide margins, but it is deprecated because it uses a tag for a purpose quite different from that for which it was designed (which was, as the name suggests, to mark off quoted material). Another objection to formatting with <blockquote> ... </blockquote> tags is that it provides no flexibility: you cannot define the particular width of margins that you want.
The other non-CSS method of producing margins is to treat the text as a table of three columns, the first and last columns being empty. For example, this paragraph could be formatted with the following code:
<table>
<tr>
<td width="50"></td>
<td width="400">The other non-CSS method of producing margins is to treat the
text as a table of three columns, the first and last columns being empty.
For example, this paragraph could be formatted with the following code:</td>
<td width="50"></td>
</tr>
</table>and the result is as follows:
| The other non-CSS method of producing margins is to treat the text as a table of three columns, the first and last columns being empty. For example, this paragraph could be formatted with the following code: |
This works, and it allows you to define whatever margins you want, but it is messy, and hence it is difficult to read and check the HTML , and, as with <blockquote> ... </blockquote> tags, it uses <table> ... </table> tags for something for which they were not designed. Where is the harm in this, as long as it works? The harm is that if you misuse tags you can have no certainty that they will always work the same in the future, and if a future browser becomes popular that handles these tags in ways that are perfectly appropriate for their intended functions but completely ridiculous when used for other functions you will have no grounds for complaint.
<table> ... </table> tags can also be used for setting background colours to whatever you like, and you can define an image to be repeated over the whole of the background of the page. If this is a uniform white or some other colour it will produce a uniform background. Thus this problem is quite easy to solve without using style sheets, though using <table> ... </table> tags is open to the general objection to using them for elements that are not tables.
I do not know of any way of increasing the space between lines (other than
using style sheets) that does not create
worse problems than it solves. Treating every line as a paragraph, with liberal use of <p> or
<br> tags, might seem to
work, but apart from the fact that it will widen the space by more than you probably want, it will
only work with the browser set exactly as you set it yourself (something you can never guarantee).
If the user defines a
different window width or a different font or font size then your page is likely to look a complete
mess. Look at this paragraph handled in
this way so that it looks more or less OK in my browser as it is set at the moment of
writing:
I do not know of any way of increasing the space between lines (other than using style sheets) that does
not create worse problems than it solves. Treating every line as a paragraph, with liberal use of
<p> or <br> tags, might seem to work, but apart from the fact that it will widen the space
by more than you probably want, it will only work with the browser set exactly as you set it yourself
(something you can never guarantee). If the user defines a different window width or a different
font or font size then your page is likely to look a complete mess. Look at this paragraph handled
in this way so that it looks more or less OK in my browser as it is set at the moment of
writing:
If this looks acceptable in your browser it will be surprising, and even if it does you can easily make it look a mess by changing your window dimensions by a small amount.
<table> ... </table> tags create some problems even when properly used to define real tables. The first of these is that the browser has to calculate the arrangement of all the elements in a table before it can display anything. This means that the user may spend a long time looking at a blank screen while waiting for the browser to receive a piece of information that it needs for the calculation. This should not be a great problem if the table is a real table and is not too large, but putting a large part of a page into a fake table is a major way of causing the page to load so slowly that the user goes somewhere else on the web rather than wait.
The second problem is that if you use <table> ... </table> tags for formatting you are quite likely to set the width of a table to a fixed number of pixels in order to achieve the desired effect, but if you do this you will ensure that the page looks right only at the particular width you have assumed: if the window is made narrower part of the page will be hidden; if it is made wider the extra width will be wasted as it will just contain empty space.
As we shall see, a far more elegant solution to all these problems is to use style sheets, at the same time solving other problems that have not been discussed and allowing many interesting effects to be achieved very easily. Nonetheless, it would be less than honest to say this without recognizing that some new problems arrive with style sheets, primarily because even several years after CSS was introduced the implementation in popular browsers is nowhere near perfect. Nonetheless, the worst problems arose with a browser that is now little used (Netscape 4), and most current browsers either ignore CSS entirely (which is perfectly correct: CSS is never more than a suggestion) or they render it in a way that may not be faultless but is at least intelligible.
In the rest of this page, therefore, I shall describe how to use style sheets to achieve the three points relating to legibility, and will briefly discuss the placing of images, but will not discuss other features in any detail.
The first step is to write a file, typically called style.css
, but you can put what you like
before the dot
as long as you obey the usual rules for naming files. This will consist of a set of lines that look
something like this:
body {
background: white;
}
p {
margin-left: 2em;
margin-right: 2em;
margin-top: 1em;
text-indent: 0em;
color: black;
background: white;
font-family: "New Century Schlbk", Garamond, serif;
line-height: 140%
}
h2 {
color: red;
font-family: Verdana, Arial, sans-serif;
font-size: 150%;
margin: 2em 2px 0 0;
text-align: center
}
h3 {
color: red;
font-family: Verdana, Arial, sans-serif;
font-size: 120%;
margin: 2em 2px 0 0;
text-align: center
}
ul, ol, dl {
font-family: "New Century Schlbk", Garamond, serif;
margin-left: 4em;
margin-right: 2em;
line-height: 130%
}
ul ul, ol ol, ul ol, ol ul{
margin-left: 1em;
margin-right: 0;
}
li {
margin: 0.3em 0 0 0;
line-height: 130%
}
If you use this file as it stands it will give reasonably satisfactory results, but you may want to make some simple changes to see what the different lines mean. If you do this, remember that each suggestion of how a particular tag is to be interpreted must be contained within curly brackets, and the separate items within a suggestion must be separated by semicolons. The line breaks are for legibility and are not required. If the name of a font contains more than one word it must be enclosed in double quotes (as "New Century Schlbk" in the example). When more than one font is listed they are shown in order of preference. Consider the following example:
p {
font-family: "New Century Schlbk", Garamond, serif;
}
This suggests that the browser should use New Century Schlbk if it is available, or Garamond if it is not, or any serif font (such as Times) if neither is available.
The CSS file should be saved and uploaded to your server in exactly the same place as you store your HTML files.
For an HTML file to use a style sheet stored in a file called style.css it needs to contain a line as follows within the <head> ... </head> section:
<link rel=StyleSheet href="style.css" type="text/css" media=all>The name after href should correspond to the actual name of the file. The rest of the line
should be left as it is. The style sheet then suggests to the browser how it
should interpret the various tags specified. Note the word suggests
: a style sheet is
not a
set of commands, and the suggestions may be ignored, if the browser is incapable of following
them, or if the user has disabled the use of style sheets or has defined a different style sheet
to take priority over what is specified in the
HTML
file.
If you see an effect used on the web that you wish to emulate, the first step is usually to use the View Source function of your browser to inspect the HTML. This is easy to do for the HTML, but once you have determined that a style sheet has been used and you have determined the name of the file by reading the <link> line, it is not obvious how to examine the file itself or open it with a text editor. The solutions vary according to the browser used.
With Internet Explorer, if you enter the complete URL (e.g. http://bip.cnrs-mrs.fr/bip10/style.css) into the Open URL window the browser will then download the CSS file and you can open it with any text editor.
One of the greatest difficulties with using style sheets is that some browsers interpret suggestions about placing images in ways that make little sense.
If the image you want to place is quite small then just put it in the
HTML
in the same way as
you would do in a page that didn’t use style sheets. This seems to work correctly most
of the time. For larger images there are
CSS
rules that are supposed to suggest how the image should float
with text around it. In my
experience these work so badly that they are best
avoided altogether until browsers
can be assumed to be capable of understanding the suggestions.
For a large image, therefore, it seems best to put it in a paragraph all by itself, and to minimize problems with deficient browsers it is helpful to enclose the image in <div> and <h4> tags, as in the following example:
<div align="center">
<h4>
<img src="images/ash100.gif" width="72" height="88" alt=" Example image ">
</h4>
</div>The <div> tag has not been discussed previously in this guide, as it is not needed in
elementary
HTML. Suffice it to say here that it marks a
division
of a page that is not a heading or
a paragraph but a kind of generic block, and that it can take attributes like align.
Although it seems hardly necessary to include both <div> and <h4> tags here, my experience is that some browsers will make errors unless both are present. This is of course an improper use of <h4> to mark something that is not a heading.