Adding Styles from in external file

Question

I'm having issues adding styles to a span tag from an external CSS file to the following snippet of HTML.

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title>About Me</title>
 </head>
 <body>
  <img src="https://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>
  <p>We're Codecademy! We're here to help you learn to code.</p><br/><br/>
  <div>
  <a href="www.google.com"><span>LINK</span></a> 
  </div>
 </body>
</html>

The corresponding CSS is below; it appears that the problematic line is the text-decoration line in the span block, which for some reason isn't being applied. Any input?

img {
 display: block;
 height: 100px;
 width: 300px;
 margin: auto;

}

p {
 text-align: center;
 font-family: Garamond, serif;
 font-size: 18px;
 
}

/*Start adding your CSS below!*/

div {
    height: 50px;
    width: 120px;
    border-color: #6495ED;
    background-color: #BCD2EE;
    border-style: dashed;
    border-width: 3px;
    border-radius: 5px;
    margin: auto;
    text-align: center;
    
}

span {
    color: blue;
    font-family: times;
    text-decoration: none;
}

Possible duplicate of [Remove stubborn underline from link](http://stackoverflow.com/questions/2789703/remove-stubborn-underline-from-link) — André Dion, Apr 19 '17 at 14:49

score 0 · Answer 1 · answered Apr 19 '17 at 14:47

This line was from anchor tag, rather then from span. Check css below:

img {
  display: block;
  height: 100px;
  width: 300px;
  margin: auto;
}

p {
  text-align: center;
  font-family: Garamond, serif;
  font-size: 18px;
}


/*Start adding your CSS below!*/

div {
  height: 50px;
  width: 120px;
  border-color: #6495ED;
  background-color: #BCD2EE;
  border-style: dashed;
  border-width: 3px;
  border-radius: 5px;
  margin: auto;
  text-align: center;
}

span {
  color: blue;
  font-family: times;
}

a {
  text-decoration: none;
}

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title>About Me</title>
 </head>
 <body>
  <img src="https://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>
  <p>We're Codecademy! We're here to help you learn to code.</p><br/><br/>
  <div>
  <a href="www.google.com"><span>LINK</span></a> 
  </div>
 </body>
</html>

Ravi Ubana · Answer 2 · 2017-04-19T14:50:54.133

0

Use this

a {
    color: blue;
    font-family: times;
    text-decoration: none;
}

edited Apr 19 '17 at 14:50

answered Apr 19 '17 at 14:49

Ravi Ubana

397
5
26

`text-decoration` can apply to any element, not just anchors. – André Dion Apr 19 '17 at 14:50
Strange, I added that same block off CSS in Code Academy, but it doesn't want to apply for some reason. Have you heard of any similar issues? – v. carey Apr 19 '17 at 14:57
Might be it is overriding from other defined css or library You can try text-decoration: none !important; – Ravi Ubana Apr 19 '17 at 14:59

Adding Styles from in external file

2 Answers2