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 Amanda Trimble
Amanda Trimble
5,822 Points

Problem with getting my nomalize code to show on my Smells Like Bakin' page

I am on the challenge that calls for normalizing the text and adding the gird. I have the files download all in the same folder and was able to open them in notepad++. Only problem is once I made the changes nothing happens. I have triple checked my work and I still don't know what the problem is. Here is what I have so far:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Context-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> <body> <div class="container"> <img src="img/logo.gif" alt="Smells Like Bakin"> <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Locations</a></li> <li class="last"><a href="#">Contact Us</a></li> </ul> <div id="into"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes</a></p> </div>

    <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">

    <div id="featured-cupcake">
        <h2>Cupcake of the Week</h2>
        <p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its strange combo of flavors will kick your taste buds into fiesta mode!</p>
        <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
    </div>

    <div id="new-cupcakes">
        <h2>Fresh Out the Oven</h2>
        <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#"> Jalapeno So Spicy</a>.</p>
        <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
        <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
    </div>

    <h2>Inside the Kitchen</h2>
    <p>Smells Like Bakin' started out of the garage of the husband and wife duo Allison &amp; Joesph. Allison is a baker, and Joesph found a wayfor them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.</p>
    <p><a href="#" class="btn-small">Read More</a></p>

    <h2>Get Bakin' with Us</h2>

    <div id="contact">
        <p>Call us: <span>1-555-CUPCAKE</span><br>Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
    </div>

    <p>We announce all of our new flavors first though Facebook &amp; Twitter, and even take requests!</p>
    <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
    <a href="http://www.twitter.com/#!/smellslikebakin"><img src="img/twitter.gif" alt="Twitter"></a>

    <div id="copyright">
        <p>&copy; 2012 Smells Like Bakin' Company. All Rights Reserved.</p>
</div>
</div>

</body> </html>

Any help would be greatly appreciated.

Wesley Earl
Wesley Earl
1,667 Points

Hi, Are you asking how to link the style sheets your HTML Document?

Amanda Trimble
Amanda Trimble
5,822 Points

No I have the (or think I have) the style sheets linked The problem is that when I refresh the page nothing happens. So I'm trying to figure out what I am doing wrong.

5 Answers

Jett Durham
Jett Durham
14,472 Points
Jett Durham
Jett Durham
14,472 Points

Are your CSS files in the correct location on your hard drive? The code as presented assumes the CSS files to be in a folder called "css" in the folder that your index.html file lives in.

Amanda Trimble
Amanda Trimble
5,822 Points

Ok, good call....

Richard Crawford-Wilson
Richard Crawford-Wilson
6,094 Points
Richard Crawford-Wilson
Richard Crawford-Wilson
6,094 Points

In order to normalize the content, you need to add <link rel="stylesheet" src="normalize.css"> and the equivilant for grid.css. in the <head> tag of your site

Remember, this is how your layout should look:

<!DOCTYPE html>
<html>
<head>Title, link tags, meta tags, script tags etc here</head>
<body>anything visible on the page goes in here.</body>
</html>
Wesley Earl
Wesley Earl
1,667 Points

pipped to the post.

Amanda Trimble
Amanda Trimble
5,822 Points

OK I have tried: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Context-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> <body>

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

And Still not working

Richard Crawford-Wilson
Richard Crawford-Wilson
6,094 Points

Add: <link rel="stylesheet" src="normalize.css"> to link the normalize.css file to your html. You want to put this in the head section.

REmember you can always download the project files from a later episode to see how they did it if your stuck. The HTML deep dive covers this more in depth when you get there, don't worry if it feels complicated right now.

Richard

Richard Crawford-Wilson
Richard Crawford-Wilson
6,094 Points

<link rel="stylesheet" src="normalize.css"> << that one

Wesley Earl
Wesley Earl
1,667 Points

<!DOCTYPE html> <html> <head> <link rel="stylesheet" src="normalize.css"> </head>

<body>

</body> </html>

Richard Crawford-Wilson
Richard Crawford-Wilson
6,094 Points
Richard Crawford-Wilson
Richard Crawford-Wilson
6,094 Points

OH! Nothing happens when you DO link the stylesheets. Okay. So when you link normalize (depending on your browser) you might see a minor or no difference. when you link grid.css, you just link it. You still have to USE grid.css. You won't see it's affects until you use it, which is probably covered in the next video. Just link it for now.

Wesley Earl
Wesley Earl
1,667 Points
Wesley Earl
Wesley Earl
1,667 Points

You wont see any difference from adding the style sheets, until you use the styles on your html elements, for example:

<div class="grid_10"></div>
Amanda Trimble
Amanda Trimble
5,822 Points
Amanda Trimble
Amanda Trimble
5,822 Points

Ok, Thank you. The video showed a change in the text but then again I'm using firefox and the video is done with safari.

Wesley Earl
Wesley Earl
1,667 Points

that was because normalize.css eradicated any existing styles that the browser gives to HTML elements for example: a <h1> has margin automatically, normalize gets rid of this so it has nothing.

Wesley Earl
Wesley Earl
1,667 Points

<h1>

Wesley Earl
Wesley Earl
1,667 Points

h1 sorry.... not used this forum before

Richard Crawford-Wilson
Richard Crawford-Wilson
6,094 Points

Wesley, put the code inbetween backticks for an inline code block. `

Wesley Earl
Wesley Earl
1,667 Points

-Cheers-