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 Jonathan Hobdell
Jonathan Hobdell
6,751 Points

Smells Like Bakin' - Not picking up CSS

Hi everyone

I've just started this and I'm loving it. I'm up to the stage of the Smells Like Bakin' project where we link the HTML document to the "grid" and "normalize" CSS documents. For some reason I can't fathom, the CSS information doesn't seem to be linking correctly: none of the formatting that should come from the CSS documents is translating to the web page when I drag it over. Any thoughts?

NB: I've checked over the document several times and there's nothing to suggest incorrect coding (like blocks of coloured text that shouldn't be there); the "css" folder I'm trying to link to is local to "index.html"...I'm sure there's some other stuff I've checked out on here that doesn't apply but I can't remember it.

All help gratefully received! Many thanks Jonathan

5 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Jonathan Hobdell,

Can you please post the code you're using to link the CSS files? Thanks!

Jonathan Hobdell
Jonathan Hobdell
6,751 Points

Hi Guil

Here's the two lines of code linking to the CSS files:

<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">

Many thanks for the swift response! :)

Jonathan Hobdell
Jonathan Hobdell
6,751 Points
Jonathan Hobdell
Jonathan Hobdell
6,751 Points

link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"

The code seemed to vanish - page must have been reading it. I've replaced the opening and closing angles with asterisks and hopefully that'll solve that issue.

Jacob Arsement
Jacob Arsement
3,048 Points
Jacob Arsement
Jacob Arsement
3,048 Points

I'm at the same stage as you so I'm no expert or even novice designer... but for me, I referenced the 3 css sheets with three different link rel lines and it worked... it seems you're combining them within one 'link rel' line of code. Try separating them and see if that works.

Jonathan Hobdell
Jonathan Hobdell
6,751 Points

I'm not sure exactly what you mean. You mean "link rel="stylesheet"" on one line, the href on the next and so on?

Jacob Arsement
Jacob Arsement
3,048 Points
Jacob Arsement
Jacob Arsement
3,048 Points

This is what my header looks like:

```<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> </head>

Jonathan Hobdell
Jonathan Hobdell
6,751 Points

How do you copy and paste your code like this? Every time I try, 90% of it disappears.

Kyle Johnson
Kyle Johnson
33,528 Points
Kyle Johnson
Kyle Johnson
33,528 Points

Make sure you have your css/grid.css and css/normalize.css inside the project folder. Also make sure the grid.css and normalize.css are both in the css folder that is inside the project folder.

Jonathan Hobdell
Jonathan Hobdell
6,751 Points
Jonathan Hobdell
Jonathan Hobdell
6,751 Points

!DOCTYPE HTML>/<html>/<head>/<meta http-equiv="Content-Type"/ content="text/html; /charset=utf-8"/> / <title>Smells Like Bakin' Cupcake Company</title>/<link rel="stylesheet" /href="css/normalize.css"/ type="text/css" /media="screen">/<link rel="stylesheet" /href="css/grid.css" /type="text/css" /media="screen">/</head

That's what my code looks like at this point. Again: my index.html document is in a folder called "Web". In the same folder is a folder called "css", which has the two CSS documents, grid and normalize in it.

Is there any other reason for this not to be working that I might have missed?

Jonathan Hobdell
Jonathan Hobdell
6,751 Points
Jonathan Hobdell
Jonathan Hobdell
6,751 Points

Apologies all, this turned out to be a copy document issue - I rearranged the folder structure and accidentally ended up working with the document in the original place, instead of the new one. Many thanks for all your help!