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 3

Now we're ready to create secondary and tertiary link styles:

create the .leftcolumn link styles

The Style Definition window will open.

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!

.leftcolumn link styles property guide

Repeat the above steps to create 3 additional Selectors, setting the properties like this:

.leftcolumn a:link {
	text-decoration: underline;
	color: #66CC99;
	}
.leftcolumn a:visited {
	text-decoration: underline;
	color: #66CC99;
	}
.leftcolumn a:hover {
	text-decoration: none;
	color: #333333;
	background-color: #FFFFFF;
	}
.leftcolumn a:active {
	text-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 4 Selector styles for .rightcolumn.

.rightcolumn link styles property guide

.rightcolumn a:link {
	text-decoration: underline;
	color: #FFCC00;
	}
.rightcolumn a:visited {
	text-decoration: underline;
	color: #FFCC00;
	}
.rightcolumn a:hover {
	text-decoration: none;
	color: #CCCCCC;
	background-color: #333333;
	}
.rightcolumn a:active {
	text-decoration: underline;
	color: #FFCC00;
	}

let's see a demo now...

Now let's revisit our test page to see if our links look a bit better...

Open Test Page

Voila!

We now have 3 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

mystyles.css

Right-Click and choose Save Target As.

We hope you enjoyed this tutorial. Thanks for visiting PVII today!

PVII Link Styles Series: