Creating Multiple CSS Link Styles- Part 3
Now we're ready to create secondary and tertiary link styles:
create the .leftcolumn link styles
- Right-Click your page and select CSS Styles - New...
- For Selector Type, choose Advanced
- Type .leftcolumn a:link in the Selector field.
- Define In: mystyles.css
- Click OK
The Style Definition window will open.
- Set Decoration: underline
- Color: #CC6600
- Click OK.
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...
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
Right-Click and choose Save Target As.
We hope you enjoyed this tutorial. Thanks for visiting PVII today!
PVII Link Styles Series:
- CSS Link Styles- Defined
- Creating the Default Link Selectors
- Creating Multiple CSS Link Styles- Overview
- Creating Multiple CSS Link Styles- Preparatory Steps & Test Page Creation
- Creating Multiple CSS Link Styles- Creating the 2nd & 3rd Link Styles