Menu

 

web logo

WEB DESIGN SKILLS

Module Study Guide
2008/09

Copyright © Thames Valley University 2008

Session 8

Style sheets

On this page:

Cascading Style Sheets (CSS)

A style sheet is a set of commands that control the style of a web document. Use of a style sheet gives designers more control over the look of their web pages without affecting the structure. Style sheets define typographic control and page layout such as fonts, margins, spacing, colour etc.

Use of style sheets can ensure quicker download time for your pages and complete control of all design attributes across multiple pages.

However due to lack of web standards the support for style sheets is not consistent across browsers. No browser yet supports all of the CSS capabilities.

Types of style sheets

Style sheets can be placed in three different places:

We shall be creating an external Style Sheet in this exercise. As a separate document to your HTML pages it will need to be attached to them and STORED IN YOUR ROOT FOLDER.

Advantages to using style sheets

Tag definitions

A stylesheet allows you to redefine the appearance of standard HTML tag objects such as <p> (paragraph) or <h1> (heading1).

e.g. Suppose you want to set the appearance of all 'paragraph' text within your web pages. You could use a style-sheet definition such as:

p {
  font-family: arial;
  font-size: 100%;
  color: #ff0066;
  font-weight: bold;
}

Notice the use of curly brackets, colons and semi-colons, which must all be used as indicated here (newlines and indentation are optional). In this case all text within <p> and </p> tags would appear in 'Arial' font, 100% size (other text may be larger or smaller than this), of colour #ff0066 (red) and weight 'bold'.

There are other text attributes to which you can assign values:

You can apply this kind of style to any tag you want, although of course not all definitions would have any meaning - changing the font-size, for instance, of a <br> tag would not have any effect.

Classes

However, you may not want to alter the appearance of all the text covered by a certain tag, so for further control, stylesheets contain 'classes' which also have attributes to which you can assign different values.

e.g

.pink {
font-family: verdana;
font-size: 12px;
color: #550066;
font-weight: bold
}

This looks just like a tag definition, but instead of a tag we use a class name. The class name here is .pink (note the full stop before the name).

Now sections of text in the main HTML pages can be allocated to the class .pink in this way:

<div class="pink">
<p>A paragraph of text</p>
.....................
</div>
(no full stop here, but the class name is in quotes)

Here we have used the <div> tag to identify the section of text. This allows the use of other elements within the specified style, such as tables or lists.

For text of less than a paragraph:

<p>Ordinary text<span class="pink"> Pink text</span> More ordinary text

which looks like this:

Ordinary text Pink text More ordinary text

Notice that the CSS definitions go in the style sheet document, whilst the HTML codes go in the ordinary web pages. A single style sheet can be attached to many different web pages, thus making it easier to alter the appearance of all the pages in one go.

Link: See what a complete style sheet looks like.

Note: Although it is quite easy to set the font size of any text to a fixed value (e.g. font-size: 12px) it is not considered to be good design practice, as this means that the end user cannot alter the text size for their own convenience, making it bad news for viewers with a sight disability.

IDs

IDs are very much like classes, and work in much the same way. The differences are:

  1. In the style sheet, an ID is identified by a '#' symbol (a class is identified by a '.')
  2. In the HTML, the format is (for instance): <div id="mystyle1">
  3. In a single HTML page, a particular ID can only be used once, whereas a class can be used many times.

Creating and using an external style sheet using code

  1. Using an ordinary editor (or 'code view' in Dreamweaver) compose a style sheet in the format shown above. The style sheet should consist of a number of sections, each section having a 'selector' (a tag name, a class name or an ID) and a number of definitions enclosed within curly brackets {}.
  2. Save this document in your root folder with a filename ending .css (e.g. 'mystyle.css')
  3. Attach this style sheet to the HTML page(s) by including the following line in the 'head' of every HTML page in which you want to use those styles: <link rel="stylesheet" href="mystyle.css" type="text/css">

Creating and attaching an external style sheet using Dreamweaver

  1. Go to 'File>New' and choose 'Page from sample > CSS Style Sheet >Basic: Verdana' from the selection.
  2. Click Create. You will be presented with a basic Style Sheet. Notice it is in code view as Style Sheets only contain information relating to the appearance of your page elements.
  3. Save the file as 'test.css'.
  4. Now you need to attach the Style Sheet to your html pages. Open an HTML page that you have already created. If the 'CSS' panel is not already open, open it by selecting 'Window>CSS Styles'. Click on the arrow in the top right of this panel arrow and choose 'Attach Style Sheet'.
  5. Browse for the file 'test.css' and click 'OK'. The style sheet is now attached to this page.
  6. Click on the top right arrow again arrow and select 'New..'. This gives you a box like this:

    new css style
    Against 'Selector Type' choose 'Tag' and in the 'Tag:' box at the top select a tag which you have used in your web page, such as <p> or <h2>. The 'Define in' box should have the name of your CSS file ('test.css').

  7. When you 'OK' this box you will get another one like this:

    definition box

    This allows you to set parameters for many of the attributes associated with this tag, so type in or select the values you want, then click 'Apply' to see the effect this will have temporarily, and/or 'OK' to permanently modify your style sheet. You can select any of the categories from the list on the left. You do not have to fill in every box - if you don't want to alter a particular parameter, just leave it blank.
  8. Create a new custom class within the style sheet by again clicking the arrow in the top right arrow and choosing 'New... '. This time choose 'Class' and give the style a name such as '.blue' (names here must begin with a full stop). Define the parameters for your custom style in the same way as before.
  9. Once your custom styles have been created you can then apply them to the text on your html pages anywhere on your site. This can be done via the drop-down 'Style' menu in the Properties panel, or in Code View.
  10. To edit a class simply select the class you wish to edit in the 'CSS Styles' panel and click on 'Edit' from the arrow in the top right arrow .

Cascading

Because styles can be defined in different places (see above) there can be conflicts when the definitions of a particular entity are differently defined in those places. For example, suppose the external style sheet says that all paragraph text is in 'Arial' font, but in the head of a document, it says that it should be in 'Times' font. Which would it be?

The 'cascading' rule says that in circumstances such as these, the most local definition applies. In other words, in the example above the definition in the document head would take effect, because that is more 'local' than the external style sheet definition. This makes it possible to make generic site-wide definitions which can be overwritten locally if necessary.

Exercises

  1. Construct a style sheet which defines the appearance of several tags which you have used in your pages (e.g. <p>, <h1>, <li>, <td>). Make sure the text for each tag is different in some way, perhaps with a different colour, or font family, or text size.
  2. Save the sheet in your root folder using a simple name and the file suffix .css. (NB: if you are using a text editor, make sure you save the file in 'text-only' format).
  3. Attach the style sheet to one or more of your pages using either of the methods shown above.
  4. View the page(s) in a browser and see the effect of the style sheet on the appearance.
  5. Alter the style sheet without changing the actual HTML page. Re-save the style sheet and view the page again. See how the appearance of the page has changed even though nothing in it has been modified.

Links

Next session >

Maintained by Alan Rolfe

Additional material by Lucie Hernandez

Last updated October 29, 2008

link to top