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

CSS How to Make a Website Customizing Colors and Fonts Pick Fonts and Set Relative Units

Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points
Posted by Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points

Since starting the Fonts on CSS I have lost the green header on my page and the fonts are now blue. Help?

I haven't changed anything else on the main.css sheet that I haven't otherwise been asked to change. Could someone please help?

Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points
Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points

HTML CODE;

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ash Mbuguni | Front End Web Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Changa+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Ash Mbuguni</h1> <h2>Front End Web Developer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="Image/numbers-01.jpg"> <Image src="Image/numbers-01.jpg" alt=""> <P>Experimentation with colour and texture</P> </a> </li> <li> <a href="Image/numbers-02.jpg"> <Image src="Image/numbers-02.jpg" alt=""> <P>Experimentation with kids logo</P> </a> </li> <li> <a href="Image/numbers-06.jpg"> <Image src="Image/numbers-06.jpg" alt=""> <P>Experimentation with belly butter logo</P> </a> </li> <li> <a href="Image/numbers-09.jpg"> <Image src="Image/numbers-09.jpg" alt=""> <P>Experimentation with colour and texture</P> </a> </li> <li> <a href="Image/numbers-12.jpg"> <Image src="Image/numbers-12.jpg" alt=""> <P>Experimentation with colour and texture</P> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/gunitunes"><img src="Image/twitter-wrap.png" alt="Twitter Logo"></a> <p>© 2015 Ashvin Mbuguni</p> </footer> </div> </body> </html>

Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points
Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points

MAIN.CSS CODE:

/**************** GENERAL ****************/

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

wrapper {

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

a { text-decoration: none;

img { max-width: 100%; }

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

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: normail; }

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

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

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

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

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

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

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

/**************** COLOURS ****************/

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

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

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

/* logo text */ h1, h2 { color:#fff; }

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

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

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

Carla Thomas
seal-mask
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points
Carla Thomas
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points

...Did the problem happen as soon as you added the Google font?

If so, have you double-checked that the Google font code was placed in the correct place: UNDER normalize.css and ABOVE main.css?

Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points
Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points

Thanks for your response Ms Thomas, I did double check where the google fonts were placed and they are below normalize.css and above main.css.

7 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points

UPDATED

Ok Ashvin Mbuguni after going over your HTML i've noticed quite a few mistakes. So lets break it down with what's missing.

You are missing a few important pieces of HTML elements. html, head and body tags are all missing from your code. Proper structure should look like below.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ash Mbuguni | Front End Web Developer</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Changa+One' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>

  <!-- CONTENT GOES HERE -->

</body>
</html>

Next we have what i mentioned in my original answer. Although you might be reaching for images from a folded named "Image" you still need to use the 'img' tag in order to tell the browser what it is you are putting there. After that your paragraph tags should be lower case 'p'. View below.

    <li>
      <a href="Image/numbers-01.jpg">
        <img src="Image/numbers-01.jpg" alt="">
        <p>Experimentation with colour and texture</p>
      </a>
    </li>
  • Rule of thumb: all HTML elements are called in lower case letters.

So your HTML should now look something like this.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Ash Mbuguni | Front End Web Developer</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Changa+One' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <header>
    <a href="index.html" id="logo">
      <h1>Ash Mbuguni</h1>
      <h2>Front End Web Developer</h2>
    </a>
    <nav>
      <ul>
        <li>
          <a href="index.html" class="selected">Portfolio</a>
        </li>
        <li>
          <a href="about.html">About</a>
        </li>
        <li>
          <a href="contact.html">Contact</a>
        </li>
      </ul>
    </nav>
  </header>
  <div id="wrapper">
<section>
  <ul id="gallery">
    <li>
      <a href="Image/numbers-01.jpg">
        <img src="Image/numbers-01.jpg" alt="">
        <p>Experimentation with colour and texture</p>
      </a>
    </li>
    <li>
      <a href="Image/numbers-02.jpg">
        <img src="Image/numbers-02.jpg" alt="">
        <p>Experimentation with kids logo</p>
      </a>
    </li>
    <li>
      <a href="Image/numbers-06.jpg">
        <img src="Image/numbers-06.jpg" alt="">
        <p>Experimentation with belly butter logo</p>
      </a>
    </li>
    <li>
      <a href="Image/numbers-09.jpg">
        <img src="Image/numbers-09.jpg" alt="">
        <p>Experimentation with colour and texture</p>
      </a>
    </li>
    <li>
      <a href="Image/numbers-12.jpg">
        <img src="Image/numbers-12.jpg" alt="">
        <p>Experimentation with colour and texture</p>
      </a>
    </li>
  </ul>
</section>
    <footer>
      <a href="http://twitter.com/gunitunes">
        <img src="Image/twitter-wrap.png" alt="Twitter Logo">
      </a>
      <p>&copy; 2015 Ashvin Mbuguni</p>
    </footer>
  </div>

</body>

</html>

Now on to your CSS. I only found two mistakes and they are the following.

/* YOU ARE MISSING THE CLOSING CURLY BRACKET } */
a { text-decoration: none;} 

/* YOUR SELECTED PSEUDO CLASS WAS INCORRECT */
/* selected nav link */ nav a:selected, nav a:hover { color: #32673f; }
Chyno Deluxe
Chyno Deluxe
16,936 Points

Ashvin Mbuguni

I wanted to correct a mistake I made in the CSS i provided you. I was unaware that you had an anchor tag with the class selected when i suggested the change above. You had it correct on your CSS and the only change needed to be made was the closing curly bracket of the anchor tag.

I hope this helps.

Please be sure to mark my answer as the best answer.

Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points
Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points

Mr Chyno Deluxe, thanks very much for clarifying the mistakes to me. Everything seems to be in working order now.

Ms Thomas, it was the green color, the font and the alignment of the headers and the nav links. They were margined to the left rather than central, the corrections Mr Deluxe resolved the problem for me.

Chyno Deluxe
Chyno Deluxe
16,936 Points

Awesome! Glad i could help!

Please be sure to mark my answer as the best answer and if you have any other problems in the future i am more than happy to help answer any questions.

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

At first glance I can see that you have multiple tags that are incorrectly coded. first two i see are your image and paragraph tags. Look over your HTML and make the correct changes. View below. This could be the problem. I've yet to look at the CSS.

<li>
  <a href="Image/numbers-01.jpg">
    <Image src="Image/numbers-01.jpg" alt="">
    <P>Experimentation with colour and texture</P>
  </a>
</li>

<!-- CHANGE TO THIS -->

<li>
  <a href="Image/numbers-01.jpg">
    <img src="Image/numbers-01.jpg" alt="">
    <p>Experimentation with colour and texture</p>
  </a>
</li>
Chyno Deluxe
Chyno Deluxe
16,936 Points

There are a few things wrong with your code. I will post the changes shortly.

Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points
Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points

Thanks, though the img file in my project where i get the 'numbers-01.jpg' etc is actually named Image which is why you might find it slightly confusing. Thanks so much for your help!

Carla Thomas
seal-mask
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points
Carla Thomas
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points

Hello again. Sorry I have not been able to help.

In reference to Chyno's response:

The image tag should not have a capital letter. The Image folder is ok. Just change the tag to lower case.

The same for the paragraph tags.

Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points
Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points

Thanks, I have changed the Image folder name to img and have edited them all in my HTML document. I also did the same with the paragraph tags, however I am still having the same problems. Thanks for your time anyway.

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Well it would seem I got here too late. Your problem seems to already have been solved.bummer. hehe