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
Joshua Montmeny
Courses Plus Student 6,135 PointsLink color error
I've added links to a page I'm working on and colored them to be #006 with appropriate code (included below); for some reason however, when I launch the site and view the links they are an orange color that isn't found anywhere in my code - neither the css nor the html- and it's got me baffled...
I've tried:
a {
color: #006;
text-decoration: none;
}
and:
a:link {
color: #006;
text-decoration: none;
}
both individually and together and still can't seem to make it come out correctly.
Am I missing something?
Here's the HTML:
<DOCTYPE! html>
<html>
<head>
<title>Welcome to Sacramento!</title>
<link rel="stylesheet" href="css/main.css">
<meta charset="utf-8">
</head>
<body>
<header class="main-header">
<h1>Sacramento, California</h1>
<h2>The City of Trees</h2>
<img class="arrow" src="img/arrow.svg" alt="Down arrow">
</header>
<div>
<div class="nav">
<navigation>
<a href="http://port-80-ggvkaksbos.treehouse-app.com/">Home</a>
<a href="http://port-80-ggvkaksbos.treehouse-app.com/">History</a>
<a href="http://port-80-ggvkaksbos.treehouse-app.com/">About</a>
</navigation>
</div>
</div>
<!-- end nav-->
<div class="primary">
<p class="intro">So many things make Sacramento one of the best Cities in which to live that we couldn't possibly list them all, but one thing we know for sure: You're gonna love it here!</p>
</div>
<!-- end primary-->
<div class="secondary">
<div class="ftf">
<img id="farm" src="img/ftf.jpg">
<h4>Farm-to-Fork</h4>
<p>Sacramento is home to one of the most impressive <a href="http://www.farmtofork.com/">Farm-to-Fork</a> movements in the United States, and we're damn proud of it.</p>
<p>Whether it's the <a href="http://exploremidtown.org/best-of-midtown/midtown-farmers-market/">Midtown</a> or <a href="https://www.facebook.com/oakparkfarmersmarket">Oak Park</a> Farmer's Markets or one of the hundreds of local organic farms like <a href="https://www.soilborn.org/">Soil Born</a> or <a href="http://fullbellyfarm.com/">Full Belly</a>, we know you're not going to find produce this fresh or impressive almost anywhere else in the world.</p>
</div>
<div>
<div class="sk">
<img id="bike" src="img/sbk.png">
<h4>Sacramento Bicylce Kitchen</h4>
<p></p>
</div>
</div>
</div>
<footer class="footer">
<p>© Joshua Montmeny 2016</p>
</footer>
</body>
</html>
Here's the CSS:
/*******************************
Main CSS
********************************/
* {
/* border: 1px solid black;*/
}
* {
box-sizing: border-box;
}
body {
color: #878787;
margin: 0;
font: 1em/1.5 "Helvelitca Neue", Helvetica, Serif;
}
h1 {
font-family: Helvetica Neue, helvetica, Serif;
font-size: 5.1875em; /*83px*/
color: #027;
text-shadow: 1px 1px 1px white;
padding-top: 150px;
}
h2 {
font-size: 2.5em; /*36*/
color: #f3f4ff;
text-shadow: 2px 1px 4px #027;
margin-top: -10px;
}
h4 {
color: #878787;
}
a {
color: #006;
text-decoration: none;
}
/*******************************
Pseudo Classes
********************************/
a:visited {
color: rgba(255, 169, 73, .4);
}
a:hover {
color: lightblue;
}
a:active {
color: lightcoral;
}
/*******************************
Layout Styles
********************************/
.main-header {
width: 100%;
height: 700px;
background: linear-gradient(transparent, white 99%),
blue url('../img/sac.jpg') no-repeat center / cover;
}
.arrow {
height: 60px;
width: 60px;
margin-top: 10px;
}
.main-header,
.primary,
.nav,
.footer {
text-align: center;
}
.nav {
margin-top: 65px;
}
.nav a {
font-size: 1.75em; /*28px*/
color: #006;
padding: 40px;
text-decoration: none;
text-shadow: 1px 1px 0px grey;
}
.primary,
.secondary {
width: 70%;
padding: 80px;
margin: auto;
text-align: center;
max-width: 960px;
}
.primary {
margin-top: 50px;
padding: 60px 0 70px;
border-top: 2px solid #006;
border-bottom: 1px solid grey;
}
.intro {
font-size: 1.3em; /*24px*/
line-height: 1.2em;
}
#farm {
width: 350px;
height: 350px;
}
#bike {
width: 200px;
height: 350px;
}
.ftf {
max-width: 45%;
padding: 2%;
float: left;
}
.sbk {
max-width: 45%;
padding: 2%;
float: right;
}
.footer {
padding: 25px 0;
clear: both;
}
Kristopher Van Sant
Courses Plus Student 18,830 PointsHey Joshua! The forum uses Markdown for formatting posts. So when placing code here it needs the proper surrounding Markdown to display properly. You'll want to place three back-ticks, ```, before and after the code. You can also specify what the language is after the first set of back-ticks so that it will have the proper syntax highlighting. I went ahead and fixed what you had. :)
2 Answers
James Ackerman
14,099 PointsThe only thing I'm seeing is that your visited links turn orange, which seems to be the color you have selected for visited links. I copied your code into Notepad++ and everything else seems okay there.
I'm guessing that your browser is seeing these links as 'visited' and is coloring them appropriately. Check line 21 in your CSS...
a:visited { color: rgba(255, 169, 73, .4); }
Let me know if that helps. If not, hopefully some one more experienced can pitch in soon. :)
Mark Pryce
8,804 PointsCompletely off topic I guess but I believe
<DOCTYPE! html>
<!-- should be -->
<!DOCTYPE html>
:)
Joshua Montmeny
Courses Plus Student 6,135 PointsJoshua Montmeny
Courses Plus Student 6,135 PointsSorry that the formatting got all wonky, I cut and pasted it as it would be seen in workspaces, but it seems to have been re-formatted...