Introduction to style sheets |
As we have already seen, HTML provides some ways of formatting
documents, such as the <I>
element (italics).
However, HTML is more a way of defining the logical structure of a
document than a set of formatting commands. Many of the formatting commands
in HTML have been deprecated in the latest standard: that is,
they are considered obsolescent and undesirable, and users are encouraged
to use alternative methods. One reason for this is that such
formatting commands (noatbly <FONT>
) cause problems
for "non-text agents" - i.e. special web-browsers such as those for
disabled people (e.g. a browser for blind users that reads the page aloud).
Instead of using HTML formatting, the use of style sheets is encouraged.
The idea of a style sheet is that content and style will be defined
separately. For example, suppose we want headings to appear in blue
type. Instead of using <FONT COLOR="blue">
for
each heading, we define a style declaring that all headings are to be
blue.
Another reason for using style sheets is that they permit some forms of formatting which are not possible at all using pure HTML formatting.
The normal type of style sheet is a system called "Cascading Style Sheets" or CSS. The basic standard for this is CSS1. An extended version of this has been agreed, called CSS2. The full specifications can be found at the W3C site: http://www.w3.org/TR/REC-CSS1 for CSS1, and http://www.w3.org/TR/REC-CSS2/ for CSS2.
There is one main problem with CSS: many browsers still do not support it fully. That is, they will ignore, or render incorrectly, some or all CSS formatting. The recent versions of Internet Explorer and Netscape manage most of CSS1. We therefore recommend that any essential formatting should be done with the old HTML tags, while CSS1 is used for less essential formatting. At the present time CSS2 formatting will not be seen at all by most of your readers. Even the W3C's own development browser Amaya does not fully support CSS1. (Source: W3C site, "Cascading Style Sheets", <http://www.w3.org/Style/CSS/>, dated 7 Sept 2000, accessed 13 September 2000.)
In CSS we set out a series of rules which will be applied.
Each rule consists of a selector and a declaration. The
selector,
which will normally be an HTML element, tells us what the style
is to apply to; the declaration tells us what the style to be applied
actually is. For example, suppose we want all H1 headings to be blue:
H1 {color: blue}
"H1" is the selector and "color: blue" is the declaration.
A style can be defined at one of three levels.
@import
notation. See the full CSS specification for details.)
You can use all three of these together. In-line style overrides embedded style, which overrides external style. Thus we could have a general rule for the site as a whole that headings are blue, while making headings in a particular document green, and making one special heading red.
The code for linking to a style sheet is as follows:
<LINK REL="stylesheet" TYPE="text/css" HREF="style1.css">
This must appear in the <HEAD> part of the HTML document.
Within the style sheet file ("style1.css" in this example)
style is set out as in embedded style sheets (see below).
Rules are set out as in the following example:
<STYLE TYPE="text/css">
<!--
H1 {color: blue}
H2 {
color: blue;
font-weight: bold;
font-size: 12pt;
font-family: helvetica;
}
H3 {
background-color: #FFFFCC;
color: red;
}
-->
</STYLE>
Notice the following points:
Also notice that the whole style sheet is enclosed not only within <STYLE TYPE="text/css"> ... </STYLE> tags but within <!-- --> HTML comment tags. The reason for this is that unless the comment tags are used, old browsers which do not recognize the <STYLE> tag will display the style sheet on screen as if it were text. If you want to add a comment within a style sheet, use the C-style /* */ notation.
<H1 STYLE="color: blue; background-color: yellow">Heading text</H1>
Notice that the way the code is written is slightly different. This is because
the information has to be written inside an HTML attribute-value (i.e. the
value of the attribute STYLE). The declaration in an embedded style sheet would
have been
H1 {color: blue; background-color: yellow}
In this case, the selector (H1) is already defined since the style is being declared
as an attribute of the H1 element. Curly brackets are not used; instead, the
declaration "color: blue; background-color: yellow" is written as the value
of the attribute STYLE.
Another example:
<P STYLE="color: red">This paragraph will be in red text.</P>
The following is what the above code produces:
This paragraph will be in red text.
If the paragraph is in red text, then your browser is interpreting CSS correctly. If not, then your browser is not reading CSS. Old browers do not read CSS.
To save space, style information can be grouped. For example, instead of making separate rules for H1, H2, H3, H4, H5, and H6 we can make one rule for all of them:
H1, H2, H3, H4, H5, H6
{
color: blue
}
We could then add an additional rule for H1:
H1 {background-color: yellow}
Now all headings are blue. H1 also has a special rule that it has
a yellow background.
We can also group values, e.g.
H1 { font: bold 12pt/14pt helvetica }
is equivalent to
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
but this requires care, as the order must be correct.
Suppose we want to specify a style for some headings but not for
others. E.g. suppose we want some H2 headings to be white on red.
We declare this style not for H2 in general, but for a special class
of H2 which we will call "whiteonred":
H2.whiteonred
{
color: white;
background-color: red;
}
(Notice that there is a dot (full stop) between "H2" and the class-name we have invented.) This will not affect ordinary H2 headings. To indicate that an H2 heading belongs to this class we write it (in the HTML) thus:
<H2 class="whiteonred">This heading will be white on red</H2>
Similar to class but slightly different is the use of an ID identifier, as in the HTML code
<H2 ID="special">This heading will have unique formatting</H2>
The difference is that whereas a class applies to a number of items, an ID is unique - it is used to refer to this specific element only. There are a number of other uses for such IDs in HTML, but for style we can use them to declare a unique style thus:
H2#special
{
color: #FFFFF0;
background-color: #009900;
font-family: arial;
}
Notice that in this case we use a hash mark # between the H2 and the ID name.
Note also that whereas a class can apply to a number of elements, an ID must apply to only one. That is, there can only be any number of<P CLASS="thisclass">
in a document, but only one
<P ID="thisid">
.
Suppose we want list items in ordered lists to have a coloured background,
but not other list items such as those in unordered lists. I.e.,
the style is dependent on context. If we declare a style for LI in
general it would apply to all LI list items. Instead we write:
OL LI
{
background-color: yellow;
}
This means that the style for a LI inside an OL is as given. Notice that there is a space between the first and second parts of the selector. It is possible to combine this with classes, e.g.
OL.redtype
{
color: red;
}
OL.redtype LI
{
background-color: yellow;
}
The first part of the code creates a class on OL which has red coloured text. The second part declares that LI list items inside an OL of that class will have yellow background.
Another example:
UL LI {color: blue}
UL UL LI {color: red}
List items inside an UL will be in blue. But if they are inside a UL which is itself nested inside a UL then the LI will be red.
To explain what "pseudo" means here, consider the "first-line" pseudo-element. This is used to format the first line of (e.g.) a paragraph, regardless of how short or long that line happens to be - which will vary according to screen size etc. The first line is a "pseudo-element" since it is not a structural element in HTML, like a paragraph or a list item, but is merely a typographical construct created in a particular rendering of the HTML document.
Only the latest browsers show pseudo-elements, so it is not safe to use them for anything important.
The first-line pseudo-element is used as follows:
P:first-line
{
color: #FF0000;
}
Notice that for a pseudo-element we use a colon between the selector and the pseudo-element name. The above code would make all paragraphs have the first line in red.
There is also a first-letter pseudo-class which formats the first letter of a paragraph etc.
There are three special pseudo-classes for anchors:
These are used to set the colour and appearance of an anchor, according to
whether it is an as yet unvisited link, a visited link, or an active link
(i.e. one which is being clicked right now). These are intended to replace the
deprecated LINK, VLINK and ALINK attributes of BODY. There is also a "hover"
pseudo-class, e.g. a:hover
, which declares formatting
for when the mouse cursor is over the link. However this is CSS2,
not CSS1, and hence will only work in the newest browsers.
This paragraph includes style sheet formatting to illustrate these pseudo-elements, so you can see if your browser is rendering them. The first line is declared as "color: red" and the first letter is declared to be large and green-colored. There is a link:hover declaration of "background-color: #ff00ff" so if you hold the cursor over this link its background should change colour. If these effects are missing, your browser is not rendering the relevant CSS formatting.
DIV and SPAN are dummy HTML elements: they are mere containers. They are used to apply style to a chunk of content in a convenient way. DIV contains block-level elements, whereas SPAN contains in-line elements and text. E.g.
<DIV STYLE="color: red">
<P>This is a paragraph. It will appear in red type.</P>
<P>This is another paragraph, also in red.</P>
</DIV>
<P>But this paragraph is normal.</P>
In the above example, the <DIV> .. </DIV> creates a block which is then formatted by the STYLE attribute. Thus all paragraphs, lists etc. within it are formatted at once. This isoften combined with CLASS to create a set of formatting combinations which can be readily applied to parts of a document.
SPAN works similarly, but is used for in-line content. E.g.
<P>In the middle of this paragraph, we
want <SPAN STYLE="color: red; font-weight: bold">these words
only</SPAN>
to appear in bold red type.</P>
Again, this is often used with CLASS. SPAN elements can be nested.
We strongly recommend that you download and save the full CSS1 specification from the W3C which will give you the complete list and all the rules. However, here are a few of the most common properties used in style sheets. Note that some of the formatting properties (such as "padding") assume a "box model" which is shown below, and with which you should familiarize yourself:
_______________________________________ | | | margin (transparent) | | _________________________________ | | | | | | | border | | | | ___________________________ | | | | | | | | | | | padding | | | | | | _____________________ | | | | | | | | | | | | | | | content | | | | | | | |_____________________| | | | | | |___________________________| | | | |_________________________________| | |_______________________________________|
Note that the names are in American spelling.
Property | Description | Value | Example |
---|---|---|---|
color | Colour of the text, not the background | any colour (RGB or name) | color: #FF0000 |
background-color | Colour of the background | any colour (RGB or name) | background-color: red |
padding | Amount of space padding (see box model) | Length (can be specified in several ways - e.g. pixels) | padding: 5px |
text-align | Is the text to be aligned left or right, etc. | "left", "right", "center" or "justify" | text-align: center |
font-family | The face of the font, e.g. "Times" | Specific (e.g. "times") and generic (e.g. "sans-serif") fonts are listed in order of preference | font-family: times, helvetica, sans-serif |
font-weight | The heaviness of the font, i.e. how bold | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | font-weight: bolder |
Here are some examples of CSS formatting. In each case we will show first the code, and then what it produces. If no formatting is produced, then your browser is not rendering CSS. If it appears with some formatting but not as described, then you may be using an old browser which renders CSS incorrectly (see bugs below).
<h3 style="color: green; background-color: black">A Heading which should be green on black</h3>> A Heading which should be green on black |
<p>The <span style="color: #660000; background-color: #FFFF00">WORDS IN CAPITALS</span> are formatted by a "span"</p> The WORDS IN CAPITALS are formatted by a "span" |
<div style="background-color: #FFFF66; border: solid medium #FF0000"> This is a paragraph; next is a list:
all inside a DIV |
Also, you can have a look at the HTML for this page by using the "View Source" option. You will see that a number of formatting features have been defined by an embedded style sheet in the HEAD element.
As noted above, only the newer browsers support CSS - that is, produce on screen what the CSS is supposed to produce. This in itself would not be a huge problem - we can use HTML formatting for essential formatting, so that any browser will produce something readable, and CSS for the nice decoration. Alas, it is not so simple. Some browsers include faulty support for CSS. That is, they neither ignore the CSS altogether nor render it correctly. This can have disastrous consequences. For example, suppose a style sheet states that something is to be yellow text on blue background. If the browser gets this right, then that is fine. If it ignores it altogether, the text will be normal black-on-white. But suppose the browser makes the text yellow but does not make the background blue. Then we have yellow text on white, which is unreadable.
This problem actually occurred with one of our pages. It was fine in Microsoft Internet Explorer 5 (good CSS support) and in Act9a (no CSS support). But it was unreadable in Internet Explorer 3.
A useful table showing which CSS features are incorrectly rendered by which browsers can be found at <http://www.richinstyle.com/bugs/table.html>. You will see in this table that Internet Explorer 3 is the worst offender.
The World-Wide-Web Consortium (know as "W3C") provides an on-line CSS validator, which you can use to see whether your CSS is correct. The easiest way to use this is to enter the URI of a page on a site, and the validator will give you a report. The validator is at http://jigsaw.w3.org/css-validator.
The "Valid CSS" icon indicates that the page has been passed by this validator. If your page is passed by the validator, then you can display the icon. (The last time we tested, this page gets some "warnings" but passed as valid.)
Copyright © 2000 University of Botswana History Department
Last updated 25 March 2002