Jump to content

Archived

This topic is now archived and is closed to further replies.

turbocueca

Having more than one a:link

Recommended Posts

I want to know if it is possible to have two or more a:link on the css styles, 'cause I want to make two different colors for the links of my website.

Share this post


Link to post
Share on other sites
It is, if you use a descending selector. Just use the parent element, (#element, .element) and then put in a:whatever. Like this: #element a:whatever.

Share this post


Link to post
Share on other sites
With CSS there three selectors class (.), id (#) and html tag name (body, html etc)

Now what moberemk meant was to give your anchor tag the id of elementname like so:
[code]<a href="home.html" id="navlink">Home</a>[/code]
Now to style any anchor tag with the id of [b]navlink[/b] you use the following CSS:
[code]#navlink a:link, #navlink a:active, #navlink a:visited {
    color: #FF0000;
}
#navlink a:hover {
    color: #00FF00;
}
[/code]
Say that you want another link but want it different you'll just change the id value to different one such as "bodylink":
[code]<a href="home.html" id="bodylink">Home</a>[/code]Then with your css you'll do this:
[code]#navlink a:link, #navlink a:active, #navlink a:visited {
    color: #FF0000;
}
#navlink a:hover {
    color: #00FF00;
}

#bodylink a:link, #bodylink a:active, #bodylink a:visited {
    color: #0000FF;
}
#bodylink a:hover {
    color: #FF0000;
}
[/code]

Have a read on CSS syntax over at [a href=\"http://www.w3schools.com/css/css_syntax.asp\" target=\"_blank\"]w3schools.com[/a] for a better understanding of CSS selectors.

Share this post


Link to post
Share on other sites
Another, probably better way of doing it, would be to use the (.) selector and create a class that you can use over and over again.

Share this post


Link to post
Share on other sites
I understand +/-, but whats the problem in here, it doesnt work correctly:

[code]<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
#navlink a:link, #navlink a:active, #navlink a:visited {
    color: #FF0000;
}
#navlink a:hover {
    color: #00FF00;
}
-->
</style>
</head>
<a href="home.html" id="navlink">Home</a>
<body>
</body>
</html>[/code]

Share this post


Link to post
Share on other sites
Change this:
[code]<a href="home.html" id="navlink">Home</a>[/code]to
[code]<div id="navlink"><a href="home.html">Home</a></div>[/code]Your CSS should now work.

Share this post


Link to post
Share on other sites
thanks people for everything, i finally could implement two link styles at my website:

[a href=\"http://infocenter.awardspace.com/inter/news2.php\" target=\"_blank\"]http://infocenter.awardspace.com/inter/news2.php[/a]

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.