Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Hello, I am working on the How to Build a Website track, and it seems that none of my CSS is being applied.

not much more to say here

16 Answers

Got in touch with Nick...it turned out that the name of my css folder was in all caps

Kirby Abogaa
Kirby Abogaa
3,058 Points

You need to specify if "logo" and "wrapper" is an ID or a CLASS. Add a hash(#) before an ID-name, and add a period(.) before a CLASS-name, without any space in between.

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

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: 15px 0; font-size: 1.75em; }

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

/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; }

Isaac Calvo
Isaac Calvo
8,882 Points

the most common reason for 'no css being applied' is a link error when you link the CSS page to the HTML. double/triple check to make sure you are correctly linking the css to your html.

I wish that were it...they just didn't copy over for some reason. Weirdly the CSS is applied to the HTML when I place my code in Code Pen.

Also, if any one has a second, I watched the video on "Tips for asking questions" and that cued me into going to Codepen, but I'm still don't know how to include my code in the forum as it looks in other posts I've seen.

Here's my HTML. Is there something wrong with the links? <html>

<head> <meta charset="utf-8"> <title>Themes Come True | Children's Party Planner</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/cssfamily=Changa+One:400,400italic|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>Themes Come True</h1> <h2>children's party planning</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Gallery</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="id wrapper"> <section> <ul> <li> <a href="img/gallery1.jpg"> <img src="img/gallery1.jpg" alt=""> <p>April Showers and Rainbows Party</p> </a> </li> <li> <a href="img/gallery2.jpg"> <img src="img/gallery2.jpg" alt=""> <p>Oscar Inspired "Olivia" Party</p> </a> </li> <li> <a href="img/gallery3.jpg"> <img src="img/gallery3.jpg" alt=""> <p>Annie 2014 Movie Party</p> </a> </li> </ul> </section> <footer> <a href="https://twitter.com/eventthemes"><img src="img/twitter-wrap.png" alt="Twitter logo"> </a> <a href="https://www.facebook.com/themescometrue"><img src="img/facebook-wrap.png" alt="Facebook logo"></a> <p>© 2014 Themes Come True</p> </footer> </div> </body>

</html>

Kirby Abogaa
Kirby Abogaa
3,058 Points

Please check if the CSS link you included in your html is linked properly. Also check where the css file is located and make sure you direct the href attribute to that file (ie. in or out of folders).

For example:

<head>
    <link rel="stylesheet" href="styles.css" type="text/css">
</head>
</html>``` 


Your HTML seems to be fine.
Isaac Calvo
Isaac Calvo
8,882 Points

https://teamtreehouse.com/forum/linking-css-to-html

above link is an earlier discussion on linking css to html

Oops sorry: <html> <head> <meta charset="utf-8"> <title>Erin Connolly | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/cssfamily=Changa+One:400,400italic|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>Erin Connolly</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Gallery</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id = "id wrapper"> <section> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Amazing Picture</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Beautiful Picture</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Best Picture</p> </a> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Worst Picture</p> </a> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Another Picture</p> </a> </li>
</ul> </section> <footer> <a href="https://twitter.com/connollyonnolly"><img src="img/twitter-wrap.png" alt="Twitter logo"> </a> <a href="https://www.facebook.com/econnoll"><img src="img/facebook-wrap.png" alt="Facebook logo"></a> <p>© 2014 Themes Come True</p> </footer> </div> </body> </html>

Kirby Abogaa
Kirby Abogaa
3,058 Points

Try adding type="text/css" to your css file link.

No dice :(

Isaac Calvo
Isaac Calvo
8,882 Points
<head>
<title>Erin Connolly | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/cssfamily=Changa+One:400,400italic|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="css/main.css">
</head>

try wrapping above in head tags

Kirby Abogaa
Kirby Abogaa
3,058 Points

I noticed that too man...thought its just a typo while she was posting it here...but yeah he's right Erin, if its not inside the head tags it will not work. Its a major part of the HTML framework.

You're not going to believe this, but....they're just not showing up when I post the answer in the forum??

<head> <meta charset="utf-8"> <title>Erin Connolly | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/cssfamily=Changa+One:400,400italic|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css" type="text/css"> </head>

    <meta charset="utf-8">
    <title>Erin Connolly | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/cssfamily=Changa+One:400,400italic|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="css/main.css" type="text/css">
  </head>```

So bizarre...any way the head tags are in my code...just not showing up when I paste in the forum :/

Kirby Abogaa
Kirby Abogaa
3,058 Points

is you html file inside a different folder separate from the css folder?

if so you need to add "../ " to the href's property.

like this? This does not work either

<head>
    <meta charset="utf-8">
    <title>Erin Connolly | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/cssfamily=Changa+One:400,400italic|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href=".../css/main.css" type="text/css">
  </head>

Unfortunately, I still don't have an answer to this :(