jsEditor - Style Sheets: The Images/Colours Tab

Aim: To learn about the Images/Colours Tab of the Style Sheet Dialogue.

Choose the Images/Colours tab in the Style Sheet Maker.

You will notice that the first line has the title Background Image, has a button named URL and an Add button.

Choose BODY as the selector and add it to the editor. Ensure the cursor in inside the curly brackets. Choose an URL and click on the Add button. I made an image up and got the following.

If the style sheet has never been saved, then you will get an error if you try to enter an URL. This is because in order to calculate the relative path, the current file needs a name. If you save the style sheet or use an existing style sheet, then you can preview it in the Viewer. I got the following in my style sheet:

BODY { background-image: url("myImage.gif"); }

My image file is enclosed in quotes.

This is a convenient way to enter the background-image for every page in your site which is linked to the style sheet. You can also use background image with other selectors to which it is relevant.

You can also choose whether you want your image to scroll or remain staionary. Choose fixed from the drop-down menu and add this declaration. The image will remain still and the text scrolls over the image.

BODY { background-image: url("myImage.gif"); background-attachment: fixed;}

The second row contains 4 items:

  1. Property
  2. Colour
  3. A Colour button, and
  4. An Add button.

These should be quite familiar by now. The property drop-down menu has a choice of 'Color' and 'background-color'. If you click the Colour button then you can choose a colour for the Colour box. And finally, the Add button adds this declaration. Choose BODY as the selector, and enter it into the style sheet. Ensuring that the cursor is just before the curly brackets for the Selector BODY, choose a background-color, and add it to the style sheet.

I choose blue.

Now choose Color from the drop-down menu. Choose a colour for this, and add this declaration to the style sheet. I chose red as my colour, and my style sheet looked like this:

BODY { background-color: #0000FF; color: #FF0000;}

View the effects by pressing the Preview button. I saw a blue page with red text.



You have learned:

Next: The Borders Tab

Style Sheets