CODEWITHSUNDEEP
cssclasshyperlink
Varun
Varun

Reputation: 541

the following css doesn't work for second link

 a.nhl:link,a.nhl:visited{font-style:verdana;background: #fff; position: relative;     padding-top:5px; padding-bottom: 5px; color: #666; font-size: 15px; 
font-weight:200; text-transform: uppercase; line-height: 24px;-ms-word-wrap: break-word;  word-wrap: break-word;}
a.nhl:active{color:red;text-decoration:underline;}

a.nhl:hover{color:red;text-decoration:underline;}



a.nhls:link,a.nhls:visited {font-style:verdana;background: #fff; position: relative; padding-top:5px; padding-bottom: 5px; color: #666; font-size: 15px; 

font-weight: 200; text-transform: uppercase; line-height: 24px;-ms-word-wrap: break-word; word-wrap: break-word;}
a.nhls:active{color:red;text-decoration:underline;}
a.nhls:hover{font:bold;color:red;text-decoration:underline;}



     <a class='nhls' href=\"index.php\"  > Home </a >  
    <a class='nhl'  href=\"index.php?title=sample\"> sample </a >

The above css doesn't work for the second link. I am unable to find out what's wrong with class and link.

Thanks

Upvotes: 0

Views: 120

Answers (1)

i alarmed alien
i alarmed alien

Reputation: 9530

There are some problems with your css: font-style: verdana is not valid (if you are trying to specify a font, you need font-face), font: bold should be font-weight: bold, and it could be rewritten to be much clearer and more compact. Try the following:

a.nhl:link,a.nhl:visited,a.nhls:link,a.nhls:visited { 
    font: 200 15px/24px Verdana;
    background: #fff;
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #666;
    text-transform: uppercase;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}
a.nhl:active, a.nhl:hover,a.nhls:active,a.nhls:hover {
    color:red;
    text-decoration:underline;
}
a.nhls:hover{
    font-weight:bold;
}

According to the code you posted, both links will be underlined and red in the hover and active states, and the first link will be bold in the hover state. If you want the text-decoration: underline directive to take effect, you'll need to make sure that you've previously set text-decoration: none on links, as browsers frequently underline links by default.

What I did:

  • combined a.nhl:link,a.nhl:visited and a.nhls:link,a.nhls:visited into a single declaration as they were identical;
  • combined all the classes with color: red and text-decoration: underline in a single declaration;
  • used the font shorthand to set font weight, size, line height, and font face;
  • tidied up the formatting.

If you are having problems with your css, I advise you to use CSS Lint to check for errors in the code.

Upvotes: 1

Related Questions