How to Set a Link Style Within Your CSS Sheet

So, you've already set the first link on your site to be blue using the page properties window. But then you want to create a second link. And this time it has to be yellow with no underline! What do you do?

Well the first thing you'll have to do is to create a css sheet. You do so by selecting the "New CSS Rule" button in the CSS tab.

This will open a new window. Make sure you set the "Define in" to "New Style Sheet File". And the "Selector Type" has to be set to default, which is "Class". The name can be whatever you want, but it has to start with a dot.

Then a very familiar save as window will pop up. Name the css sheet what ever you want. I just called is "css".

Then another window will pop up. This time with a lot more settings to tweak.

Here you can set the font type, size, color plus more. But we just want to create a yellow link, so we'll just set the font to Arial 12 pt yellow.

Now we'll set the newly created style to the second link. Highlight the link you want to be yellow.

Then, in the "Properties" tab, you can see that our new style is now available. Select it.

But as you can probably see, it didn't help much. But if you remove the link value, you'll see that it turns yellow. But why isn't the text yellow when we apply a link to it? That is because we have only set the normal font style in the css sheet.

But don't panic. We can easily set the link style within the same sheet!

Open the css sheet by clicking on the tab like shown in the picture. Or you can locate the .css file on your computer and open it with Dreamweaver.

Now you can see the content of the css sheet. The ".yellowlink" is the only style currently in the sheet. Here you can see the font, size and color. All the values we defined earlier in the tutorial.

After the ".yellowlink" on line 1, write "a:link" like shown in the picture. Separate with a comma and write ".yellowlink a:visited", again as shown in the picture.

Now, go back to the html file. As you can see this didn't work out quite well. But why?

The link properties you set using the page properties window will override any a:link values as long as the text is written directly in the body of the html file. To be able to set the link color using this css method you can create tables and place the link in the table. We'll try that.

Remove the second link and create a table by selecting the "Table" tool in the "Common" panel.

This will open a new window. Just set the "Rows" and "Columns" to 1 and the "Table width" to 100 with no cell padding or cell spacing Select "Ok" when you're done.

Create the second link again. This time inside the table. Now, highlight the link and set the style to "yellowlink". It probably didn't work now either. So what is the trick?

When dealing with links inside tables you have to set the style to the table, not the link itself. So, highlight the table (CTRL + Click the table).

Then, in the "Properties" tab, set the style to "yellowlink". Voilа, you're done!

If you're new to making websites, it may seem unnecessary to create tables just to set the link color. But as you learn more about websites you'll see that tables is a very important part of your web site. And most of your text will be inside tables anyway.