Google
HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
link color
Post new topic   Reply to topic    HTML Help Forum Index -> CSS
View previous topic :: View next topic  
Author Message
andrejanubis



Joined: 23 Mar 2008
Posts: 10
Location: Slovenia, Europe
PostPosted: Sun Mar 23, 2008 8:39 am     link color Reply with quote
Hello
Lets say we have:

Code:
<a href="http://www.w3schools.com">http://www.w3schools.com</a>


I would like the link in page to be blue except the part w3schools to be red
when mouse is over the link to be black entire

how can I do that? Lets say blue link is by default on wet pages, so that is solved
what about else? CSS?
thank you

Last edited by andrejanubis on Mon Mar 24, 2008 2:05 am; edited 4 times in total
Corey Bryant
Site Admin


Joined: 15 May 2004
Posts: 8301
Location: Castle Pines North, CO USA
PostPosted: Sun Mar 23, 2008 11:23 am     Reply with quote


Well you could define it in your style sheet - you do have one, right? I don't know exactly what page you are on over there on the W3, but
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled 1</title>
<style type="text/css">
a:link {
   color: #000080;
}
a:visited {
   color: #000080;
}
a:hover {
   color: #000080;
   text-decoration:none;
}
a:active {
   color: #000080;
}
</style>
</head>

<body>
<a href="http://www.example.com">Example</a>
</body>

</html>
Will make the link blue.

_________________
Corey
Toll Free Fax Solutions | Mile High Merchant Accounts | Expression Web Blog
andrejanubis



Joined: 23 Mar 2008
Posts: 10
Location: Slovenia, Europe
PostPosted: Sun Mar 23, 2008 12:53 pm     Reply with quote
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
  <style type="text/css">
    body { background: black; }
    a { font-size:22px; text-decoration:none; }
    a:link { color:blue; }
    a:visited { color:pink; }
    a:hover { color:black; background:white; font-weight: bold; }
    a:active { }
  </style>
</head>

<body>
<a href="http://www.w3schools.com">www.<span style="color:#ff0000"
>w3scho - hoverd should be black - ols</span>.com</a>
</body>

</html>


I would like the link in page to be blue except the part w3schools to be red
when mouse is over the link I would like to be all black on white background
thank you
andrejanubis



Joined: 23 Mar 2008
Posts: 10
Location: Slovenia, Europe
PostPosted: Sun Mar 23, 2008 1:14 pm     Reply with quote
the easy way out :
Code:
span:hover { color: black; }

but is impossible, right
Corey Bryant
Site Admin


Joined: 15 May 2004
Posts: 8301
Location: Castle Pines North, CO USA
PostPosted: Sun Mar 23, 2008 1:39 pm     Reply with quote
If you are using the <span> (inline) element, it is going to over write what you have in the internal style sheet due to the cascading.

_________________
Corey
Payment Processing Forums | Massive Links Forums | International Web Developers Network
Airick1994



Joined: 20 Dec 2007
Posts: 101
Location: Canada, eh?
PostPosted: Sun Mar 23, 2008 7:11 pm     Reply with quote
Try this.

In your style sheet, write:

Code:
a.red {
color: #ff0000;
}


Then, write the following html:

Code:
<a target="_blank"
href="http://www.w3schools.com"
title="HTML XHTML CSS Tutorials References Examples">
http://www.<a target="_blank" href="http://www.w3schools.com" class="red" title="HTML XHTML CSS Tutorials References Examples">w3schools</a>.com</a>


To be honest, I haven't tried this, so I don't know if it will work. I mean, a span would work just as good, but just incase you don't want to do that, there is this. Try it.
andrejanubis



Joined: 23 Mar 2008
Posts: 10
Location: Slovenia, Europe
PostPosted: Mon Mar 24, 2008 2:00 am     Reply with quote
Airick1994 wrote:
Try this.
Then, write the following html:
Code:
<a href="http://www.w3schools.com"
>http://www.<a href="http://www.w3schools.com" class="red">w3schools</a>.com</a>



I would like whole link to be selected, this is not
andrejanubis



Joined: 23 Mar 2008
Posts: 10
Location: Slovenia, Europe
PostPosted: Mon Mar 24, 2008 2:07 am     Reply with quote
Corey Bryant wrote:
If you are using the <span> (inline) element, it is going to over write what you have in the internal style sheet due to the cascading.

how to go around this
andrejanubis



Joined: 23 Mar 2008
Posts: 10
Location: Slovenia, Europe
PostPosted: Mon Mar 24, 2008 2:12 pm     Reply with quote
Thank you, but I got it! Here it is:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
  <style type="text/css">
    body { background: black; color:white; }

    a { font-size:22px; text-decoration:none; }
    a:link { color:blue; }
    a:visited { color:pink; }
    a:hover { color:black; background:white; font-weight: bold; }
    a:active { }
 
    span { color:red; }
    span:hover { color:green; }
  </style>
</head>
<body>
<a href="http://www.w3schools.com">www.<span>w3scho - hoverd should be black - ols</span>.com</a>
</body>
</html>
andrejanubis



Joined: 23 Mar 2008
Posts: 10
Location: Slovenia, Europe
PostPosted: Thu Mar 27, 2008 1:55 am     Reply with quote
I would like to whole link to be black if mouse is over the part where originali is blue
If I hover over .com in the link that part link is black but in the middle is still red
Corey Bryant
Site Admin


Joined: 15 May 2004
Posts: 8301
Location: Castle Pines North, CO USA
PostPosted: Fri Mar 28, 2008 5:58 am     Reply with quote
Try using
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
  <style type="text/css">
    body { background: black; color:white; }

    a { font-size:22px; text-decoration:none; }
    a:link { color:blue; }
    a:visited { color:pink; }
    a:hover { color:black; background-color:white; font-weight: bold; }
    a:active { }
 
    span { color:red; }
    span:hover { color:black; }
  </style>
</head>
<body>
<a href="http://www.w3schools.com">www.<span>w3scho - hoverd should be black -
ols</span>.com</a>
</body>
</html>

_________________
Corey
Toll Free Fax Numbers | Yahoo Merchant Account
andrejanubis



Joined: 23 Mar 2008
Posts: 10
Location: Slovenia, Europe
PostPosted: Fri Mar 28, 2008 9:23 am     Reply with quote
this site realy helpt me, thank you
kingly



Joined: 03 May 2008
Posts: 1
PostPosted: Sat May 03, 2008 6:06 pm     Reply with quote
Thank for good shared.
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> CSS All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 
 
HOSTING / DESIGN
$1.99 Domain Registration
Cheap Web Hosting
Website Templates
MAKE MONEY
Sell Domain Names
Sell Website Templates

Home   |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial