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 Lori Smith
Lori Smith
1,409 Points

None of my styling is showing when I preview

No matter what browser I use, my styling is not showing. I have a CSS folder and a file named style.css. Could it be because I haven't included a normalize.css file yet? Can't image that would be it. Here is also the link to the workspace: https://teamtreehouse.com/workspaces/10360292

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Learning to Code at 60</title> <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Josefin+Sans:400,400italic,700,700italic|Raleway:400,700|Open+Sans:400,400italic,700italic,700|Grand+Hotel"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>

<body>

<!----NAVIGATION---->

<nav>
  <ul>
    <li><a class="selected" href="index.html">Home</a></li>
    <li><a href="archives.html">Archives</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<!----HERO SECTION WITH BG IMAGE---> 

<div class="hero">
  <h1>Learning to Code from 0 to 60...at 60</h1> 
</div>

<!----CALL OUT---> 

<div class="callout">
  <h2>Join me on my journey as I learn web development</h2>
</div>

<!----CURRENT BLOG ENTRY---> 

<div class="current">
  <h3>Title | Date</h3>
  <p>Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit. </p>
</div>

<!----RECENT ARCHIVES---> 

<div class="aside">
  <h3>Favorite Coding Quotes</h3>        
</div>

<!----FOOTER---> 

<div class="footer">

</div>

</body> </html>

body { background-color: #993300; }

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

nav { height: 100px; background-color: #000; }

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

nav ul li { font-family: 'Raleway', sans-serif; color: #fff; font-size: 1.125em; text-align:right; }

nav a:hover { color: #ffa347; }

/********HEAD SECTION WITH BG IMAGE*****/

.hero { background-image: url(img/sepia.jpg); width: 900px; height: 250px; }

.hero h1 { font-family: 'Josefin Sans', sans-serif; color: #fff; font-size: 3em; text-align: center; }

/********CURRENT BLOG*****/

.current { padding: 0 220px 0 0; float: left; }

/********RECENT ARCHIVES*****/

.aside { width: 200px; float: left; position: relative; margin-left: -200px; }

.aside h3 { font-family: 'Raleway', sans-serif; color: #000; }

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

.footer { width: 900px; height: 50px; }

10 Answers

Riku S.
Riku S.
11,322 Points

Alright, normalize should be the first css file always, as it resets many rules. Also your file paths are wrong there. So your head content should be like this

<meta charset="utf-8">
<title>Learning to Code at 60</title>
<link rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Josefin+Sans:400,400italic,700,700italic|Raleway:400,700|Open+Sans:400,400italic,700italic,700|Grand+Hotel">
<link rel="stylesheet" href="css/style.css">

Also fix background image path for .hero li this

.hero {
    background-image: url('../img/sepia.jpg');
    width: 900px;
    height: 250px;
}

Save and refresh your browser, it works.

Lori Smith
Lori Smith
1,409 Points

Thanks for your help, Riku. Your answers were spot on but it appears the problems is with Workspaces. When I download the project and open it with Brackets and use the live preview, it works. Still a styling mess but at least I can view it.

Riku S.
Riku S.
11,322 Points

Happy to help!

One of the main things are the extra space in you css folder name on Workspace. So rename your css folder from "css" to "css" and make those other fixes, then it runs fine.

Lori Smith
Lori Smith
1,409 Points

Even with those changes it doesn't show for me on Workspaces. Shrug.

Riku S.
Riku S.
11,322 Points

Well that is strange, because I made a copy of your workspace and changed all those, and it worked just like it should after refreshing browser.

Anyway, happy coding there!

Riku S.
Riku S.
11,322 Points
Riku S.
Riku S.
11,322 Points

If your folder name is CSS like you wrote, you should change it to css. File and folder names are case sensitive.

Lori Smith
Lori Smith
1,409 Points
Lori Smith
Lori Smith
1,409 Points

It is lower case.

Riku S.
Riku S.
11,322 Points
Riku S.
Riku S.
11,322 Points

Well is there head and body tags in your html, the code you pasted here doesn't include them at all.

Lori Smith
Lori Smith
1,409 Points
Lori Smith
Lori Smith
1,409 Points

If you look at the workspace, there are head and body tags in the html though it doesn't appear to have copied in the post here. In the css I have applied style to the body. Even if I hadn't styled the body or the head, the rest of the styling should appear.

Riku S.
Riku S.
11,322 Points
Riku S.
Riku S.
11,322 Points

I have no access to your workspace, so cannot see what's there.

I simply tried your code and it works just fine if your css file path is absolutely correct and you refreshed your browser.

Riku S.
Riku S.
11,322 Points
Riku S.
Riku S.
11,322 Points

Btw, you background image path in .hero is wrong, unless your img folder is inside css folder.

Lori Smith
Lori Smith
1,409 Points

It is inside an image folder. :)

Riku S.
Riku S.
11,322 Points

What I mean is, if in your root there is index.html and folders css and img, then your background image rule for .hero is wrong, it should be

.hero {
    background-image: url('../img/sepia.jpg');
    width: 900px;
    height: 250px;
}

Url is relative to your css document location, so you have to "go up" one level and then into img folder.

Lori Smith
Lori Smith
1,409 Points

Okay, I have changed that. Thanks.

Lori Smith
Lori Smith
1,409 Points
Lori Smith
Lori Smith
1,409 Points

I have tried a css path of css/style.css and just style.css. Neither works.

Riku S.
Riku S.
11,322 Points
Riku S.
Riku S.
11,322 Points

Use the snapshot button in your workspace, so you can share the content of that. Easier to help you then.

Lori Smith
Lori Smith
1,409 Points

Not sure I'm doing it right but here you go: https://w.trhou.se/2zbhhzum3s

Riku S.
Riku S.
11,322 Points
Riku S.
Riku S.
11,322 Points

And there's an extra space on your css folder name, it's " css". Delete space from there.