JavaScript Treehouse Club - MASH MASH - CSS Connecting Our Style Sheets

Stephen Nicholas Tauro
Stephen Nicholas Tauro
4,108 Points

Can 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
Henrik Hansen
23,176 Points

Yes. 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.

LaToya Legemah
LaToya Legemah
4,901 Points

Yes 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:

http://www.w3schools.com/css/css_howto.asp

Kaitlyn Brown
Kaitlyn Brown
1,072 Points

You 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
Henrik Hansen
23,176 Points

The @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
Kaitlyn Brown
1,072 Points

Henrik Hansen - It's still considered best practice

Henrik Hansen
Henrik Hansen
23,176 Points

Then that is what I will do from now on. :) Thank you.

Kaitlyn Brown
Kaitlyn Brown
1,072 Points

Henrik 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
Henrik Hansen
23,176 Points

I'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.