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 Andrew Stelmach
Andrew Stelmach
12,583 Points

Is it possible to have my Normalize CSS code in a separate stylesheet? And how would I do that?

So my main stylesheet is a bit easier to navigate.

4 Answers

Nyki Lawson
Nyki Lawson
1,820 Points

Here's how the "How To Make a Website" section suggested formatting that, though this is my personal project:

<head>
    <meta charset="utf-8">
    <title>Nyki Lawson | Mac Specialist</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 </head>
Luke Glazebrook
Luke Glazebrook
13,564 Points

This code should work perfectly fine for you Andrew! Like Sarah said its important to link normalize.css before main.css due to the cascading nature of the language!

Good luck with your site!

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points

Thanks guys that's great. I worked through How To Build a Website a few weeks ago, but I'd forgotten about this part. Sorry, Luke, Jennifer edges the best answer, but it was a tough call! ;-)

Luke Glazebrook
Luke Glazebrook
13,564 Points
Luke Glazebrook
Luke Glazebrook
13,564 Points

Hey Andrew!

The Normalize.css is supposed to stay separate from your Main.css for that exact reason. If you had both of them together in one .css file it would work but like you say it is hard to navigate which is why they are kept separate.

Once you have separated them make sure that they are both properly linked to your .html files!

Sarah Federman
Sarah Federman
14,048 Points
Sarah Federman
Sarah Federman
14,048 Points

As Luke said, you would put it in a separate link tag in your document head. Make sure you put it before your main.css, else you may accidentally overwrite your custom rules.

You can also use the @import in your css, but that sends a new HTTP request every time.

Really, your best option is to manage your stylesheets with a preprocessor like sass and then compile & compress them together into one.

Andrew Stelmach
Andrew Stelmach
12,583 Points

Haven't covered Sass yet, but I'm looking forward to it.