is there an easy way to have two style sets for links?

**shamrock** · Aug 10, 2002 08:20

hi,

is there a way to have two different styles for different links on my page, without having to manually mark each link in the second group with a css tag?

i'm building a website, and i would like the content section (located inside a cell) to have it's own style for links, so i redefined the a:link tag, with css,

but i also want the links group in another cell to have it's own style, but then i got to define a a.links:link tag, and manually mark each and every link...

isn't there an easier way?

thanks

**Skunk** · Aug 10, 2002 08:31

Yes there is, using CSS selectors:

Code:

<style type="text/css">
#first a {
  /* styles for all links inside element with id="first" */
  color: red;
}
#first a:hover {
  /* Hover styles for links inside that element
  color: orange;
}
#second a {
  /* Styles for links inside element with id="second"
  color: green;
}
#second a:hover {
  /* Hover styles for links inside element with id="second"
  color: blue;
}
</style>

<div id="first">
<a href="blah">A link</a>
<a href="blah">Another link</a>
<a href="blah">And another link</a>
</div>

<div id="second">
<a href="blah">A link</a>
<a href="blah">Another link</a>
<a href="blah">And another link</a>
</div>

I've used divs here but it would work equally well with table cells that have their id set to something, or with other elements using classes if you use ".first a" as the selector.

If you want to learn more about selectors (which is definitely a good idea, they are a fundamental thing to learn when dealing with CSS) check out this tutorial: http://www.westciv.com.au/style_mast...ial/selectors/

**shamrock** · Aug 10, 2002 08:56

it doesn't work...

here is my code:

Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#first a {
  /* styles for all links inside element with id="first" */
  color: red;
}
#first a:hover {
  /* Hover styles for links inside that element
  color: orange;
}
#second a {
  /* Styles for links inside element with id="second"
  color: green;
}
#second a:hover {
  /* Hover styles for links inside element with id="second"
  color: blue;
}
</style>

</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="first">
<a href="blah">A link</a>
<a href="blah">Another link</a>
<a href="blah">And another link</a>
</div>

<div id="second">
<a href="blah">A link</a>
<a href="blah">Another link</a>
<a href="blah">And another link</a>
</div>

</body>
</html>

i only see that the first links group is red, and doesn't change on the hover,
and the second group of links is blue and also doesn't change on hover...

what's wrong?

btw, what's the difference between class and id's?
untill now i've only known about and used class

**oblig** · Aug 10, 2002 10:00

End your comments:

Code:

<style type="text/css">
#first a {
  /* styles for all links inside element with id="first" */
  color: red;
}
#first a:hover {
  /* Hover styles for links inside that element */
  color: orange;
}
#second a {
  /* Styles for links inside element with id="second" */
  color: green;
}
#second a:hover {
  /* Hover styles for links inside element with id="second" */
  color: blue;
}
</style>

Your code makes the browser think color:green is part of the #second A style comment, and ignores it, 'setting' it to default (blue).

**Skunk** · Aug 10, 2002 11:09

Ooops, that was a bug in my example code - Well spotted TechSited

**shamrock** · Aug 10, 2002 11:39

Thanks, so can i insert that code into a .css file?

i know dreamweaver 4 can generate css, but can it generate id's also?

what's the difference between class and id?

i tried to change the #first a:hover
to .first a:hover

and mark a .first class tag on a link but it didn't work...

**Travis** · Aug 10, 2002 12:49

you would change the code on the <div> tag to <div class="first"> instead of id. you wouldn't have to change anything in the link.

User Tag List

Thread: is there an easy way to have two style sets for links?

Thread Tools

Display

is there an easy way to have two style sets for links?

Bookmarks

Bookmarks

Posting Permissions