CSS Link Styles Tutorial
Sorry, not updated since DW4! Please see this CSS Link Styles tutorial at Project Seven for an excellent, tutorial on the same subject which isn't specific to any version of Dreamweaver.
Remove the underlines from links
Create a rollover
effect with text links*
Create more than one set of styles for
links on a single page
INITIAL STEPS FOR ALL ABOVE EFFECTS
All of these are done by writing CSS style rules including pseudo-class
selectors, and all start with the same initial steps described
on this page below. Later in the process (on the next page of
the tutorial) you can choose the options you want to create the
style rules for the different effects in the questions above.
INITIAL STEP ONE: Creating and Linking a Style Sheet
With the document in question open, either open the existing linked
style sheet, or create a new linked style sheet. To create a new
style sheet, open the CSS Styles Pallette and click the
little pencil icon at the bottom of the window. In the box that
opens, click "Link". In the text box labelled File/URL,
type the name of your new style sheet with a .css extension
- something like mystylesheet.css. This style sheet doesn't
actually exist yet, but as soon as you add a style to it, Dreamweaver
will create it.
INITIAL STEP TWO: The New Style Dialog Box
Click OK, which will return you to the Edit Style Sheet dialog
box. There, highlight the name of your new style sheet and click Edit.
In the dialog box that opens, click New, because you're
adding a new style rule to your style sheet.
 3.
In the New Style Rule dialog box which opens, click the
radio button for Use CSS Selector. In the drop-down list
at the top, you'll see four pseudo-class selectors: a:link, a:visited, a:hover,
and a:active. They are probably not in this order in the
drop-down list, but right here and now, memorize this order for
these pseudo-class selectors: link, visited, hover, active. Link,
Visited, Hover, Active. LINK, VISITED, HOVER, ACTIVE! L
- V - H - A. This is important, because it is the order you
need to insert these style rules into your style sheet, or they
won't work.
Regardless of which link-style effect you're trying to achieve,
you'll want to define a style rule using each of these pseudo-class
selectors, in the order above! What was that order again?
Say it with me: link - visited - hover - active!
Link
Styles Tutorial - Page 2 ---> |
