Re: Dreamweaver MX CSS 
"Mike" <mikesinbox.freeisp.co.uk> wrote in message
news:bepr0a$b7m$1forums.macromedia.com...want> Hi everyone
>
> I'd like to know if it's possible to have more than one .hover link. I..hover> to create a screen that has .hover links of about 40pixels size, which
> obviously can be done, but I also want a credit link that is no more than
> 12pix. I find that even though I can set the text in CSS to a nice size,
> when rolling over, I get a massive text display from the one and onlyFrom our "Quick Tut":> at 40pix.
Using CSS to style hyperlinks is pretty straightforward, whether you use
Dreamweaver to create your styles, or even if you do them maually. If you're
new to CSS and need to learn the basics of creating a style sheet in
Dreamweaver, please see the following tutorials:
Apprentice Series Intro to CSS in MX
PVII Link Styles Turorial
CSS Link Style rules must be written in the following order:
Link
Visited
Hover
Active
The following style sheet will make 2 distinct link styles that can be used
in 2 distinct parts of your page:
Area 1
Red text with no underline. Visited turns black. Hover turns Blue and does
have an underline. Active is red with no underline.
..area1 a:link {
color: #FF0000;
text-decoration: none;
}
..area1 a:visited {
color: #000000;
text-decoration: none;
}
..area1 a:hover {
color: #0000CC;
text-decoration: underline;
}
..area1 a:active {
color: #FF0000;
text-decoration: none;
}
To deploy this rule, you apply the class area1 to a containing element, like
a table cell or a paragraph:
<td class="area1> or...
<p class="area1>
All links within paragraphs or table cells having the "area1" class, will
use the styles declared in the "area1" rules above.
Area 2
Blue text. Visited turns red. Hover turns gray with a black background and
has no underline. Active is black and underlined.
..area2 a:link {
color:#0000C0;
text-decoration: underline;
}
..area2 a:visited {
color: #FF0000;
text-decoration: underline;
}
..area2 a:hover {
color: #CCCCCC;
background-color: #000000;
text-decoration: none;
}
..area2 a:active {
color: #000000;
text-decoration: underline;
}
To deploy this rule, you apply the class area2 to a containing element, like
a table cell or a paragraph:
<td class="area2> or...
<p class="area2>
All links within paragraphs or table cells having the "area2" class, will
use the styles declared in the "area2" rules above.
What about font?
It's best to have your link styles inherit the font used in its parent
container. If you are setting link styles for all links that appear in a
table cell to which you've applied the "Area1" class, for example, you
should allow the links to have the same font characteristics of all the text
in that cell. A single rule accomplishes that:
..area1 {
font-family: Verdana, Arial, Helvetica;
font-size: 12px;
}
What if I want just one link in my Area2 table cell to have a different
style?
Easy! We need to create a rule that we can apply to the link tag <a>
directly, which will take precedence over your other styles.
a.special:link {
color: #FF0000;
text-decoration: none;
}
a.special:visited {
color: #000000;
text-decoration: none;
}
a.special:hover {
color: #0000CC;
text-decoration: underline;
}
a.special:active {
color: #FF0000;
text-decoration: none;
}
To deploy this class, you apply it to the <a> tag, like this:
<a href="page2.htm" class="special">
That's all there is to it.
--
Al Sparber - PVII
[url]http://www.projectseven.com[/url]
Dreamweaver Extensions - DesignPacks - Tutorials - Books
---------------------------------------------------------------------
The PVII Newsgroup | [url]news://forums.projectseven.com/pviiwebdev[/url]
The CSS Newsgroup | [url]news://forums.projectseven.com/css[/url]
---------------------------------------------------------------------
Bookmarks