Creating Multiple CSS Link Styles- Part 1
If you've read the first 2 sections in the PVII Link Styles Series, 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: Descendant Selectors
descendant selectors defined
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 - one idea descending to other ideas that are related 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 2-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!"
Descendant 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 descendant 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.
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...
The New Style window will open.
- For Selector Type, choose the Class radio button
- Type .leftcolumn into the Name field
- Select the Define In radio button and choose your page's linked style sheet.
Note: 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.
- Open the Font menu by clicking the down arrow to the right of the Font field
- Choose: Arial, Helvetica, sans-serif.
- Select Size: 14 and pixels for the measure.
- Select Color: #000000 (black)
Switch to the Background Category
- Set the background Color to: #FFFFFF (white)
- Click OK.
setting up the right column class
- 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.
- For Selector Type, choose the 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 Font: Arial, Helvetica, sans-serif.
- Select Size: 12 and pixels for the measure.
- Select Color: #CCCCCC
- Switch to the Background Category and set the background Color to: #333333 (charcoal gray)
- Click OK.
Next: Creating Multiple CSS Link Styles- Part 2
PVII Link Styles Series: