www.webdeveloper.com
Results 1 to 5 of 5

Thread: link question

  1. #1
    Join Date
    Jul 2010
    Posts
    71

    link question

    HTML Code:
    a:link{
    color:white;
    text-decoration:none;
    }
    
    a:visited{
    color:white;
    text-decoration:none;
    }
    
    a:hover{
    text-decoration:none;
    }
    Can i make it, instead of all <a> tags make just one class? Thanks

  2. #2
    Join Date
    Sep 2010
    Location
    Karachi, Pakistan
    Posts
    3
    i THINK that would require some xml..... if your saying u dont want to put the "a".....

    other wise if u want to make that the style of certain links like what u define then... you would do it like this...for example...

    .linktype1 A:link {text-decoration:none; color:white}
    .linktype1 A:visited {text-decoration:none; color:white}
    .linktype1 A:active {text-decoration:none; color:white}
    .linktype1 A:hover {text-decoration:underline overline; color:white}

    linktype1 is now the class, and if you want to use it in your html code;

    ...click <b class="linktype1"><a href="whatever.html">here</b></a> for....

    the b before class can be replaced by h2 or p or anything like that, i just use "b" to make it bold.....

    hope i helped

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    Yes:
    Code:
    a{
    color:white;
    text-decoration:none;
    }
    Then you can do your others if they are different from this.

    You may not know it, but a link has four different states that it can be in. CSS allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:

    * link - this is a link that has not been used, nor is a mouse pointer hovering over it
    * visited - this is a link that has been used before, but has no mouse on it
    * hover - this is a link currently has a mouse pointer hovering over it/on it
    * active - this is a link that is in the process of being clicked

    Order matters. If "a:active" precedes "a:hover", the effects in "a:hover" will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.
    Last edited by Major Payne; 10-01-2010 at 08:19 AM. Reason: Added more content

  4. #4
    Join Date
    Jul 2010
    Posts
    71

    Wink

    Quote Originally Posted by DaWeb D View Post
    i THINK that would require some xml..... if your saying u dont want to put the "a".....

    other wise if u want to make that the style of certain links like what u define then... you would do it like this...for example...

    .linktype1 A:link {text-decoration:none; color:white}
    .linktype1 A:visited {text-decoration:none; color:white}
    .linktype1 A:active {text-decoration:none; color:white}
    .linktype1 A:hover {text-decoration:underline overline; color:white}

    linktype1 is now the class, and if you want to use it in your html code;

    ...click <b class="linktype1"><a href="whatever.html">here</b></a> for....

    the b before class can be replaced by h2 or p or anything like that, i just use "b" to make it bold.....

    hope i helped

    Thanks both of you, yea imm pretty good with css but its been a little bit so i forget some of the things i didn't use much.

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    Additional info if you want to look it over:

    Pseudo Classes

    You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.

    You can do this in the following fashion:

    Code:
    #pseudo_content a:link {color: #090;}
    #pseudo_content a:visited {color: #999;}
    #pseudo_content a:hover {color: #333;}
    #pseudo_content a:focus {color: #333;}
    #pseudo_content a:active {color: #090;}
    Now assuming that you have your main content in a division named "content" all links within that division will now be styled by this new style selector. Should your selector have a different name, just change the #pseudo_content selector to match your division name.

    Then for the links in a column you could use the following:

    Code:
    #pseudo_column a:link {color: #090;}
    #pseudo_column a:visited {color: #999;}
    #pseudo_column a:hover {color: #333;}
    #pseudo_column a:focus {color: #333;}
    #pseudo_column a:active {color: #090;}
    Once again, this assumes the name of the column division, just change the name to match yours.

    This same method can be accomplished by declaring a class instead of an id.

    Code:
    a.pseudo_column:link {color: #090;}
    a.pseudo_column:visited {color: #999;}
    a.pseudo_column:hover {color: #333;}
    a.pseudo_column:focus {color: #333;}
    a.pseudo_column:active {color: #090;}
    Though in this case you will need to add a class to each link

    Code:
    <a class="pseudo_column" href="" title="">some link text</a>
    But, there is still yet an easier way

    Code:
    .pseudo_column a:link {color: #090;}
    .pseudo_column a:visited {color: #999;}
    .pseudo_column a:hover {color: #333;}
    .pseudo_column a:focus {color: #333;}
    .pseudo_column a:active {color: #090;}
    Then in the (X)HTML file

    Code:
    <div class="pseudo_column">
    <a href="" title="Link Description">Link Text Description</a>
    </div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles