blog top 101 other stuff

getting started with cascading style sheets in golive

1. Open this page (it's called cameras.html) in your browser and save it into a site you already have created (or, better yet, create a new one for this exercise). Don’t worry about ruining anything in your existing site - this example won’t change anything on the pages you have already created (unless you want it to). You will need to choose Refresh View (Rescan in GL 5) to see the page in the site window.

2. With the Site Window open and in front, go to the File menu, pull down to New Special and select Cascading Style Sheet (in GL 5 it will be Style Sheet Document). You will get a new CSS Editor window. Version 6 sets up an outline for the new style sheet. In version 5 you get a blank document.

3. At the bottom of the CSS Editor, click on the New Element Style button (the one with the two backets <>). In version 5 the buttons are in the tool bar.

4. With the new element selected, open the Inspector and rename this element to h1 (if you don't see the name box, click on the first tab, the one with the pencil on it).

5. Click on the F tab in the Inspector. This is where you will set the attributes for text that will be associated with the H1 format.

  • Color - click the box and choose a nice light blue from the Color palette.
  • Size - click in the box, type 22 and then select pixel from the popup menu to the right.
  • Font Family - click the New Font button at the bottom of the Inspector (the middle button to the right) and add the Ventana font to this group using the popup menu at the bottom. Repeat and add Arial as the second choice. If you already created some font sets, click on the popup menu to the left of the New Font button and select the one you want to use.

6. Click on the Text tab (third from left) and select Center from the popup menu next to Align.

While there are many other options that could be applied in this style element, this is enough for now. Click on the Basics tab (the first one at the left) to see the rules you’ve chosen.

7. Bring the CSS Editor to the front (if it is not already visible). Select Save As... from the File menu. Give this file a name you will recognize (it will have a .css file extension) and save it at the top level of your site folder.

Now that you have created the style sheet, you must apply it to the pages it will format. The instructions for that step are in the next part.