Brought to you by Style Master

5. Background Reading

We have a nice, pristine style sheet, itching for some rules.

Now what?

One of the first things we do when we set up the appearance of a web page, is to set the background. For whatever reason, the default color of a web page background is a ghastly gray (your opinion as to its aesthetic qualities may vary).
We need to get rid of that straight away (otherwise the first visitor to your site will think it was developed in 1994).

Our First Rule

A style sheet is simply a set of rules, which determine which elements are to be affected by the rule, and define how any affected elements should appear.

Creating the Selector

In this case, we want to affect the appearance of the <BODY> element of the page. When creating a rule, we first need to create a selector that specifies which elements the rule applies to.

For simple elements, that is, any HTML elements, such as <BODY>, <P>, <A>, <LI>, and so on, the selector is very simple, just the name of the element, without its angled brackets.

So,

the selector for <P> elements is P
the selector for <A> elements is A
the selector for <LI> elements is LI

pop quiz 1

What is the selector for the <BODY>?

To create a statement, and its selector

1. choose New Statement... from the Statement window

2. in the dialog box which opens, click Create

3.the HTML element selector opens

4. From the list of HTML elements, choose the one you want to select with this rule

5. click Create

The window will close, and your style sheet will look like this

In the window you can see a single statement in the list on the left hand side. Because it is selected, its selector, and properties appear on the right hand side of the window. At the moment there are no properties defined. We are about to create some.

Creating the Properties

Now, once we've created a selector for the body using BODY, we need to finish off the rule by telling the browser how elements selected by the statement should be drawn.
In this case we want to set the background color of the body to a particular value.

Welcome to one of the hard parts of style sheets: prodigious feats of memory. There are literally dozens of properties, which can take all kinds of different values. In the last part of these lessons, I have added some links to various resources that can make life a little easier. Among those are some web based references to all the properties and their possible values. However, with Style Master, you don't have to remember the dozens of properties, and their many possible values, as these are all arranged into eight related "editors", which are floating windows (or "palettes").

In the case of background color, the property is called background-color. Let's give the background a nice aqua color, say #66CC99

To do this, we'll open the Background Editor.

To open an editor

1. choose the name of the editor you want to open from the Properties menu

2. the editor opens as a floating window

The background editor looks like this

To set a background color

1. enter a color value in the color field

Here we are using the familiar hexadecimal system, as you may be familiar with from HTML. With style sheets you can also use RGB values, and keywords.

To choose a keyword, or to change to using rgb

1. click the popup menu to the right of the color field, and choose one of the listed keywords, or choose rgb

You can also edit the color using the a color picker.

To edit the color using the color picker

1. click the colored square to the right of the color field

The color picker for the Macintosh, or Windows opens.

2. pick the color you want, and click OK

3. the color you picked will now show in the colored square, and the value you chose (translated to hexadecimal) will appear in the color field

And now you have created your first rule.

Now its time to preview. With Style Master, you can preview a style sheet in any HTML document in any browser, with just one click of the mouse.

Previewing

Previewing in Style Master takes just a little to setup, but once done, is more than useful.

There are two steps in setting up previewing. First set up the preview browsers, then set up your preview documents. You can edit these any time you like.

To set up the preview browsers

1. choose Edit Preview Browser List in the Preview in Browser... submenu of the Preview menu

2. the following window opens

3. click Add Browser

4. Locate the browser you want to add to the list of preview browsers

5. repeat this process until you have added all the preview browsers you'd like to preview in

6. click OK

7. this list of preview browsers now appears in the Preview in Browser... submenu of the Preview menu. To preview in a particular one, just choose its name in this menu. The current preview browsers appear with a tick next to their names

Now we want to set up our preview document or documents.

To set up preview documents

1. choose Edit Preview Document List in the Preview Using Document... submenu of the Preview menu

2. the following window opens

3. click Add Document

4. Locate the document you want to add to the list of preview documents

5. repeat this process until you have added all the documents you'd like to preview using

