HTML/CSS - Styling a large collection of hyperlinks?

Question

I have a Master Links HTML page in use for my Intranet sites.

On the page are 67 distinct links which are grouped under 7 section headers.

Currently the links are organized via tables.

Is there a better way to organize the links while making them visually distinctive?

Answer 1

You can identify all the links as a specific class if you wish to change the style of only the links on that page. Additionally, if you don't crea if all of the links change style, then redefine the style for the link tag.

Answer 2

a:link              { color:blue; text-decoration:underline; font-weight: bold; }
a:visited           { color:gray; text-decoration:underline; font-weight: bold; }
a:hover             { color:green; text-decoration:underline; font-weight: bold; }
a:active            { color:red; text-decoration:underline; font-weight: bold; }

a.otherLink:link    { color:black; text-decoration:none; }
a.otherLink:visited { color:yellow; text-decoration:none; }
a.otherLink:hover   { color:#123456; text-decoration:underline; }
a.otherLink:active  { color:lime; text-decoration:none; }

note that the a: styles are for the default links, and the a.otherLink: style will apply to links in the form of <a class="otherLink" href="...">

Answer 3

Or you differ between links based on what section they are in:

<ul class="linksectionA">
  <li><a href="#">Link A1</a></li>
  <li><a href="#">Link A2</a></li>
  <li><a href="#">Link A3</a></li>
</ul>
<ul class="linksectionB">
  <li><a href="#">Link B1</a></li>
  <li><a href="#">Link B2</a></li>
  <li><a href="#">Link B3</a></li>
</ul>
<ul class="linksectionC">
  <li><a href="#">Link C1</a></li>
  <li><a href="#">Link C2</a></li>
  <li><a href="#">Link C3</a></li>
</ul>

Then you can easily assign each link within those sections a different style:

.linksectionA a { color: red; }
.linksectionB a { color: green; }
.linksectionC a { color: blue; }

Answer 4

I suggest grouping them by unordered lists, like poke suggested, and using graceful enhancement with a style like−

.linksectionA li:n-th-child(even) {  }