This is normal CSS text.

This is our standard LINK text.

This is our ALT-LINK text.

Step One - Set Up

First, let's get started by defining some basics for our page. Type some text onto your blank page and create a link so we can see it change as we build our style sheet. Now open the CSS Editor by clicking on the stair icon on the top right of your page. Next, right click in the CSS Editor window and select 'body' from the menu that pops up. This is where we will define basics for the page. First, let's fix our fonts. By clicking on the 'F' button of the Inspector Pallet, we can manipulate our type. I'm choosing black at 12 pixels. **Note that by choosing a pixel instead of point measurement, you have a much better chance of your fonts displaying the same across platforms, this is good! **Wait, I have another Note: Stop and notice that the text at the top of the page is smaller than the text you are reading now. I've left this broken so you can see my mistake. The body style we made controls the style of text just sitting in the body of the page. This text is actually lounging about inside a table so it is not getting the style passed to it. If you experience this problem, do the same steps you just did for the body style but select the TD from the menu in the pict above. Adding this will insure that text inside a table will also be the same as the body. /note. Next, let's assign a font. GoLive comes with pre-defined font family's. I like sans-serif fonts so I almost always select that Now, let's set a background color for the page. We do this by clicking on the checkerboard looking button. Use the color pallet to choose a color for the background of your page. I chose the color you are looking at now. **Note: you can also choose to use a background image as a background AND you can tell it if you don't want it to tile by using the options on this tab. Any questions, just let me know.

Step Two - Making Links

OK, let's go back to the CSS Editor. If you have to, click the stair icon again to bring the window back to front. Next, right click in the CSS window again. This time, choose a:link from the pop-up. I then repeat this step for the 'visited' and the 'hover' links. **Note, you can certainly also set up the 'active' link but I don't really use it so I've skipped it. Now we are going to determine how our link text will appear. I start by selecting the a:link in the CSS Editor and then moving to the Inspector to modify it. I'm going to set mine to be a dark-ish gray, and I want it to be BOLD so I've changed the weight to bold. Also, I want to get rid of the ever-present underline so I've chosen 'NONE' from the Decoration list. I also like my links to always look the same so I set up my visited the exact same way. For my hover (mouse over) state, I left everything the same BUT I selected UNDERWEAR, er I mean UNDERLINE from the decoration list. So, when a visitor's mouse moves over the link it will become underlined. Now, preview in your browser to check that it is all working. And we're done! What? You, for some strange reason, want to add more links of a different color to your page? Allrighty then, keep the punishment coming and move to the next phase.

Step Three - Making MORE Links

OK, let's go back to the CSS Editor again. If you have to, click the stair icon again to bring the window back to front. Now we are going to make a new Class Style for our second color of links. To do this, click on the 'bullet' button on the bottom of the CSS Editor window. Select the new Class and rename it. I'm calling mine '.altlink' for Alternative Link. **Note: when naming new classes, you should always use lowercase letters, don't use spaces, and don't start the name with a number. AND, the name must have the '.' dot in front. Next, I make 3 more new classes and name them the same as the first, but this time I also add 'a:link, a:visited, and a:hover' to the end of the name. You have to have the space between the class name and link-type. Check the example: **Note: in order for the link styles to be applied properly, they need to always be in this order > link, visited, hover, active. If your links are not working as you suspect, check this ordering in your style sheet. Now, we go back and modify the text settings again for our new link type. First, I want my alternative links to be in a different font. So, in the .altlink class, I have selected the Times / serif-font family set. Next, select the .altfont a:link class. Now we are going to define how we want our links to appear. I have chosen a brown-ish color for the font and I want these alternative links to have an underline. I do the same for my visited link. (again, personal preference). Now, for the hover state, I'm going to change my text color to a light color with no underline. Wait, that will make it invisible when people mouse over the link! Hey, that's OK. Now click on the background button. In the background tab, I've selected a dark highlight color. Now, when someone mouses over an alternative link, it will throw a dark highlight behind the text! Almost there! Those in the back, try to keep up (or those with a slow connection, try to choke down a few more images!) Now, select the text you want to use for the alternative link style and make it a link if it isn't allready. Here is mine: Next, we need to open up the CSS window. This is not the same as the CSS Editor. Go to the Window Menu and look for this window. I dock mine with my Inspector so I don't have to go looking for it. Now, guess what shows up in the CSS window? That's right, your custom link style, or class that we created earlier. Here you can choose to apply the style to the whole paragraph section, the DIV or just the Span. In this case we want Span so simply click on the box next to our altlink under Span. Preview your text in your browser to make sure it is working. **UPDATE NOTE: Apparently there can be issues with how the style gets applied to text in the code. If your altlink isn't working, try this: Instead of making the link and then assigning it the altlink span, select your text FIRST and apply the altlink style, THEN make it a link. This should force the code to be written in the right order. NOW we are done! You can add as many different styles as you want. Not sure you'd want to get too carried away but you can if you want. Hey, wait, mine doesn't have a sadtable style! Yup, added that myself. I am controlling the look of the floating nav table with it. Perhaps we can address that at another time if there is interest. The Floating Navigation is also made using GoLive Actions. But wait, this was a crap load of work for just one page, what if I want to use this on other pages, do I have to do this whole thing again? Nope! But I'm too tired to finish this tonight. OK, I'm going to finish this. Check step Four just to the south.

Step Four - Applying the Style Sheet to the entire site

So, you have another 30 pages you'd like to do this to. Currently, this is how our CSS Editor looks. Notice that it says INTERNAL. We need to make this external so our other pages can use this style setup. Click the arrow of this window in the top right corner and select Export internal CSS like the pictured here. GoLive will pop up a new CSS Editor window containing all your styles and then prompt you to save your new external Style Sheet. Name your stylesheet something meaningful to you and then find a good place to save it. I always save mine to the root of my site and I use the great Site Folder button and then select Root Folder so I'm sure where it is going. And I don't have to flip back through my folders to find my site file on the computer. Thanks for this shortcut Adobe! Now, there are a few ways this can be done. Let's do this one first. In your site window, select the pages you want to apply the style sheet to. For example I made page 1,2 and 3. Then go back to your CSS Window. It should be blank like mine. If it is not, it means there are allready style sheets linked to one or more of the pages you have selected. Anyway, 1. click on the arrow box to the right and it will pop up a window showing all the .css, or style sheets in your site. Select the one you want for your pages. 2. Click the ADD button and thats it! Now open up your pages and you will see that whatever styles you have defined in your style sheet have now been added. If along the way you add another page and want to quickly add a link to an external stylesheet for just that page, open up your CSS Editor window by clicking on the stair button again. The window should be empty because there are no style sheets assigned to this new page. In the CSS Editor window, click on the New Link to External CSS button and it will add a blank reference for you. Now, to link to the external style sheet, I usually just use the link tool and drag it to the style sheet sitting in my site from the site window. Plus, it's quite entertaining to see how the little snake line follows your mouse and snaps back. Some days I do this for hours on end. Finally, I just want to make mention a shortcut I've found for swapping classes among style sheets. Let's say you've defined a link style you are particularly fond of and you want to add it to a page that allready has a style sheet, internal or external. Instead of re-making the style or class in the other style sheet, open up the CSS Editors for each style sheet and just drag the style you want from one CSS Editor window right onto the other CSS editor! Man this is exciting. Thanks. Hope this was helpful. I'll tell ya, this really was a punishment on my end.

Back to Tutorials Page
Or visit «sad.ark»
©Jeff Seal 2002