Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to change link color with inline style 2

Status
Not open for further replies.

bitplayer

Programmer
Feb 22, 2006
10
US
From the FAQ:

<HEAD>

<style type="text/css">
<!--
a:link {color:#000000 ; text-decoration: none; }
a:active {color: #000033; text-decoration: none; }
a:visited {color: #000066; text-decoration: none; }
a:hover {color: #003300; text-decoration: underline; }
-->
</style>

</HEAD>

That's how you can change the color of the different states of the link, that is, the text the you click on to take you to another web page. But in my beginning HTML book, it says there are three types of style sheets: External (a separate page such as styles.css), internal, where you have the style tag inside the head tag as shown above (this will cause those settings to be applied to every link on that page), and finally inline, where "style" is an attribute of the tag (this will obviously only apply to that one specific link). Each type of style will override the previous one (internal will override external, inline will override internal and external). So what I want to know is, how do I translate the above style into an inline style. I can get the color to change with this:

<a href="sessions.html" style="color: red;">Sessions</a>

That will change the color of the link text to red. But how do I change the other aspects of a link. For example, the hover color, and the active color. Following doesn't work:

<a href="sessions.html" style="color: red; hover: green;">Sessions</a>

 
Short answer is you can't. hover, active, visited etc... are pseudo classes and are not supported in inline styles.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
"Kiwi" put it very clearly in his post here:

Kiwi said:
The pseduoclass is a selector. Inline styles contain rules. These are not the same thing and can't be combined that way.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Snippets & Info:
The Out Atheism Campaign
 
If you want to give a special colour scheme to particular links, give them a class:
Code:
<a class="special" href="#">Look at me!</a>
Then you can style them in your stylesheet:
Code:
a.special:link {color:#000000 ; text-decoration: none; }
a.special:active {color: #000033; text-decoration: none; }
a.special:visited {color: #000066; text-decoration: none; }
a.special:hover {color: #003300; text-decoration: underline; }


-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
ChrisHunt - Appreciate it, but the question was how to do it inline.
BillyRayPreachersSon - you nailed it with your reference, thanks!!

The reason I was wondering about this was because of this question I got on my midterm. I'm curious how you HTML/CSS experts would answer it.

If one wants to change the color of a page's links, they can use the a tag. (Points : 1)
True
False
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top