Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Creating Multiple CSS Link Styles- Part 2

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 page

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

insert a table on your new page

Insert a table with the following settings:

set table column properties

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.

Note: We have not included screen captures in this section because it is assumed that a reader interested in learning about CSS should already have a good understanding of Dreamweaver basics such as new file creation and table insertion. If you do not yet know how to do these things, please refer to your Dreamweaver manual or the online help within Dreamweaver.

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

Left Column

Right Column

Demo... see how your page should look at this point. Of course, 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.

We need to use descendant link selectors, which are link styles that appear differently depending on the class assigned to their parent elements. We'll take care of that in the next section...

Next: Creating Multiple CSS Link Styles- Part 3

PVII Link Styles Series: