डाउनलोड पी.डी.एफ. ई-बुक्स
CSS - Link Styling

आपने अबतक देखे हुए सभी websites के navigation links को एक विशिष्ट design में देखा होगा | ये सभी Links को CSS में बनाये जाते है |

कुछ links colors होती है, कुछ links पर background होती है, कुछ links पर mouse लाने पर वो text color या background color change कर देती है | इस प्रकार से links को design करने के लिए CSS के लिए कुछ properties और pseudo-class का इस्तेमाल किया जाता है |


Some Selectores use for Links(<a>) in CSS

  • a:link - ये Default होता है | जबतक कोई clicked नहीं करता है तबतक ये change नहीं होता है |
  • a:visited - जब कोई link पर click करता है तब visited state होता है |
  • a:hover - जब कोई link पर mouse over करता है तब ये hover state होता है |
  • a:active - अपने Webpage के हिसाब से active link दी जाती है |
  • a:focus - Tab button के जरिये अगर कोई link पर जाता है तो तब ये focus state होता है |

Example for Selectores in CSS

<style>
ul li{padding:10px;}
a.linkDemo:link{
 color : green;
}
a.visitedDemo:visited{
 color : blue;
}
a.hoverDemo:hover{
 background-color : green;
}
a.activeDemo:active{
 font-size : 20px;
}
a.focusDemo:focus{
 font-size : 30px;
}
</style>
<ul class="myul" type="none">
<li><a class="linkDemo" href="#">Simple Unvisited Link</a></li>
<li><a class="visitedDemo" href="#">Click Link to Change Font Size</a></li>
<li><a class="hoverDemo" href="#">Mouse Over to Change Background Color</a></li>
<li><a class="activeDemo" href="#">Hold Mouse Click on Me to Change Font Size</a></li>
<li><a class="focusDemo" href="#">Trying to click through the Tab Button or Clicked</a></li>
</ul>


Default Link Style

HTML में links(<a> with 'href' attribute) के लिए default style ये link पर blue color और link text पर underline होती है | जब link पर mouse hold किया जाता है उन link text का color; red हो जाता है और link पर visit की जाती है तब उसका color; purple हो जाता है |

<style>
a{
 font-size : 25px;
}
</style>

<a href="#">Default Link Style</a>


CSS Box Buttons

Example में CSS Link को Boxes में design किया गया है |

<style>
a.link1{
 font-size : 25px;
 border : 3px solid black;
 padding : 6px;
 border-radius : 5px;
 text-decoration : none;
}
a.link1:hover{
 color : white;
 background-color : black;
 border : 3px solid black;
 border-radius : 5px;
}

a.link2{
 font-size : 25px;
 padding : 6px;
 text-decoration : none;
}
a.link2:hover{
 color : white;
 background-color : black;
 border-radius : 5px;
}

a.link3{
 font-size : 25px;
 padding : 6px;
 color : white;
 background-color : blue;
 border-radius : 5px;
 text-decoration : none;
}
a.link3:hover{
 color : black;
 background-color : white	;
}
</style>

<a class="link1" href="#">HoverMe-link1</a>

<a class="link2" href="#">HoverMe-link2</a>

<a class="link3" href="#">HoverMe-link3</a>