. 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?

Recommended Answers

All 18 Replies

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>

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

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.

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

@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...

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.

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

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

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?

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

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.

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

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

etc.

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

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

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

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

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,

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.