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
Hunter Christian Davis
2,813 PointsI 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
28,148 PointsYes, 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.
Hunter Christian Davis
2,813 PointsHunter Christian Davis
2,813 Pointswhat 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
28,148 PointsKevin Korte
28,148 PointsThe 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.
Hunter Christian Davis
2,813 PointsHunter Christian Davis
2,813 PointsI 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
28,148 PointsKevin Korte
28,148 PointsAh 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