www.webdeveloper.com
Results 1 to 12 of 12

Thread: css links

  1. #1
    Join Date
    Feb 2003
    Posts
    9

    css links

    Okay, I know how to set the values of links for a whole document, but how do you do it in one section of page. I tried using span but I couldn't figure it out. If you could help me out, it would be much appreciated.
    Thanks,
    Matt.

  2. #2
    Join Date
    Nov 2002
    Posts
    2,632
    Let's say you want the links in your menu to behave differently than the rest of your links. I define them this way in my CSS file.

    p.menu a {
    text-decoration:none;
    font-weight:bold;
    }

    p.menu a:link {
    color:#9E575A;
    }

    p.menu a:visited {
    color:#9E575A;
    }

    p.menu a:hover {
    color:#949871;
    }

    Basically you are saying that when those type of links are used within a <p> tag that has a class equal to menu, use those properties instead. When you want to create your menu do this.

    <p class="menu">
    link code
    </p>

    You can use <div> tags and <span> tags should work too.

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    The only problem with specifying link text colors in a tag other than the <a> tag is that the underline in most browsers will be displayed as the color specified for the link, but the text itself will be the color specified in the other tag, for the example above, the color for the <p> tag.

    I've found this to be the best way.

    INSIDE A STYLE SHEET

    a {

    color: blue;

    }

    a.differentLink {

    color: gray;

    }

    IN THE HTML CODE

    <a href="">Blue colored link</a>

    <a href="" class="differentLink">Gray colored link text</a>


    You could also specify different properties for the various states that a link can be in: unvisited, visited, active, and when the mouse is hovering over it.

    a:hover {
    color: red;
    }

    a.different:hover {
    color: purple;
    }

    If you already know about that, forgive the review.

    A great site for CSS is http://www.w3schools.com/. It has a complete reference for CSS 1, 2, and 3.

  4. #4
    Join Date
    Dec 2002
    Posts
    19
    <p> is considered a container and used for text layout
    as for links most begin with <a href="">link text</a> and CSS is used to effect the link to change color, size..etc. The use classes or ids are used to create the style.

    LIKE


    <STYLE>
    a:visited,a:link,a:active
    {color:gold;text-decoration:none;}

    .menu {color:red;width:100%;}
    .menu2 {colorurple:font:32pt;}

    </STYLE>


    HTML:

    <a herf="http://www.winterland.com" class="menu" >Winterland</a>

    < a href="http://www.cnn.com" class="menu2">CNN News></a>


    I think?
    Tables work, but eatin becomes messy!

  5. #5
    Join Date
    Dec 2002
    Posts
    19
    <p> is considered a container and used for text layout
    as for links most begin with <a href="">link text</a> and CSS is used to effect the link to change color, size..etc. The use classes or ids are used to create the style.

    LIKE


    <STYLE>
    a:visited,a:link,a:active
    {color:gold;text-decoration:none;}

    .menu {color:red;width:100%;}
    .menu2 {colorurple;font:32pt;}

    </STYLE>


    HTML:

    <a herf="http://www.winterland.com" class="menu" >Winterland</a>

    < a href="http://www.cnn.com" class="menu2">CNN News></a>


    I think?
    Tables work, but eatin becomes messy!

  6. #6
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by toicontien
    The only problem with specifying link text colors in a tag other than the <a> tag is that the underline in most browsers will be displayed as the color specified for the link, but the text itself will be the color specified in the other tag, for the example above, the color for the <p> tag.


    Which "most browsers" would that be specifically?
    At least I usually use the technique posted by spufi and IME most browsers works just fine with it.
    // Stefan Huszics

  7. #7
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    I should restate what I wrote above. If the anchor tag is the inner-most element, then it takes on the styles given to the <a> tag. The different undeline color comes in to play if you do this:

    IN THE HEAD:
    <style type="text/css" media="screen">

    a:link {color: red; }
    a:visited {color: green; }
    a:active {color: blue; }
    a:hover {color: purple; }

    span {color: black; }

    </style>


    AND IN THE BODY:
    <a href="">BLAH</a><p>

    <a href=""><span>BLAH</span></a>

    In this case, I've found that IE5/mac, IE6/PC, NS 6/7, Mozilla 1, Opera 6/7 would have black text, but the underline would be the color specified in the <a> tag. IE5 and 5.5 /PC would display the color specified in the <span> tag.

    Regardless, the best way to change a link's color is to do so using classes and id's.

  8. #8
    Join Date
    Feb 2003
    Posts
    21
    this is how i do it


    a.navlinks:link { color:; text-decoration:underline; color: #FFFFCC}

    a.navlinks:visited { color:; text-decoration:underline; color: #999999}

    a.navlinks:hover { color:; text-decoration:underline; cursor:default; color: #333333; background-color: #FFFFCC}

    a.navlinks:active { color:; text-decoration:underline; color: #999999}

    i use a different class for each set of links like in this case all my global navigation links are in this style.....i use an external styles sheet and then just change classes for each of my links depending on where they appear or what they do

  9. #9
    Join Date
    Feb 2003
    Posts
    21
    this is how i do it


    a.navlinks:link { color:; text-decoration:underline; color: #FFFFCC}

    a.navlinks:visited { color:; text-decoration:underline; color: #999999}

    a.navlinks:hover { color:; text-decoration:underline; cursor:default; color: #333333; background-color: #FFFFCC}

    a.navlinks:active { color:; text-decoration:underline; color: #999999}

    i use a different class for each set of links like in this case all my global navigation links are in this style.....i use an external styles sheet and then just change classes for each of my links depending on where they appear or what they do

  10. #10
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    Don't do color:; If you don't want to specify a color, just remove that part.

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  11. #11
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by toicontien
    The different undeline color comes in to play if you do this: ...
    But since you only do that if you _want_ to have different colors, it's not really a problem, is it.


    Regardless, the best way to change a link's color is to do so using classes and id's.
    If you have say 20 links in a section that should all have the same formating, it will both save filesize, manual labour in typing as well as make the HTML code less cluttered if you place the class/id on a parent, not each individual link.

    Those are the reasons I commonly take advantage of this technique.
    // Stefan Huszics

  12. #12
    celebguy_dv Guest

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