CODEWITHSUNDEEP
htmlcss
CloudJake
CloudJake

Reputation: 156

text: decoration is not working for my link

I'm new to CSS and was just wondering why my button keeps turning blue with an underscore even though I set text-decoration: none.

edit: I added -> a:hover and !important. Now the underline is gone but it still turns blue?

Below are snippets of the HTML and CSS files I am trying to run:

 

   .container {
      max-width: 928px;
    }
    
    h1, h2, p, a {
      font-family: 'Helvetica Neue Thin', 'HelveticaNeue-Thin', 'helvetica neue', helvetica, arial, 'lucida grande', sans-serif;
    }
    
    h1 {
      font-size: 64px;
      font-weight: 100;
      margin-bottom: 20px;
    } 
    
    
    a:hover{
    	text-decoration: none;
    }
    
  a {
      font-size:18px;
      font-weight: 200;
      background-color: rgba(238,68,95,0.9);
      padding: 7px 22px 7px 22px;
      border-radius: 4px;
      color: white;
      text-decoration: none !important;
    }
    
    .main {
      height: 550px;
      padding-top: 55px;
      background: url(https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg);
    }
    
    .main p {
      font-size: 26px;
      font-weight: 200;  
      margin-bottom: 40px;
    }
    
    .section .row {
      padding-top: 50px;
      padding-bottom: 50px;
      border-bottom: 1px solid #dbdbdb;
    }
    
    .store {
      text-align: center;
      border-bottom: 0px;
      padding-bottom:100px
    }
    
    .footer {
      border-top: 1px solid #dbdbdb;
      background-color: #f3f3f3;
      padding: 20px 0px 80px;
    }
    
    .footer ul {
      list-style-type: none;
      padding-left: 0;
    }
    
    .footer li {
      color: #999;
      font-weight: 600;
    }
    
    @media (max-width: 500px) {
      .col-md-6 img {
        padding: 50px;
        width: 100%;
      }
    }
    <!doctype html>
    <html>
      <head>
        <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <!-- The main section -->
        <div class="main">
          <div class="container">
            <h1>Introducing Shutterbugg</h1>
            <p>Capture the moments that matter.</p>
            <a href="#">Download Shutterbugg</a>
          </div>
        </div>
      </body>
    </html>

Upvotes: 0

Views: 124

Answers (2)

Max
Max

Reputation: 95

 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
      <style type="text/css">
        h1, h2, p, a {
        font-family: 'Helvetica Neue Thin', 'HelveticaNeue-Thin', 'helvetica neue', helvetica, arial, 'lucida grande', sans-serif;
        }

        a {
          font-size:18px;
          font-weight: 200;
          background-color: rgba(238,68,95,0.9);
          padding: 7px 22px 7px 22px;
          border-radius: 4px;
          color: white;
          text-decoration: none;
        }
    </style>
 </head>
 <body>
 <div class="main">
      <div class="container">
        <h1>Introducing Shutterbugg</h1>
        <p>Capture the moments that matter.</p>
        <a href="#">Download Shutterbugg</a>
      </div>
  </div>
 </body>
 </html>

Upvotes: 0

SD Dani
SD Dani

Reputation: 154

Try !important

Its a css option to overwrite any css rule over the element

  color: white;
  text-decoration: none !important;
}

You need to specify the element when its hover with the mouse.

a:hover{
text-decoration: none;
}

Upvotes: 2

Related Questions