Introduction to style sheets

Contents

• What are style sheets?
  • Problems with CSS
• Basics of CSS
  • Rules
  • Declarations
  • Types of style sheets: external, embedded and in-line
• How declarations are made
  • External style sheets:
  • Embedded style:
  • In-line style
• Grouping rules
• Style using classes, identifiers and context
  • Class as selector
  • ID as selector
  • Contextual selectors
  • Pseudo-classes and pseudo-elements
• Using DIV and SPAN
• Some common style properties
• Some examples
• Bugs, or why CSS does not always work as expected
• The W3C on-line CSS validator

Back to contents

What are 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.

Back to contents

Problems with CSS

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.)

Back to contents

Basics of CSS

Back to contents

Rules

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.

Back to contents

Declarations

Back to contents

Style sheets: external, embedded and in-line:

A style can be defined at one of three levels.

• An external style sheet is a separate file listing style information. It is linked to the HTML document by a <LINK> element (see below). The point of this is that a single style sheet can be used by a large number of documents. If we decide that we want our headings to be red instead of blue, we need only change the one style sheet to alter headings in the whole site.
  (Note: there is in fact a system for multiple style sheets, stored as files, to be "imported" using a @import notation. See the full CSS specification for details.)
  The problem with external style sheets is that they slow down the download, as the style sheet has to be fetched separately from the page.
• An embedded style sheet is a listing of style information at the start of the HTML document. The style will apply to the whole document, but not to any other documents.
• In-line style is style information defined for a single element. This is used when we want to declare some style specifically for one place which is not intended for the rest of the document.

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.

Back to contents

How declarations are made

Back to contents

External style sheets:

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).

Back to contents

Embedded style:

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>

• Each rule consists of a selector (H1, H2, etc.) followed by a declaration which is contained in curly brackets {}.
• There is no punctuation except white space between rules.
• Within each declaration, there can be one or more property-value pairs.
• In each pair, the property is separated from its value by a colon.
• Pairs are separated from each other by semi-colons.

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.

Back to contents

In-line style

<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.

Back to contents

Grouping rules

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.

Back to contents

Style using classes, identifiers and context

Back to contents

Class as selector

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>

Back to contents

ID as selector

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.

Back to contents

Contextual selectors

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.

Back to contents

Pseudo-classes and pseudo-elements

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:

• A:link
• A:visited
• A:active

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.

Back to contents

Using DIV and SPAN

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.

Back to contents

Some common style properties

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.

Back to contents

Some examples

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).

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.

Back to contents

Bugs

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.

Back to contents

The W3C on-line validator

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.)

Back to top

Copyright © 2000 University of Botswana History Department
Last updated 25 March 2002