golivebasics.com home page

Page 1 - why css?
Page 2 - an internal style sheet; about fonts
Page 3 - define some elements; elements vs classes
Page 4 - more elements; some classes
Page 5 - turn an internal into an external style sheet
Page 6 - an external style sheet from scratch
Page 7 - different coloured links on a page
Page 8 - paragraph spacing
Page 9 - learn more

Cascading style sheets part 6 - external style sheets from scratch

File > New Special > Cascading Style Sheet to make a style sheet from scratch.

You'll see (if you are using Golive 6) that some elements are already there, the ones the Golive people thought you might like to use. It's up to you - using the inspector you can combine them, delete them, add some more (try h2, h3 for sub-heads), add some classes if you like.

When you're done, save the style sheet, making sure it goes in your root folder or the folder your pages are in, as something.css and link it to whatever pages you like. Stick to lowercase, no spaces for the name.

You can re-open it later, with or without a page open and make changes. You'll need to reupload the style sheet, but not any unchanged pages - when someone looks at them, they'll refer to your edited style sheet.

Now, about Netscape 4.x .... the trouble with it is, if someone resizes their browser window, the style sheet stuff gets lost. So Golive provides an action to force the page to reload in Netscape if the window is resized. Then the css comes back.

In the objects palette, find the Smart icon (we're navigating to the Head Action icon, it's in different places in different versions of Golive. If you're using a different version you'll have to hunt it out).

In GL6, we start with the little green square:

Then find the Head Action - hovering over each icon shows you the name below.
Now turn down the triangle near the top of your page, by the Page Title, to see the head section:
Drag a Head Action in there:
Highlight it and look in the inspector:
Find your way to the correct action (your list probably won't look like mine, I've added some):
Now the inspector looks like this. Do this on every page that uses css, unless you really don't care about Netscape users, but it's not too much trouble and there are quite a few out there still.
golivebasics.com home page