In here we want to add 2 sets of links style. You'll use Dreamweaver's interface to add these styles. Here are the actual rules you'll be adding; this is sample how they appear in the <head> or style sheet :

<style type="text/css">
<!--

.navbar a:link {color: #000000;}
.navbar a:visited {color: #000000;}
.navbar a:hover {color: #FFFFFF;}
.navbar a:active {color: #000000;}

.main a:link {color: #FFFFFF;}
.main a:visited {color: #FFFFFF;}
.main a:hover {color: #000000;}
.main a:active {color: #FFFFFF;}

-->
</style>

Add these one by one, each by the same set of steps, as follows.

First, click on the '+ icon' in the CSS Styles Pallette (Window > CSS Styles or Shift + F11) which will bring you to the New Style dialog box. Check Use CSS Selector. For the very first rule, that would be .navbar a:link (fig 1) and finish the .navbar part first, then jump on to the second rule, which you'll type .main a:link (fig 2).

            
Fig 1                                                                            Fig 2

*** Reminder : these styles need to be in this order : link - visited - hover - active in order to work properly. ***

When all the rules are added, close out of all dialog boxes, saving when prompted.

Now, you need to set the classes you've created as attributes in the <td> or <table> tags, so that those sections will display text according to the two different sets of style rules you've written.

*) .navbar class
To do this, return to your HTML document. In the document, select the <td> or <table> that contains the "navbar" then right-clicking (Windows) or Control-clicking (Macintosh) and choosing the style name from the CSS Styles submenu in the context menu. (*you can also apply a CSS style by choosing a style name from the Text > CSS Styles submenu*)

This changes that <td> OR <table> in your code to ::: <td class="navbar"> OR <table class="navbar">


*) .main class
Return to the main DW window. Now select the <td> or <table> that contains the "main" then right-clicking (Windows) or Control-clicking (Macintosh) and choosing the style name from the CSS Styles submenu in the context menu. (*you can also apply a CSS style by choosing a style name from the Text > CSS Styles submenu*)

This changes that <td> OR <table> in your code to ::: <td class="main"> OR <table class="main">

You're done! Save the HTML document, and test it in your browser. The two parts of the document should have two distinct sets of link styles. Click here to view the sample

**Note : you will find your navbar and main class in CSS Styles submenu, ONLY if you save that styles in the same page of the HTML page (*in the <head>*).
If you save that styles into the any_file_name.css, then you need to modify it by yourself. **

 

Hope it helps :)

©http://www.masboy.com/