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

Posted by Trang Ho
Trang Ho
3,518 Points

Why isn't my main.css running?

What's wrong with this code? The HTML appears but not the CSS. For some reason, when I past the top portion of my code in the <head> </head> portion, doesn't appear below.

<html>
<head> <meta charset="utf-8"> <title>Trang Ho | Media Consultant</title> <link rel="stylesheet" href="css/normalize.css"> <link href="<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'"> <link rel="stylesheet" href="css/main.css"> </head>

<body> <header> <a href="index.html" id="logo"> <h1>Trang Ho</h1> <h2>Financial Media Consultant</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>
Trang Ho
Trang Ho
3,518 Points

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

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

wrapper {

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

a { text-decoration: none; }

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

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15 px 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: 20 px 0 0;

}

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

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

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

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

/nav link/ a { color: #6ab47b; }

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

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

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

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

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

7 Answers

rydavim
rydavim
18,814 Points

In your HTML, you probably need to link your external stylesheet main.css, so it looks something like this:

<head>
  <meta charset="utf-8">
  <title>Website Name</title>  
  <link rel="stylesheet" href="css/main.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

The important part is the link to the stylesheet. If you have put in in a seperate css folder, it should link similarly. If it is in the same folder as your html file, use:

<link rel="stylesheet" href="main.css">
David Lane
David Lane
33,414 Points
David Lane
David Lane
33,414 Points

All that code is HTML, can you also post your CSS?

Don't forget that if you have an external CSS file, you have to link it to the HTML page in the header.

Trang Ho
Trang Ho
3,518 Points

<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>Trang Ho | Media Consultant</title> <link rel="stylesheet" href="css/normalize.css"> <link href="<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'"> <link rel="stylesheet" href="css/main.css"> </head>

<body> <header> <a href="index.html" id="logo"> <h1>Trang Ho</h1> <h2>Financial Media Consultant</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>
    <li>
      <a href="img/numbers-01.jpg">
        <img src="img/numbers-01.jpg" alt="">
        <p>Experimentation with color and texture.</p>
        </a>
      </li>

            <li>
      <a href="img/numbers-02.jpg">
        <img src="img/numbers-02.jpg" alt="">
        <p>Experimentation with color and texture.</p>
        </a>
      </li>

            <li>
      <a href="img/numbers-06.jpg">
        <img src="img/numbers-06.jpg" alt="">
        <p>Experimentation with color and texture.</p>
        </a>
      </li>

            <li>
      <a href="img/numbers-09.jpg">
        <img src="img/numbers-09.jpg" alt="">
        <p>drips using photo shop brushes.</p>
        </a>
      </li>

            <li>
      <a href="img/numbers-12.jpg">
        <img src="img/numbers-12.jpg" alt="">
        <p>creating shapes.</p>
        </a>
      </li>

    </ul>

</section> <footer> <a href="http://twitter.com/kytrangho"> <img src="img/twitter-wrap.png" alt="Twitter logo"> </a>

    <img src="img/facebook-wrap.png" alt="facebook logo">


    <p>&copy; 2015 Trang Ho.</p>

</footer>
  </div>

</body> </html>

Trang Ho
Trang Ho
3,518 Points
Trang Ho
Trang Ho
3,518 Points

This is so frustrating. I pasted all of my HTML but the portfion between the <header> </header> isn't appearing. I don't know how else to show it to you.

David Lane
David Lane
33,414 Points

No worries. Unless its in the part of the code not showing, it appears you haven't linked the HTML and CSS file. Also double check your path to your CSS file in your link if the CSS in in a different folder.

Trang Ho
Trang Ho
3,518 Points
Trang Ho
Trang Ho
3,518 Points

<!DOCTYPE html> '''''''''''''' <html>
<head> <meta charset="utf-8">

Trang Ho
Trang Ho
3,518 Points
Trang Ho
Trang Ho
3,518 Points

Is there a way to post a screenshot in this column?

Trang Ho
Trang Ho
3,518 Points
Trang Ho
Trang Ho
3,518 Points

THANK YOU! THANK YOU!

I put the files in the same folder and that solved the problem. It wasn't my code.

rydavim
rydavim
18,814 Points

99% of the time when you find your files aren't loading properly, it's probably the filepath.

When you link to something in your html file, you have to pretend it's from the html file's perspective. I find it's easiest to think about it like I'm giving it directions.

If the css file is in the same folder, you just have to say, "Here is the file, it's with you."

href="main.css"

If the css file is in a folder called "css" you have to say, "It's in the folder called "css", and then it's right there."

href="css/main.css"

Happy coding!

Trang Ho
Trang Ho
3,518 Points
Trang Ho
Trang Ho
3,518 Points

This is bizarre to me. I did have main.css and normalize.css is a css folder and my code was as follows: ````` <link rel="stylesheet" href="css/main.css"> <link href="<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'"> <link rel="stylesheet" href="css/normalize.css">

It didn't work. I took the two css files out of the folder and then it worked.
rydavim
rydavim
18,814 Points

Try putting the backticks ( ``` ) on their own line, we're not getting your code.

If your file tree looks like:

  • MAIN FOLDER
    • index.html
    • css (FOLDER)
      • normalize.css
      • main.css

Then href="css/main.css" should work. If it doesn't work, try href="/css/main.css".

Leading with a forward slash ( / ) is working from the root folder.