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
Erin Connolly
514 PointsHello, 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
Erin Connolly
514 PointsGot in touch with Nick...it turned out that the name of my css folder was in all caps
Kirby Abogaa
3,058 PointsYou 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.
Erin Connolly
514 Points/********************************* 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
8,882 Pointsthe 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.
Erin Connolly
514 PointsI 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.
Erin Connolly
514 PointsHere'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
3,058 PointsPlease 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
8,882 Pointshttps://teamtreehouse.com/forum/linking-css-to-html
above link is an earlier discussion on linking css to html
Erin Connolly
514 PointsOops 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
3,058 PointsTry adding type="text/css" to your css file link.
Erin Connolly
514 PointsNo dice :(
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
3,058 PointsI 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.
Erin Connolly
514 PointsYou'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>
Erin Connolly
514 Points <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>```
Erin Connolly
514 PointsSo bizarre...any way the head tags are in my code...just not showing up when I paste in the forum :/
Kirby Abogaa
3,058 Pointsis you html file inside a different folder separate from the css folder?
if so you need to add "../ " to the href's property.
Erin Connolly
514 Pointslike 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>
Erin Connolly
514 PointsUnfortunately, I still don't have an answer to this :(