How to make these buttons not appear as blue links

Question

So I'm just trying to create a small website. (Don't worry that's not going to be the title) Right now the "Home" "News" "Gallery" and "About us" are not actual buttons that direct to another page. When I do

<a href="Mainpage.htm"> Home </a> 

The button turns into color purple and it is underlined. (I know this is how links are shown) But is there a way that I can make these buttons stay color orange like in the picture without them turning blue and underlined. Thanks http://imgur.com/Czsk4

Answer 1

You can set the styles inline, but the best way to do it is through a css class.

To do it inline:

<a href="Mainpage.htm" style="color: #fb3f00; text-decoration: none;">Home</a>

To do it through a class:

<a href="Mainpage.htm" class="nav-link">Home</a>

a.nav-link:link
{
   color: #fb3f00;
   text-decoration: none;
}
a.nav-link:visited
{
   color: #fb3f00;
   text-decoration: none;
}
a.nav-link:hover
{
   color: #fb3f00;
   text-decoration: none;
}
a.nav-link:active
{
   color: #fb3f00;
   text-decoration: none;
}

To do it through a class, you need to put the css code in a separate css file and link it in or you can put it in the head of the document. The best practice is to put it in an external css file so it can be used throughout.

If you want the orange to be on every link throughout, just remove the ".nav-link" part of the classes and remove the class="nav-link" from the link tag. This will make all links orange unless you have defined a another class and explicitly applied it to a link tag.

Good Luck!