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.

Project Seven dot com
Search
 

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:

  • Rows: 1
  • Columns: 2
  • Width: 100 %
  • Border: 0
  • Cell Padding: 24
  • Cell Spacing: 0

set table column properties

  • 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.

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.

  • Add several paragraphs of boilerplate text to each column.
  • At the top of the right column add several hyperlinks. Make 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

Left Column

  • 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.

Right Column

  • 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.

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: