Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    Creating Rollover Links using CSS - An Introduction

    This basic introdcution to CSS Rollover Links explains the basics of implementing the styles into your own webpage, while explaining some of the complicated Jargon on the way.

    When you create a basic stylesheet, it will look something similar to this, just containing your 'link' properties.
    Code:
    <style type="text/css"> 
    
    a { 
    
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #FF6600 ; 
    font-weight: normal; 
    text-decoration: none; 
    
    } 
    
    </style>
    So that you can understand what each line means, here is a little Jargon buster:
    • "font-family:" - This line contains information on a variety of fonts that can be used. The system automatically goes through each of the fonts until it finds a chosen font on the users system.
    • "font-size:" - This indicates what size the font needs to be. It can either be determined in 'px' (pixels), or 'pt' (points).
    • "color:" This indicates what colour the links will be on the web page.
    • "font-weight:" - This indicates whether you want the links emboldened or not. To have bold links, change 'normal;' to 'bold;'
    • "text-decoration:" - This indicates a variety of options, however it is more commonly used to unndicatee whether you want underlined links or not. If you do, change 'none;' to 'underlined;'.


    To add rollover properties to this stylesheet, we just need to add the following code to our '<style>' tag:
    Code:
    a:hover { 
    
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #0000FF ; 
    font-weight: normal; 
    text-decoration: none; 
    
    }
    This code will change links on the web page from orange to blue upon rollover

    Creating Multiple Link Styles on one page

    Following on from the basics, above, I now explain how to simply include two different link styles in your webpages.

    We already have the following coding from above:
    Code:
    <style type="text/css"> 
    
    a { 
    
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #FF6600 ; 
    font-weight: normal; 
    text-decoration: none; 
    
    } 
    
    a:hover { 
    
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #0000FF ; 
    font-weight: normal; 
    text-decoration: none; 
    
    } 
    </style>
    To enable us to include two different link styles in our webpages, it is not neccesary for us to name this default style, however, in this instance, it is simpler for us to do so. For example purposes, we will call this style 'link1'. To enable us to set it using 'class=' properties, we add a "." before the name, so the class is now called '.link1', like so:
    Code:
    <style type="text/css"> 
    
    .link1 { 
    
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #FF6600 ; 
    font-weight: normal; 
    text-decoration: none; 
    
    } 
    
    .link1:hover { 
    
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #0000FF ; 
    font-weight: normal; 
    text-decoration: none; 
    
    } 
    </style>
    From this, we can duplicate the set of properties, so get a different link, which underlines and emboldens the hyperlink upon rollover. We'll call this style '.link2'.
    Code:
    <style type="text/css"> 
    
    .link1 { 
    
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #FF6600 ; 
    font-weight: normal; 
    text-decoration: none; 
    
    } 
    
    .link1:hover { 
    
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #000000 ; 
    font-weight: normal; 
    text-decoration: none; 
    
    } 
    
    .link2 { 
    
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #FF0000 ; 
    font-weight: normal; 
    text-decoration: none; 
    
    } 
    
    .link2:hover { 
    
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #FF0000 ; 
    font-weight: bold; 
    text-decoration: underline; 
    
    } 
    </style>
    And there we have it, all you need to do now is, to assign the style to certain links, add the property 'class="link2" ', or 'class="link1" ' to the "<a href>" property.
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  2.  

  3. #2
    Junior Member
    Join Date
    Sep 2005
    Location
    Campbelltown, Sydney, Australia
    Posts
    1
    Member #
    11243
    nice tutorial, simple and works well!

  4. #3
    Junior Member
    Join Date
    Mar 2006
    Posts
    19
    Member #
    12768
    And there we have it, all you need to do now is, to assign the style to certain links, add the property 'class="link2" ', or 'class="link1" ' to the "<a href>" property.
    So the link would be like <a href="linkedsitehere" class="link1"> ?
    Could you also do <a class="link1" href"linkedsitehere"> ?
    And last, could you do an id instead of class. Sorry for the long post.

  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    You mean is

    Code:
    <a href="linkedsitehere" class="link1">
    the same as

    Code:
    <a class="link1" href="linkedsitehere">
    ? ... yes... there is no difference in what order you place attributes.

    Yes you can do an idea instead of a class... just remember that you can only use the id attribute once per html page. So you can't have 2 id="link1" in the same page.
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  6. #5
    Junior Member
    Join Date
    Mar 2006
    Posts
    19
    Member #
    12768
    Yes, it worked. Thank you, great tutorial.

  7. #6
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    I've had issues with link ids in IE.
    Shani

    I have an eye for detail like you'd never believe.

  8. #7
    Senior Member Arkette's Avatar
    Join Date
    Jan 2006
    Location
    Europe
    Posts
    102
    Member #
    12297
    There is no need to repeat the same information detail for each of the pseudo tags you only need to include the details for that which will change the rest will cascade from above. For example:-
    Code:
    a { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #FF6600 ; 
    font-weight: normal; 
    text-decoration: none; 
    }
    a:hover{
    colour:#0000ff
    }
    End of Line.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:51 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com