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).
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.
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
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
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
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.
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 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
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 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 in the submenu of the menu
2. the following window opens
3. click
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
7. this list of preview browsers now appears in the submenu of the 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 in the submenu of the menu
2. the following window opens
3. click
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
7. this list of preview documents now appears in the submenu of the 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 submenu of the 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
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
2a. choose 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 in the popup menu. The familiar Open dialog box opens. Locate the background image and click .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.
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.
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.
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 we will learn about text, setting a default style for the page, as well as setting up headings.
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
}
