How To Create Link Without Underline?
By default, web browser will underline every link on the page. If you want to remove line, the simplest solution is to use HTML code like this:
[ HTML ]
<a style="text-decoration:none;" href="http://www.beansoftware.com">Bean Software</a>
This part style="text-decoration:none:" will remove line and link will appear like this:
How to remove under lines on all links on page?
To avoid changing of every link on page, you can add new style to HEAD section or use external .css file. Style should look like this:
[ HTML ]
<html>
<head>
<style type="text/css">
a { text-decoration:none;
}
</style>
<title>Page without underlined links</title>
</head>
<body>
... add some links here ...
</body>
</html>
How to underline link or change other styles when mouse is over it?
To create better user experience, you can set four different styles for link, like in code bellow. To make things more complicate, only links inside span with class="myMenu" will be formatted. On this way, you can have different style for navigation links and other style for links in main content. Links on left menu on this page work on similar way.
[ HTML ]
<html><head>
<style type="text/css">
<!--
/* Default style for link */
.myMenu A:link {
text-decoration: none;
color: #000000;
}
/* Style for links visited before */
.myMenu A:visited {
text-decoration: none;
/*color: #FF00FF; */
}
/* Style for active link */
.myMenu A:active {
text-decoration: none;
color: #FF0000;
}
/* Style when mouse is over the link */
.myMenu A:hover {
text-decoration: underline overline;
color: #0000FF;
}
-->
</style>
<title>Page without underlined links</title>
</head>
<body>
<span class="myMenu">
... add some links in menu section ...<br />
<a href="http://www.beansoftware.com/SearchControl.aspx">Search Control</a><br />
<a href="http://www.beansoftware.com/SEO-Pager-Control/">SEO Pager</a><br />
<a href="http://www.beansoftware.com/Shortcut-Controls/">Shortcuts controls</a><br />
</span><br />
... links outside the div tag will keep default style<br />
<a href="http://www.beansoftware.com/">Bean Software</a>
</body>
</html>
Related articles:
1. How To Center DIV Tag?
