Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Rashii Henry
16,433 PointsRemoving 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;
}
Rashii Henry
16,433 PointsIm aware of that. thanks!
6 Answers
Dustin Matlock
33,856 PointsThe 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
mrben
8,068 PointsI 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
16,433 PointsHeres'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>© 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
Courses Plus Student 53,747 PointsHi, 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.
mrben
8,068 PointsFirst 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
16,433 PointsI've updated my question.
Dustin Matlock
33,856 PointsIt works on my end. Have you saved your CSS / hard refreshed?
Rashii Henry
16,433 PointsYes, 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?
Dustin Matlock
33,856 PointsYour first rule works if you do as mrben suggested and put the navigation within body → header.
Rashii Henry
16,433 PointsCheck my comment i posted under mrben's answer.
Dustin Matlock
33,856 PointsDustin Matlock
33,856 PointsHere's how to post your code.