CODEWITHSUNDEEP
htmlcss
John M
John M

Reputation: 14668

HTML/CSS - Styling a large collection of hyperlinks?

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?

Upvotes: 0

Views: 339

Answers (4)

Robert K
Robert K

Reputation: 30328

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

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

Upvotes: 0

poke
poke

Reputation: 387825

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; }

Upvotes: 4

jball
jball

Reputation: 25014

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="...">

Upvotes: 2

monksy
monksy

Reputation: 14234

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.

Upvotes: 1

Related Questions