- Understanding CSS Link Styles
- Creating the Default Link Selectors
- Creating Multiple CSS Link Styles
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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:
.playground swing { activity: toandfro }
.baseball swing { activity: batball }
.jazzbar swing { activity: dance }
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.
Right-click (Control-click) anywhere on your Dreamweaver page.
When the context menu pops up, choose CSS Styles, New Style.
The New Style window will open (Figure 8).
Select the Make Custom Style (class) radio button.
Type .leftcolumn into the Name field.
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.
-
Select the settings shown in Figure 9.
- Font: Arial, Helvetica, sans-serif
- Size: 14 and pixels for the measure
- Color: #000000 (black)
Switch to the Background Category and set the background Color to #FFFFFF (white)
Click OK.
Right-click (Control-click) anywhere on your Dreamweaver page.
-
When the context menu pops up, choose CSS Styles, New Style. (Figure 10)
The New Style window will open.
Select the Make Custom Style (class) radio button.
Type .rightcolumn into the Name field.
Select the Define In radio button and choose your page's linked style sheet.
Click OK.
The Style Definition window opens with the Type Category active.
-
Select the settings shown in Figure 11.
- Font: Arial, Helvetica, sans-serif
- Size: 12 and pixels for the measure
- Color: #FFFFFF (White)
Switch to the Background Category and set the background Color to #333333 (charcoal gray)
Click OK.
){kind=link}
){kind=link}
){kind=link}
){kind=link}
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.
Now we're ready to create secondary and tertiary link styles!
Create the .leftcolumn Link Styles
In this section, we'll create the .leftcolumn Link Styles.
-
Right-click your page and select CSS Styles, New Style ( Figure 12).
Select the Use CSS Selector radio button.
Type .leftcolumn a:link in the Selector field.
In the Define In field, enter mystyles.css.
Click OK.
The Style Definition window will open.
-
Enter the settings shown in Figure 13:
- Decoration: underline
- Color: #CC6600
Click OK.
){kind=link}
){kind=link}
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).