ASP.net Apply unique style to email address

Hi

On the Contact page of the site www.airdata.co.za I use the following markup for two email addresses.
The problem is that these two links are affected by the gradient style that affects the whole site (See Site.Master
site further down). How do I give these email addresses their own unique style so as to override the gradient style.
I don't want a gradient blue background and want the full email address to show for each. Thanks

    <address>
        <strong>Support:</strong><a href="mailto:support@airdata.co.za" >Support@airdata.co.za</a><br />
        <strong>Marketing:</strong><a href="mailto:sales@airdata.co.za">Sales@airdata.co.za</a>
    </address>

Open in new window


<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="Air_Data_Website.Site1" %>

<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="UTF-8" />
    <title>Microsoft Excel Spreadsheet Consulting | Excel Macros | Excel VBA</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.slider img:gt(0)').hide();
            setInterval(function () { $('.slider :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slider'); }, 4000); /*5 sec*/
        });
    </script>
    <style type="text/css">
	.slider { clear:both; position:relative; height:280px; width:90%; }
	.slider img { position:absolute; left:0; top:0;cursor:pointer; }
    </style>

    <style>

        .div{
            background-color: white;
            }
       .div:hover{
            background-color: whitesmoke;
             }
    </style>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

 <!--The classes contained in the style tags are purely for the horizontal navigation bar-->
<style>


  ul 
  {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color:white;
    background: linear-gradient(to bottom, lightskyblue,navy); 
    text-align: center;
    padding: 10px;
    text-decoration: none;
    text-transform: uppercase;
    font-family:'Arial Rounded MT'
}

a:hover, a:active {
    background: linear-gradient(to bottom, lightskyblue,black); 
    text-align: center;
}
#grad1  {
                color:blue;
                background: linear-gradient(to bottom, lightskyblue,navy);
                padding: 20px
           }
#grad2  {
                color:blue;
                background: linear-gradient(to bottom, lightskyblue,navy);
           }
</style>

</head>


<body>
        <!-- Note The grid1 class is picked up from the Site.Master-->
     <div id="grad1">
              <div class="slider" style="margin:0 auto;">
                <img src="Slide_Images/1.jpg" />
                <img src="Slide_Images/2.jpg" />
                <img src="Slide_Images/3.jpg" />
                <img src="Slide_Images/4.jpg" />
                <img src="Slide_Images/5.jpg" />
      
            </div>
     </div>
    <div>
        <!--The ContentPlaceHolder area is used by the other pages to merge their content with the master page-->
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
  <nav id="grad2">
    <ul>
      <li><a href="Default.aspx" class="myHoverButton">Home</a></li>
      <li><a href="About.aspx" class="myHoverButton">About</a></li>
      <li><a href="Contact.aspx" class="myHoverButton">Contact</a></li>         
    </ul>
  </nav>
    <form id="form1" runat="server">
    <div>
        <!--The ContentPlaceHolder area is used by the other pages to merge their content with the master page-->
        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Open in new window

Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
You have applied the gradient style at the element level - which is not a good idea. You should create classes for your different components and controls and apply those classes to the elements you want to style - you style the raw element with the style you want to display by default when no class is specified.

So, in your case two options
1. The right way
Change your current CSS rule on line 49 to this (please note this is a suggestion - you can modify to your particular requirements)

a.button:link, a.button:visited {
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, lightskyblue, navy) repeat scroll 0 0;
  color: white;
  display: block;
  font-family: "Arial Rounded MT";
  font-weight: bold;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  width: 120px;
}

Open in new window

and then add this style to the buttons on your home page

2. The "quick" and not so right way
define a class for your email address es that overrides the styles shown above and place those further down the style sheet. Give your email address links this class to alter the styling of them.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Thanks very much
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.