6. click OK

7. this list of preview documents now appears in the Preview Using Document... submenu of the Preview menu. To preview using a particular one, just choose its name in this menu. The current preview document appears with a tick next to its name

Now we've set up previewing, we need to preview the style sheet in the chosen browsers using the chosen document.

To preview a style sheet in the chosen browsers using the chosen document

1. click the preview button in the toolbar (windows) or launcher (Macintosh).On the Macintosh, this will preview the currently selected preview document in any of the selected preview browsers that are currently running. On Windows, this will launch the selected preview browsers, and previews the selected preview document in them.

To launch a chosen preview browser inside Style Master on the Macintosh

1. choose the name of the browser you want to open from the Preview in Browser... submenu of the Preview menu

Behold a colored background? If not, check the following:

Do you have at least a version 4 browser?
Is your style sheet in exactly the same folder as the HTML file, and has exactly the name core-styles.css

Background Images

Let's get a little fancier, adding a background image. We are also going to see the first example of how style sheets give you more than plain HTML when it comes to style.

First we'll specify a background image, then look at these additional features.

Our BODY already has a single property, we simply want to add to this list. The background-image property lets us specify the image behind an HTML element (that's right, elements other than the body can have backgrounds too).

To add additional properties to a statement is no problem. We just set up those properties using the various editors. We'll stay with the background editor.

To set the background image

1. click the popup menu to the right of the filed labeled Image:

2a. choose url if you know the url of the image you want to be the background, then enter the url in the text field

2b. to more easily choose the background image, choose locate... in the popup menu. The familiar Open dialog box opens. Locate the background image and click Open.Style Master will place the link from the style sheet to this image in the text field.

Before we go on, let me note that there is serious bug in Navigator 4, which means that relative URLs are treated as relative to the page (HTML file) not the style sheet. For the background image to appear in both Navigator 4 and Explorer 4, the HTML File and the style sheet file must be in the same folder, at the same level. This seriously limits the value of this property. Alternatively, you can use an absolute url (of the form http:// etc.)

Save your style sheet, then preview your page in a browser.

We've now created a rule that gives the body of a page a background color, and a background image. Let's take a look at these new style sheets features I alluded to above.

Beyond Tiling

With HTML, background images tile, that is, repeat vertically and horizontally down and across a page.
Style sheets let you have much more control over how a background image is displayed.

With style sheets, you can specify whether a background image appears once, or tiles - either like traditional background images, or only horizontally or vertically.
The background-repeat property determines which of these options takes place. background-repeat can take the values no-repeat, repeat, repeat-x, repeat-y.

The image can also appear in a particular position on the page (say centered, or fixed in the bottom left of the page). Tiling can also begin at a specified location, not simply in the top left hand corner.
The background-position property determines where the image is positioned.

background-position is a little more complicated, but for the simple purpose of creating a centered image we can use the keyword value center.

Exercise 1

Now, try creating additional properties that specify how the background image of our body will repeat, and be positioned. At then end of the lesson, you'll find an example answer.

Special Note
background-position is not yet supported by Netscape Navigator. The image is always in the top left hand corner of the page. background-repeat does work however.

Both these properties work in Internet Explorer 4.

Save your style sheet, and preview your handy work in a browser.

What have we learnt this hour?

The most important thing we learnt was how to make rules. A rule comprises a selector (in this case we learnt about HTML element selectors, soon we will learn about others), and a set of properties.
Along the way, we learnt about the background properties available in style sheets.
And we got an important reminder that all is not perfect in the world of style sheet support in the major browsers.

Next

Next we will learn about text, setting a default style for the page, as well as setting up headings.

Answer to Exercise 1

Here is my go, where I place the background image in the center of the page, and don't repeat it. This gives a nice watermarking effect.

BODY {
background-color: #66CC99;
background-image: url(../gifs/body-bg.gif)
background-repeat: no-repeat;
background-position: center
}

 

The House of Style