Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website CSS: Cascading Style Sheets What is CSS?

I dont understand how you would take the normalize css file and create a new page when actually trying to build a websit

Can you explain to me if I am supposed to use the workspace for just going along and then do the challenges on the site itself.... how would I add this css page normally if I were creating a page on my own..Thanks

1 Answer

Kevin Korte
Kevin Korte
28,109 Points

Yes, that sounds correct. Code challenges have to be done in the challenge editor, but the workspaces can be used as a playground to practice in.

In real life, you would have your web server, and you would at the bare minimum have an index.html file, and a CSS file, probably called style.css. In the head section of your index.html you would link to your css file, something like

<link rel="stylesheet" href="style.css">

That would load in your CSS when the page loads. You can load more that one file, they load in the order you have them on the page, and don't forget that CSS cascades (hint the name Cascading Style Sheet). So CSS rules that get added last, override CSS rules earlier.

So you might have this

<link rel="stylesheet" href="normalize.css">

<link rel="stylesheet" href="style.css">

This way any styles you write that conflict with the normalize CSS file will override, which is likely the behavior you want.

what is the difference between <link rel="stylesheet" href="normalize.css">

<link rel="stylesheet" href="style.css">

I learned initially on Khan academy and they had us style right into the head, so that is why I am confused......

Kevin Korte
Kevin Korte
28,109 Points

The only difference is which CSS file it pulls in. The first statement pulls in a normalize.css file, the second statement pulls in the style.css file.

This way of adding the CSS is more desiable for file size length, but it wouldn't be too uncommon to have hundreds, if not thousands of lines of CSS code per page, and that amount of CSS code in the head section of the webpage would be difficult to deal with as a developer.

This way of linking them in is much more cleaner for us. The computer really doesn't care.

I understand that the external is more efficient, I am just confused...For example,If I were building a web page and had the default index and css, would I need another css like normalize... I guess I just don't understand the difference between the css files and how I would utilize them

Kevin Korte
Kevin Korte
28,109 Points

Ah okay. Normalize.css is a reset for browsers. The problem normalizes fixes, is that all the modern browsers have their own default styles. You can see how this can become a problem. Normalize goes through, and smooths out many of these browser defaults so they are the same. This gives you much more reliable rendering of elements in the different browsers.

I use normalize on every project so far I believe. Than from there, I use multiple style sheets to start building up from there.

You can learn a lot be readying the source code for normalize.css