Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

Creating CSS Link Styles in Dreamweaver

  • Print
  • + Share This
Are you bored with the ordinary links seen everywhere? Want to make the links on your site unique? With Dreamweaver and Cascading Style Sheets (CSS) you can. Author Al Sparber shows you how to override a browser's default link styles in some very creative and aesthetically pleasing ways.
From the author of

Want to know how to create CSS link styles (pseudoclasses)? It's easy! Just follow along and you'll be a master in no time. This PVII Link Styles article is comprised of three major tasks:

It's advisable that you read through the three sections.

Understanding CSS Link Styles

Default link styles look like this in a style sheet:

a:link { color: #333333}
a:visited { color: #FFFFFF}
a:hover { color: #CCCCCC; background-color: #333333; text-decoration: none}
a:active { color: #333333}

A style, in CSS jargon, is called a rule. A rule has several component parts. Let's inspect the parts of the first default link style:

a:link {color: #333333}

The first part of the rule (a:link) is called the selector. This tells the browser which element on the page to work with. The curly bracket pair contains the declaration, which is comprised of a property (color) and a value (#333333). Here's the syntax:

Selector { property: value }

The Selector, a:link, can roughly be translated to mean:

"Mr. Browser, I'd like you to act upon tag contents that have not been visited. Moreover, the user's mouse should be neither hovering over it nor pressed down upon it."

Why Don't We Set the Font Family?

Notice that our four link styles (link, visited, hover, and active) declare neither font family nor font size. It's all about efficiency and inheritance. Your page will look better if your hyperlinks use the same font and font size as the surrounding text. By omitting these properties from the declaration, we ensure that all undeclared properties are inherited from the rule that is used by the element in which the link exists.

So, if the link is in a paragraph, it will inherit its font and size from that paragraph.

What Is a Link... Really?

Links are links because they are wrapped inside anchor <a> tags. To see an example, a link to home.htm, looks like this in the document: this link

And like this in the source code

This sentence, containing <a href="home.htm">this link</a> to home.htm, looks like this in the source code

Notice that the actual hyperlinked words, this link, are contained between an opening tag and a closing tag. The rest of the sentence falls to either side of the tag pair and the whole affair is wrapped inside a pair of paragraph

tags. Whatever text (or images) fall between the tag pair becomes a hyperlink. Your browser informs the world that this is so by causing the cursor to change into a pointing finger when it passes over the contents of an tag.

The browser knows about tags very well. All browsers come with default instructions for how to render them in the absence of more specific instructions (like those contained in CSS). An unstyled hyperlink is blue. A visited hyperlink is purple. An active hyperlink is red.

CSS allows us to override and enhance a browser's default link styles in some very creative and aesthetically pleasing ways.

Link Styles are Pseudoclass Selectors in CSS-Talk

CSS specifications refer to link styles as Pseudoclasses—special classes that describe styles for elements that apply only under certain circumstances. This all may seem intimidating, but it's quite simple:

The a:link describes any hyperlink that has not been visited by the user's browser. In other words, the page linked to is not present in the browser's local memory.

The a:visited describes any hyperlink that has been visited and is present in the browser's local memory.

The a:hover describes a hyperlink while the user's mouse happens to be hovering over it. All version 4 and higher browsers (except Netscape 4) recognize this class.

The a:active describes a hyperlink that has been clicked but not yet released. All version 4 and higher browsers (except Netscape 4) recognize this class.

  • + Share This
  • 🔖 Save To Your Account