Creating CSS Link Styles in Dreamweaver
- Understanding CSS Link Styles
- Creating the Default Link Selectors
- Creating Multiple CSS Link Styles
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.