Doing +1 hyperlinks in a single CSS file.

Status
Not open for further replies.

al man

Distinguished
Aug 15, 2010
24
1
18,570
Hi everyone!

So I'm sort of new on CSS.

I have a perhaps easy questions for you guys.

So I'm starting doing a general .CSS file for merging it (or invoking) into an HTML one.
Thing is, I'm supposed to do different styles for each hyperlinks , or at least, +1 style
like when you have a hyperlink
a.link {yyyyy}


& then when you point on it you get it different by doing

a:hover {yyyyX}

(& with doing yyyyX I mean, changing for instance font-weight:y or anything you will)


Well, thing is, I've making different changes into a:hover & a:visited, like to make it somehow animated w/o having to get deep into other things. Since I'm supposed to do +1, I've tagged first one as a.one:link & so one, a.one:hover; a.two:link & a.two:visited...

bad thing is, I get nothing but the mere links once I've tagged them like that.

Why?

Thanks for your replies, I'll be glad to read & consider them :)
 
Solution
I did not see any HTML examples, but I will take a stab at this.

Are you declaring a class like this: <a class=""one" href="". . .

Or are you declaring the class some other way?

al man

Distinguished
Aug 15, 2010
24
1
18,570
Here it is the one .CSS part for the links (so far, I set two links only, thinking it wouldn't do sense do more):

a.one:link /* unvisited link */
{
#FFFF99;
display:block;
background-color:#FF0999;
width:300px;
text-align:center;
padding:5px;
}

a.one:visited
{
#FFFF99;
display:block;
background-color:#FF0999;
width:300px;
text-align:center;
padding:5px;
}

a.one:hover
{
font-weight:bold;
background-color:#FF0000; /*something darker than the visited/unvisited one*/

padding:7px;
}

a.one:active
{
font-weight:bold;-
background-color:#FF0000;
}


a.two:link /* unvisited link */
{
#FFFF99;
display:block;
background-color:#FF0999;
width:300px;
text-align:center;
padding:5px;
}

a.two:visited
{
#FFFF99;
display:block;
background-color:#FF0999;
width:300px;
text-align:center;
padding:5px;
}

a.two:hover
{
font-weight:bold;
background-color:#FF0000; /*something darker than the visited/unvisited one, too */

padding:7px;
}

a.two:active
{
font-weight:bold;-
background-color:#FF0000;
}

******


But if I make:

a:link
{
...
}

I will indeed, get what I look for. It's just when I tried to "tag" them (a.one:link / a.two:link) when I get this.



Thnx for replying PhilFrisbie!!!
 

al man

Distinguished
Aug 15, 2010
24
1
18,570
Hi there!

I've been doing it like this:

<a href="default.html">Back to homepage</a> for one of the links

<a href="gallery.html">Some extra stuff here...</a> for the second one.

But, for what your declaration shows, I guess I'm doing wrong... :S


In the mean time I tried changing some things in my .CSS,
& it somehow worked:

I did a:link {...} for the first one,
& then a.one:link for the other one,
weird thing is that, the first link
will be the only one showing the block all of the time,
second one will do it only when hovered.


Thanks for your replies!
 

al man

Distinguished
Aug 15, 2010
24
1
18,570
Update... I just opened the .CSS, to start working on it... realized that, now both links have the color block on them.... strange thing... but both have the same first a:link's color :S

Edit: There was a typo: a.one.visited... instead of :

But now block works. & I'm trying what you mentioned before...
 
Status
Not open for further replies.