SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Styling links

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Styling links

    Hey guys,

    I'm having problems getting styling to apply to my links, I'm wondering if you can help me work out what I'm doing wrong.
    Currently I'm specifying it as such:

    Code:
    	a.link{
    			color:#2755A1;
    			font-weight:normal;
    			text-decoration:underline;
    		}
    		a.visited{
    			color:#red;
    			font-weight:normal;
    			text-decoration:underline;
    		}
    I'm pretty new to CSS so there's all manner of stupid mistakes I might be making What are the key things I should be checking to work out how to fix this?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cheli View Post
    there's all manner of stupid mistakes I might be making
    Don't worry, we are here to help.

    Here you are using "pseudo classes" rather than actual classes, so you need a colon rather than a dot—a:link and a:visited.

    When using a "hex" color value, like here—#2755A1—you need the # at the front, but when using a named color, you don't want it, so just use "red", rather that "#red":

    Code:
    a:visited{
      color: red;
      font-weight:normal;
      text-decoration:underline;
    }
    I would write those styles like this:


    Code:
    a {
      color:#2755A1;
      font-weight:normal;
      text-decoration:underline;
    }
    
    a:visited{
      color:red;
    }

    The styles in blue above are probably redundant and can be deleted, as they are the defaults anyway. Only use then if you are overriding bold and/or no-underline declared earlier on (which is unlikely).

    You don't need to repeat styles on the :visited pseudo class, as they will be transferred anyway. And the :link on the <a> is not normally needed.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the dot/colon tip and hash tag pick up! I originally tried styling using just 'a' but it wasn't working either, hence my sloppy experimenting that I posted up above. Luckily though, when I went back to apply your tips, I noticed that both selectors were sitting above the closing bracket of another selector's declaration, ie.

    Code:
    .header p{
    			color:#939598;
    			text-align: right;
    
    		a{
    			color:#2755A1;
    		}
    		}
    Suffice to say this mistake has been rectified, the page is now styled correctly and I'm a little red faced!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cheli View Post
    I'm a little red faced!
    It doesn't look so bad in CSS:

    Code:
    .face {color: red;}

  5. #5
    SitePoint Member
    Join Date
    Jan 2013
    Location
    NewYork
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need not to apply # before the color name.
    In case you are using hex codes for color then you have to apply #.
    So, instead of #red, simply write red.


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
  •