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

The New Style window will open.

New CSS Style Dialog

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

The Style Definition window opens with the Type Category active.

CSS Style Definition Dialog

Switch to the Background Category

setting up the right column class

The New Style window will open.

The Style Definition window opens with the Type Category active.

CSS Style Definition Dialog for .Rightcolumn

Next: Creating Multiple CSS Link Styles- Part 2

PVII Link Styles Series: