From the author of

From the author of

Creating Multiple CSS Link Styles

If you've read the first two sections, you know how to define
a:link,a:visited,a:hover, and
a:active. These styles tell your browser how to treat every link on
your page. But what if you want your browser to treat some links this way and
others differently?

CSS Has a Solution: Contextual Selectors

Your four-year-old daughter goes to the playground and swings. Your
10-year-old son stands in the batter's box and swings. Your Uncle
Maynard goes to a jazz bar and swings. These are all examples of the
English language used in context. If English were driven by a type of CSS, we
might use these rules:

Just as context extends the power of language, it also extends the power of
CSS. Consider the following scenario.

You design a neat two-column layout for your new web site. You want the left
column to be wide and hold the main body of text. The right column is a narrow
sidebar with news snippets and hyperlinks. The left column is to have a white
background with black text. The right column is to be dark gray with white text.
You've created your default link styles, but try as you may, you cannot
coordinate the various link colors to look good in both columns.

"If only I could teach my browser to differentiate between links in the
left and right columns", you moan. "All my problems would be
solved!"

Contextual Selectors provide the solution. But first we need to do
some preparatory work. We need to create a couple of Class Selectors. These
selectors will be applied to the table columns to set up the relationship
between the columns and the contextual link classes (which will be created a
little later).

Setting up the Left Column Class Selector

Class Selectors are powerful CSS tools that allow us to style
virtually any element on a web page. Dreamweaver calls these Custom
Styles, but CSS specifications define them as Class Selectors. Let's
create a Class Selector called leftcolumn and another called
rightcolumn.

Select the Define In radio button and choose your page's
linked style sheet.

If you've followed this tutorial series from the beginning, you will
have already created and linked a style sheet called mystyles.css (you can also
use an existing CSS file in your site, or choose the This document Only
button to embed the styles in your document).

Click OK.

The Style Definition window opens with the Type Category active. We
recommend that you select one of Dreamweaver's predefined font families,
specially chosen for maximum cross-platform compatibility.

Switch to the Background Category and set the background Color to
#333333 (charcoal gray)

Click OK.

Create a New Page

Now that we've set up our Class Selectors.leftcolumn and
.rightcolumnwe'll push onward and make a page to use them
on.

Create a new document within a properly defined Dreamweaver site and
name it csstest.htm.

On your new page, insert a table with the following settings:

Rows: 1

Columns: 2

Width: 100 %

Border: 0

Cell Padding: 24

Cell Spacing: 0

Click inside the right column of your new table and enter 200
into the W (width) field on your Property Inspector.

Do not enter a width for the left column. This will cause the left column
to expand or shrink to occupy the total width of the browser window (minus the
right column's width) no matter how the window is sized.

Use the Property Inspector to set Vert (Vertical Alignment) of both the
left and right columns to Top.

Add several paragraphs of boilerplate text to each column.

At the top of the right column, add several hyperlinks, making the links null
for testing purposes.

TIP

To make a null link, select the text and type the following into the link
field of your Property Inspector: javascript:;

Apply .Leftcolumn and .Rightcolumn Classes to the Table

Now you are ready to apply the classes to the table.

Click inside the left column.

Select the <td> tag on the status bar that runs across the
bottom border of your Dreamweaver window.

Right-click (Control-click) the tag and choose Set Class.

Choose leftcolumn.

Click inside the right column.

Select the <td> tag on the status bar.

Right-click (Control-click) the tag and choose Set Class.

Choose rightcolumn.

If you were to see a demo of how your page looked at this point, you
would see that there is something seriously wrong. The links in the right column
are invisible because the default link color is the same as the right
column's background. What we need, naturally, are some contextual link
selectors, link styles that appear differently depending on which column
they live in. We'll take care of that in the next section.

An Important Note about Inheritance

Before you create the remaining styles, let's revisit the topic of
inheritance. Remember that the default a:hover selector carries a
background color (#333333). Because of this, any additional hover styles will
inherit that property unless we explicitly change it.

That means that both .leftcolumn a:hover and .rightcolumn a:hover must have a
declared background color or they will inherit the #333333 background color from
the default a:hover selector. Since we have set the background color of the left
table column to white, we will set the .leftcolumn a:hover background color to
white. And since the right column has a charcoal background color
(#333333), we'll declare #333333 as the background color for
.rightcolumn a:hover.

So, by making the hover background the same color as the table column
background, the effective result is... no background!

Three More Selectors for the .leftcolumn Link Style

In this section, you created three additional selectors and set their
properties.

Repeat the preceding Steps 1 through 5 to create three additional
Selectors.

Use the table below as a guide in setting the properties of the new
additional selectors:

Selector Name

Value and Property

.leftcolumn a:visited

Decoration:underline

Color: #66CC99

.leftcolumn a:hover

Decoration: none

Color: #333333

Background Color: #FFFFFF

.leftcolumn a:active

Decoration:underline

Color: #66CC99

Create the .rightcolumn Link Styles

Right-click your page and select CSS Styles, New
Style.

By now, you are an expert in creating new Selector styles. Use the
above techniques to create the four Selector styles for .rightcolumn.

Use the table below as a guide in setting the properties:

Selector Name

Value and Property

.rightcolumn a:link

Decoration: underline

Color: #FFCC00

.rightcolumn a:visted

Decoration: underline

Color: #FFCC00

.rightcolumn a:hover

Decoration: none

Color: #CCCCCC

Background Color: #333333

.rightcolumn a:active

Decoration: underline

Color: #FFCC00

If you were to test your links, you'd see that the links
look a bit better. We now have three sets of link styles with which to work:

leftcolumn linksAutomatically applied to any hyperlinks in the left
table column. Through inheritance, the link will adapt the font and size
properties of its parent element.

rightcolumn linksAutomatically applied to any hyperlinks in the
right table column.

default linksAutomatically applied to any hyperlinks that reside in
neither the left nor right columns. In other words, to any links anywhere else
on the page.

Download the Finished Style Sheet

Click on this link:
mystyles.css.

Right-click and choose Save Target As.

For even more cool ways to use CSS in Dreamweaver, check out Dreamweaver 4
Magic by Al Sparber ([cr]2002, New Riders Publishing, ISBN
0-7357-1046-5).