SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Css class isn't working on links.

    I have put a CSS rule for my links, but I do not want all of my links to follow this rule so I created a "class" rule for these links and It did not seem to work. Just wondering if this is the right thing to do or what else I should do.

    Code:
    A:link  {
      font-size:16px;
      color:#404040; 
      text-decoration:none;
    }
    
    A:visited  {
      font-size:16px;
      color:#404040; 
      text-decoration:none;
    }
    
    A:active  {
      font-size:16px;
      color:#404040;
      text-decoration:none;
      background-color:#888888;
    }
    
    A:hover  {
      font-size:16px;
      color:#404040;
      text-decoration:underline;
    }
    Code:
    a.underlined  {
      text-decoration:underlined;
    }
    
    <a href="#" class="underlined">#</a>

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    A typo?
    Code:
    a.underlined  {
      text-decoration:underlined;
    }
    You'll need to change the uppercase "A" selectors to lowercase, too. Windoze doesn't care, but linux computers do.
    Code:
    A:link {}

  3. #3
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha thanks for pointing that out I guess I was rushing it. And thanks for the advice to I'll change that.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by TheLoneWanderer View Post
    Haha thanks for pointing that out I guess I was rushing it. And thanks for the advice to I'll change that.
    Happens to all of us My bane is {font-style:italics}

  5. #5
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    My banana peel is the {margin; 20px 0 0 20px;}

    To get the show 100%, you need to follow the rule "LoVeHAte", just in this order:
    Code:
    a:link    {...}
    a:visited {...}
    a:hover   {...}
    a:active  {...}
    Otherwise the hover state will overrule the active-state.
    And better is to follow: "LoVe, (s)He FAked" , with also the focus state mentioned: (*)
    Code:
    a:link    {...}
    a:visited {...}
    a:hover,
    a:focus   {...}
    a:active  {...}
    This is for accessibility (see guideline): now no-mouse-using vistitors, who use the Tab-key to find the links in the page, can also see where they are by the "hover-change" (without mouse you cannot see a hover!).

    In your case, it could be in a short notation:
    Code:
    a { /* in general, so also for a:link */
    	font-size: 16px;
    	color: #404040;
    	text-decoration: none;
    	}
    a:visited {
    	color: green;
    	}
    a:hover,
    a:focus {
    	color: red;
    	text-decoration: underline; /* exception */
    	}
    a:active { /* at mousedown */
    	text-decoration: none; /* overruling the hover/focus */
    	background-color: yellow;
    	}
    
    a.underline {
    	text-decoration: underline;
    	}

    Attention: there are browser differences in the interpretation of the visited/active/focus state!
    • IE7 after coming back: the green text + yellow background is showed, without underline (= visited + active state).
    • FF, IE10 and Opera after coming back: the red text + normal background is showed, with underline (= hover/focus state).
    • Safari-Win: the same, but as soon as you move the mouse, the green text + normal background is showed, without underline (= visited).
    • Chrome after coming back: the green text + normal background is showed, without underline (= visited).
    • All browsers: after a click somewhere else in the page (losing focus/active state), the visited state is showed (= green text + normal background + no underline in the first line).

    Not too much!
    But I guess that most visitors know which links they have clicked before, and don't have to be remembered by a special "visited" state.
    • So to avoid confusion, I usually omit the visited and active state: just the a {..} and the a:hover, a:focus {...} will be enough.

    Some other remarks about accessibility:
    • The guideline 1.4.1 says (in other words): "A link must be clearly distinguishable from normal text, not in different color alone". - Links without underline can be invisible for people with colorblindness or diminished color contrast power!
    • Note: this forum does not underline links, and they are difficult to see by their color difference (sometimes I don't notify a link...). Brrr! - (See this topic!)
      (exception: in my posts I underline the links by hand)

    • For Tab-visitors the outline dots are very important. They cannot be removed just for the sake of the design beauty.
      See this site: www.outlinenone.com

    ____________
    (*) The mnemonic is an invention of Goeroeboeroe, last post in this forum topic.


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
  •