CSS Link Styles Tutorial - Page
3
To create more than one link style on the same page:
STEP ONE: Creating the HTML Document
Create an HTML page with a simple two-column table that has a
cell with a dark blue background and a cell with a white background.
It doesn't matter what size or shape they are. The white will be
your main content area, and the blue your navbar;
place some text with a link or two in each area. Or download a zip
file of the page pictured and use that.
You want links in the white area to be colors that show up well
on white, but in the blue area you want them to show up well on
blue, and so you need two distinct sets of link style definitions.
We'll make links in the white area blue - purple - grey - red (for link
- visited - hover - active) and in the blue area, yellow -
purple - grey - red.
If you don't have a style sheet linked to the document yet, use
Dreamweaver to create one as described at
the beginning of this tutorial.
STEP TWO: Writing the Style Rules
Open the CSS Styles Pallette.
We want to add two sets of style rules. One will define the way
links look in the blue area, and one the way links look in the
white area. The rules use class and pseudo-class selectors combined
to make a contextual selector.
We also need to define ordinary text within the blue navigation
bar to be white so that it will be easily visible; the first rule
below accomplishes that.
You'll use Dreamweaver's interface to add these styles. Here are
the actual rules you'll be adding; this is how they appear in the
style sheet, were you to open it in a text editor or style sheet
editor:
.navbar {color: #FFFFFF;}
.main a:link {color: #003399;}
.main a:visited {color: #9966CC;}
.main a:hover {color: #CCCCCC;}
.main a:active {color: #FF0000;}
.navbar a:link {color: #FFFF00;}
.navbar a:visited {color: #9966CC;}
.navbar a:hover {color: #CCCCCC;}
.navbar a:active {color: #FF0000;}
Add these one by one, each by the same set of steps, as follows.
First, click on the pencil icon in the CSS Styles Pallette. Then,
highlight your style sheet and click Edit. In the next box,
click New, which will bring you to the New Style box.
Check Use CSS Selector, and in the text field, type in the
part of the style rule (above) before the brackets; this is the selector.
For the very first rule, that would be .navbar. For the
second rule, you'll type in .main a:link.
After typing in the selector name, click OK, which takes
you to the Define Styles box. There, type the color hexadecimal
number into the color field on the right side of the box, and then
click OK, bringing you back to the dialog box where you
can click New and add the next style rule.
In case you missed me saying this over and over in the beginning
of the tutorial, these styles need to be in that 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.
STEP THREE: Setting Class Attributes in the HTML
Document
Now, you need to set the classes you've created as attributes
in the <td> tags that contain your two differently-colored
page sections, so that those sections will display text according
to the two different sets of style rules you've written.
To do this, return to your HTML document. In the document, select
the <td> that contains the "main" area by using
the Tag Selector at the bottom of the design window. Right-click
it, and select Set Class, then select main.
This changes that <td> in your code to: <td class="main">
Return to the main DW window. Now select the <td> that holds
the blue "navigation bar" area, right-click it, select Set
Class, and then select navbar.
This changes that <td> in your code to:<td
class="navbar">
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.
Summary of Steps for Adding Two Different Link Styles to One
Document:
-
Create the page needed the two styles. Contain the areas needing
different styles in table cells.
-
Add two sets of 4 rules each, two classes, one named for each
differing-color section of the HTML document, and combining
them with the 4 pseudo-classes by creating contextual selectors.
Add a rule (or rules) to make non-link text readable
in each of the differing-color sections, if necessary.
-
Add the appropriate class attribute value to each <td>
tag in the HTML document.
END OF TUTORIAL
<--- To Page 2 - Link
Styles Tutorial |
