Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Rashii Henry
Rashii Henry
16,433 Points

Removing underlined links in CSS?

I've set my text decoration property to none as Guil Hernandez did in the video.

I've even took it a step further by adding an id to my <a> tags and targeting them from my .CSS file

Neither technique seems to be removing the underline.

here are the anchor tags im trying to target:

<html>
<head id ="top-head" class="main-head"> 
  <link rel="stylesheet" href="css/import-styles.css">

  <title> Lady Virtú </title>
  <meta charset="utf-8">

    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="">Gallery</a>
    <a href="submit.html">Submit</a>
    <a href="">Magazine</a>
    <a href="contact.html">Contact</a>

in my .CSS file, i've tried the following techniques:

.main-head a {

  text-decoration:none;
}

a:link {
    text-decoration:none;
}

a {
    text-decoration: none;

}

Here's how to post your code.

Rashii Henry
Rashii Henry
16,433 Points

Im aware of that. thanks!

6 Answers

The underline isn't removed because

border-bottom: solid 3px;

Also, links should be added to your CSS file in this order

a:link
a:visited
a:hover
a:active

I think the problem is that you have elements you want to display in your head section. This section is to give information to the browser about the page.

Something like this might work:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/import-styles.css">

  <title> Lady Virtú </title>
  <meta charset="utf-8">
</head>

</body>
    <header id ="top-head" class="main-head">
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="">Gallery</a>
        <a href="submit.html">Submit</a>
        <a href="">Magazine</a>
        <a href="contact.html">Contact</a>
    </header>
</body>
</html>
Rashii Henry
Rashii Henry
16,433 Points

Heres's my entire HTML document

<!DOCTYPE HTML>
<html>
<head id ="top-head" class="main-head"> 
  <link rel="stylesheet" href="css/import-styles.css">

  <title> Lady Virtú </title>
  <meta charset="utf-8">
 </head> 

<body>  

  <header id ="menu-header" class="main-header">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="">Gallery</a>
    <a href="submit.html">Submit</a>
    <a href="">Magazine</a>
    <a href="contact.html">Contact</a>




    <h1>Lady Vurtú</h1>
    <span>"The Ultimate Platform for Fashion Artists"</span>
      <img src="css/ladyVirtú.jpeg" alt="Lady Virtú Logo" height=25% width=25%>

  </header>










<!--
  <input class="button" type="submit" name="submit_order" value="Submit"/>

-->

  <h2 class="paragraph-header"> How We Started </h2>
<p>Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.Corea will send this over when she's ready.</p> 

<footer>
    <p>&copy; 2015 Lady Virtue.</p>
</footer>   




</body>



</html>

here's my entire .css file:

* {
  margin:10px;
  padding:10px;
}

/*my main header where the logo is.*/
.main-header{
 background-color:rgba(255,255,255,1.0);
 text-align:center;
 margin: 20px 80px;
 border-style:solid;
 border-color:teal;
 border-width: 10px;

}

.main-header a {
text-decoration:none;

}

/*targets the a links and sets their properties depedning on the state.*/
a:visited {

color:teal;

}

a:link {

  font-size: 20px;
  text-align: center;
    color: teal;
    border-bottom: solid 3px;
    padding: 0 0px 0px 0px;
/*  display: inline-block;*/
}


a:hover {
color:teal;
}



body {
    font-family: Helvetica, sans-serif;
  background-color: black;
  width:60%;
}



header span {
/*  border-bottom: 2px solid;*/
  color:teal;
  text-align-last:center;
  font-size: 26px; /* convert all px to em; 26px / 16 px = rem */
/*
  letter-spacing: 1.3px;
  line-height: 2;
  padding-bottom: 10px;
*/
  font-weight: bolder;
}
Kevin Lozandier
PLUS
Kevin Lozandier
Courses Plus Student 53,747 Points

Hi, Rashii Henry:

Can you share your code? It's likely the selector (in this case a for anchor tags) isn't specific enough in the context you want the links to not be underlined or you've made a typo.

First thing I'd do is use the browser dev tools to check if the CSS rule is being applied or overridden. It might that the rule is being overridden later on in the CSS or in another file.

Failing that, if you post your code people might have more pointers for you.

Rashii Henry
Rashii Henry
16,433 Points

I've updated my question.

It works on my end. Have you saved your CSS / hard refreshed?

Rashii Henry
Rashii Henry
16,433 Points

Yes, still no luck. Every other property that i apply to the second rule seems to work. All of them except the text-decoration property. Does it have something to do with the browser i'm using?

Your first rule works if you do as mrben suggested and put the navigation within bodyheader.

Rashii Henry
Rashii Henry
16,433 Points

Check my comment i posted under mrben's answer.