Closed Solved

Doing +1 hyperlinks in a single CSS file.

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 :)
7 answers Last reply Best Answer
More about doing hyperlinks single file
  1. The missing part is how are you declaring the +1 links in your HTML? And while you are at it, post the actual CSS entries also.
  2. 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!!!
  3. Best answer
    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?
  4. 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!
  5. 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...
  6. Best answer selected by Al Man.
  7. This topic has been closed by Area51reopened
Ask a new question

Read More

Programming CSS Apps