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
Stephen Tauro
4,111 PointsCan a html document have two css files?
Can a html document have two css files i.e. one within style tags and the other an external css file. If yes then which one will override the other. If no then why?
4 Answers
Henrik Hansen
23,176 PointsYes. The styles in will override your external files. The style in your style attribs will override all others.
1. <div style="..."> is most important.
2. <style><!-- your style --></style>
3. External files will be overridden by 1. and 2.
You can also add as many of those as you would like, but you want to keep the amount of files down.
Kaitlyn Brown
1,072 PointsYou can also link to more than one stylesheet (this happens often when you are using a Google Font and you link to it as a stylesheet and then link to your custom CSS styles beneath that). However, best practice is to avoid inline styles and <style> tags altogether and rely on one single linked file. You can "fake" multiple files into one CSS file link by using the @import statement at the beginning of your primary custom CSS file (for example, with Google fonts, Google will also provide an @import url that you can use inside an existing stylesheet). @import is used more often when you're using a framework with an existing stylesheet, like Bootstrap.
Henrik Hansen
23,176 PointsThe @import still makes a new http request, so there is no benefit from using it but having it all in the css file.
Kaitlyn Brown
1,072 PointsHenrik Hansen - It's still considered best practice
Henrik Hansen
23,176 PointsThen that is what I will do from now on. :) Thank you.
LaToya Legemah
12,600 PointsYes you can have two stylesheets within an html page. In the stylesheet within the page will override the external one based on the cascading order. I thinks its: external styles - internal styles - inline styles
Here is a link with more information:
Stephen Tauro
4,111 PointsThanks Henrik and LaToya :).
Kaitlyn Brown
1,072 PointsHenrik Hansen - It doesn't matter much when you're working with pure CSS, but once you start going into Sass it starts to come in handy. e.g. using Bootstrap, you can use Bootstrap's variables for screen width breakpoints rather than having to memorize or refer to the specific numbers for your own styles. You can't do that if you use a separate link in the HTML for the Bootstrap styles, only if you import the Bootstrap styles into your own Sass file so that it acts as an "extension" rather than as a completely different file. So the number of HTTP requests is the same, but you benefit from being able to use the framework's mixins, variables, etc. in your own code.
Of course, Bootstrap is using LESS right now and won't be using Sass until 4 comes out, but I use Sass as the example because far be it from me to encourage anyone to learn LESS instead of SCSS :P But whether you're using LESS or SCSS, it's the same in practice when it comes to the @import statement and the use of another file's variables.
That's the reasoning behind why it's best practice to use @import, if you were wondering. It's a moot point if you're not going to use Sass/LESS - do whatever you please as long as you're minimizing the number of HTTP requests.
Henrik Hansen
23,176 PointsI'm kind of used to put the links in the markup, since I'm more of a backend kind of guy. But learning new techniques and other (often better) ways to do stuff is always nice. I will be looking into Sass in a while.