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

HTML How to Make a Website Adding Pages to a Website Add Iconography

Posted by Rachel Potgieter
Rachel Potgieter
11,814 Points

Links in my 'about' and 'contact' pages still taking on the default color of blue?

HI. I was just curious to know if I missed a step because I see that in Nicks video, his links appear to be styled with a color whereas mine are defaulted. I have checked my main.css file and I see the links (contact, mail, tweet) have not been given any color values. Did I miss a step?

4 Answers

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points
Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

Here is the code from workspace:

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

and it seems like you are missing:

/* links */
a {
  color: #6ab47b;
}

Because you don't have this code your link will be default-colored :-)

I hope this will help you :-)

Rachel Potgieter
Rachel Potgieter
11,814 Points

Thanks Hendrick. You are a legend! Must have forgot to add it earlier.

V. T van der Vlugt
V. T van der Vlugt
14,883 Points
V. T van der Vlugt
V. T van der Vlugt
14,883 Points

You can style links by

a {

 color: #fff;

}

//unvisited links

a:link {

color: #333;

}

you can change the colour of links when they are hover or if they are visited etc. check pseudo classes of MDN which explains this far better than I can.

CSS pseudo classes by MDN

Hope this helps!

Rachel Potgieter
Rachel Potgieter
11,814 Points

Thanks V. T. I have sorted the problem out. Seems I left out some code ;-)

Rachel Potgieter
Rachel Potgieter
11,814 Points
Rachel Potgieter
Rachel Potgieter
11,814 Points 
GENERAL
*******************************/

body {
  font-family: 'Open Sans', sans-serif;
}

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

img {
max-width: 100%
}

h3 {
  margin: 0 0 1em 0;
}


/*******************************
HEADING
*******************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

/* Logo Text */
#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



 /*******************************
NAVIGATION
*******************************/ 

nav {
  text-align: center;
  padding: 10px 0; 
  margin: ;20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



/*******************************
FOOTER
*******************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

/*******************************
PAGE: PORTFOLIO
*******************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;  
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}



/*******************************
PAGE: ABOUT
*******************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 20%;
}



/*******************************
PAGE: CONTACT
*******************************/

.contact-info {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}



/*******************************
COLORS
*******************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* Green Header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* Nav link */
nav a, nav a:visited {
color: #fff;
}

h1, h2 {
  color: #fff;
}

/* Nav background on mobile */
nav {
  background: #599a68;
}

/* Selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}```