SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Oct 1999
    Location
    New York, NY
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi --

    In my web page I'm using the CSS as follows:

    STYLE type="text/css">
    body{
    background-color: #ffffff; font-family: Arial, Helvetica, sans-serif
    }
    A:link, A:active{
    text-decoration:underline;
    color:blue;
    }
    A:visited{
    text-decoration:underline;
    color:#993300;
    }
    a:hover{
    color:gray; text-decoration: none
    }
    </STYLE>

    which is working fine. My problem that I'm trying to figure out is simply how do I, let's say, make one certain link have different properties than what the CSS is already specifying?! (ie. Make the new link font color white with no underline when a href linked to).

    I believe it might include something like creating a new class or id?! And I tried experimenting with that creating a new style (.newstyle) and than calling it from the one link I want to be different but what happened was that ALL links then took on the new properties insteasd of just the one... so obviously I'm missing a major point of how to actually impliment this!

    Any help would be appreciated!
    Thanks,
    Josh

  2. #2
    SitePoint Wizard silver trophy Karl's Avatar
    Join Date
    Jul 1999
    Location
    Derbyshire, UK
    Posts
    4,411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
    a.onelink {
    color: #0000ff;
    text-decoration: none;
    }

    a.anotherlink {
    color: #ff0000;
    }
    [/code]

    Now when you set your links up:
    <BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
    &lt;a class="onelink" href="mylink.htm"&gt;a link&lt;/a&gt;
    &lt;a class="anotherlink" href="mylink2.htm"&gt;another link&lt;/a&gt;
    [/code]

    a link - will appear in red with no underline and another link will appear in blue with underline.

    ------------------
    Karl Austin
    KDA Web Services

  3. #3
    SitePoint Guru
    Join Date
    Oct 1999
    Location
    New York, NY
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Thank you Karl --

    That worked perfectly and was exactly what I was looking for!

    One more further question I have that I couldn't figure out based on what you gave me is, how do I add a "visited color link" again to apply just to my a.onelink {.....} style?! (ie. A:Visited{color: blue;} but I want a.onelink to have visited properties white with no underline.)

    Thanks again!
    Josh

  4. #4
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay, you need to make classes of your pseudo-classes. For example:
    <BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>&lt;STYLE&gt;
    A.special:link { text-decoration:none }
    A.special:active { text-decoration:underline; font-weight:bold }
    A.special:hover { text-decoration:underline }
    &lt;/STYLE&gt;[/code]
    This example will make all links of class "special" obey the following rules: links are not underlined, when they are active (being clicked), they are underlined and bold, when they are hovered they are underlined.

    To make a link of class special is really simple:
    <BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>&lt;A CLASS="special" HREF="..."&gt;[/code]
    The only problem here is that Netscape doesn't yet support adding and/or removing boldness and/or underlining to text when it is clicked and/or hovered, and doesn't support the hover pseudoclass at all.


    ------------------
    -Kevin Yank.
    http://www.SitePoint.com/
    Helping Small Business Grow Online!


Bookmarks

Posting Permissions

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