Member Avatar for ABUMIN

. in just one cell of a table? I can do a global change on the page by redefining html 'a' element colors in a .css file andlinking it, but that changes the link colors everywhere, including those in the standard asp:Menu components. The contents of one cell on my master page contains the body of the client pages. I'd like to redfine 'a' elements for just that one cell, so it affects the body of the client pages but not the menus and everything else.

Any clues for the clueless?

  • 9 Contributors
  • 18 Replies
  • 228 Views
  • 4 Months Discussion Span
  • Latest Post Latest Post by zobadof

Dani AI

Generated

Brief summary and a practical, maintainable pattern.

asked how to change link colors for the page body inside one table cell on a master page without affecting site-wide menus. Several answers already covered the basics: and showed link-state rules, and suggested scoping with classes, and pointed out inline styles will override other rules. The cleanest, future-proof approach is to scope styles to the content container (an id or class on the cell) and keep site-wide rules separate.

Example pattern (place in a stylesheet that is loaded after the global styles):

<!-- master page cell -->
<td id="contentCell"> ... client-page HTML ... </td>

<!-- in client-content.css -->
#contentCell {
  --link: #1a73e8;
  --link-hover: #0f54b3;
}

#contentCell :is(a, a:visited) {
  color: var(--link);
  text-decoration: underline;
}

#contentCell :is(a:hover, a:active) {
  color: var(--link-hover);
}

Notes and troubleshooting:

  • Specificity wins: an #id a rule will generally override a site-wide a rule, so scoping with an id is reliable without !important.
  • Keep the LVHA order in mind (link, visited, hover, active) when writing separate rules.
  • For ASP.NET controls (asp:Menu) that still pick up styles, inspect the generated HTML with browser dev tools, find the menu root id/class, and add a menu-specific rule to restore its colors or increase specificity for the menu selector.
  • Avoid inline styles for maintainability; use classes on individual anchors only when a single link needs a special color (as suggested).
  • Modern browsers limit what can be styled for :visited (privacy restrictions); color is allowed, but many other properties are not.
  • Use the browser inspector to review the computed style and the cascade if a color does not apply.

This keeps site-wide styles intact, isolates client-page styling, and makes it easy to manage exceptions for server controls.

Recommended Answers

All 18 Replies

Member Avatar for jeet13

Change Hyperlink Color with Internal Style Sheet

<style type="text/css">
a:link {
COLOR: #0000FF;
}
a:visited {
COLOR: #800080;
}
a:hover {
COLOR: #FF0000;
}
a:active {
COLOR: #00FF00;
}
</style>
Edited by jeet13 because: n/a
Member Avatar for tgreer

You can override a style declaration with an inline style (that's the "Cascading" part of Cascading Style Sheets).

Member Avatar for Taywin

If you have specified a class for the element, you could simply do it as...

.myclass {
  color: black;
}
.myclass a:link {
  color: black;
}
.myclass a:hover {
  color: black;
}
.myclass a:active {
  color: black;
}
.myclass a:visited {
  color: black;
}

It is depending on how you define your element style.

Edited by Taywin because: n/a
Member Avatar for lps

or even easier. You can try assign class to the link. For example

<a class="link" href="www.google.com">google</a>

and thus style the link using css

.link{color:cyan;}
Edited by lps because: n/a
Member Avatar for Taywin

@Ips
Doing so, every color of link, hover, active, and visited is the same. That would not give much flexibility of assigning color to a link...

Edited by Taywin because: n/a
Member Avatar for lps

what i meant is that giving the class only to specific link with the effect you want. For example, link-navigator, link-footer, link content, etc. Then set their css accordingly.

Member Avatar for Taywin

Hmm... Then what's the different from the example I posted besides the name of class?

Member Avatar for lps

Do you know exactly about the uses of class? If using the a:hover and everything, all the link will having same hover effect. By adding different class to the link, you can separate the links into categories and set the CSS accordingly to the categorized link only...........

Member Avatar for Taywin

Please correct me...

.myclass {
  color: black;
}
.myclass a:link {
  color: black;
}
.myclass a:hover {
  color: black;
}
.myclass a:active {
  color: black;
}
.myclass a:visited {
  color: black;
}

That's the CSS I posted earlier. Doesn't this the same as your idea that assigning a class to an element will effect only elements with the same class? As a result, it could be as follows:

.link-navigator {
  color: black;
}
.link-navigator a:link {
  color: black;
}
.link-navigator a:hover {
  color: black;
}
.link-navigator a:active {
  color: black;
}
.link-navigator a:visited {
  color: black;
}

.link-footer {
  color: black;
}
.link-footer a:link {
  color: black;
}
.link-footer a:hover {
  color: black;
}
.link-footer a:active {
  color: black;
}
.link-footer a:visited {
  color: black;
}

As a result, one can assign different link colors to different elements using classes with flexibilities. This is NOT a global assigning color to the page but only the class. Do you exactly know where I am going about? And my question back to you... Do you know exactly about the uses of class?

Edited by Taywin because: n/a
Member Avatar for lps

but your problem is that you just simply assign the class to the wrapper of the link and although that is a common way to do so but if it wish to be used specifically:

<a class="link-navi-blue">something</a>
<a class="link-navi-red">something</a>
<a class="link-navi-blue">something</a>
<a class="link-navi-red">something</a>

and style with CSS:

.link-navi-red{color:red};
.link-navi-blue{color:blue};
Member Avatar for Taywin

And that's what I mean. This does not give much flexibility in assigning color. You are treating an anchor tag link color as a plain text (span). What if the link is supposed to display a different color after it's been visited as in the default color? In this CSS, every color is the same - link, hover, visited, or active.

Member Avatar for lps

LOL, what i put is just the example, the effect shall be done by

.link-navi-blue:hover{color:cyan}

etc.

Member Avatar for Taywin

That's not the same as you said earlier. If you want to point out, explain the whole thing. There are different between simple CSS class and with "hover"...

Edited by Taywin because: n/a
Member Avatar for lps

OK, Ok, you are right. I am wrong, ok or not??

Member Avatar for chrishubber

cool! I'm a fresh beginner willing to learn CSS. i just finished studying more on html.

Member Avatar for abakinfotech

<head>code</head> and change the color values as required:
<style type="text/css">
a:link {
COLOR: #0000FF;
}
a:visited {
COLOR: #800080;
}
a:hover {
COLOR: #FF0000;
}
a:active {
COLOR: #00FF00;
}
</style>

Add the following CSS code to your style sheet and change the color values as required:

a:link {
COLOR: #0000FF;
}
a:visited {
COLOR: #800080;
}
a:hover {
COLOR: #FF0000;
}
a:active {
COLOR: #00FF00;
}

Member Avatar for sheilaaellis44

You use CSS.

<style type="text/css" media="screen">
<!--

#div1 a:link {
color: #000;
text-decoration: none;
}

#div2 a:link {
color: #F00;
text-decoration: none;
}

-->
</style>

<div id="div1">
<a href="#">Link</a>
</div>

<div id="div2">
<a href="#">Link</a>
</div>

Sheila,

Member Avatar for zobadof

Is there a link to your live website?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.