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

Kaycee Harris
Kaycee Harris
935 Points
Posted by Kaycee Harris
Kaycee Harris
935 Points

HTML and CSS

When building your website, can you make more than one css stylesheet for different html files you have? For example, say if i have 3 html files and i want to style each file differently with css. Do i create multiple css files or is there a simpler way of styling each file differently?

1 Answer

Daniel Bemenderfer
Daniel Bemenderfer
18,861 Points
Daniel Bemenderfer
Daniel Bemenderfer
18,861 Points

You can use different style sheets, or multiple style sheets, all in the same html file. The browser reads this as the last style sheet linked will override any settings made by the previous style sheets, so it's bottom-up in importance. These are all done in the <head> tag.

This could look like (with addition of type="text/css" within link tag, though not needed anymore): 

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="special.css">     <!-- this will override styles.css where also declared -->

This will have special.css styling override any duplicate styling from styles.css - otherwise styles.css styling applies where special.css doesn't. This allows you to have a main style sheet, and it's best to build that CSS with a mobile-first design using media queries (@media) in the CSS file. You may even see a "reset" css file linked, at top of html head, that basically wipes browser default styling to stuff you'd prefer. Using a language like PHP can greatly simplify this process on many levels.

Kaycee Harris
Kaycee Harris
935 Points
Kaycee Harris
Kaycee Harris
935 Points

Okay I just want to make sure I understand. So basically I make another style sheet which is the “special.css” and I link both special.css and styles.css on my html file. Special.css will override styles.css for the most part for any style that duplicated. So could you further explain the duplicated styling. So the special.css will override any styling that is the same from styles.css? The only purpose the styles.css is there is to style any section that special.css doesn’t cover?

Kaycee Harris
Kaycee Harris
935 Points
Kaycee Harris
Kaycee Harris
935 Points

Also what if I have multiple html files that I want to style differently, do I just create my other style sheets that style which ever html file I want to design and keep my main style sheet . Then link the main style sheet and the other extra style sheet I want to style that particular html file with?

Daniel Bemenderfer
Daniel Bemenderfer
18,861 Points
Daniel Bemenderfer
Daniel Bemenderfer
18,861 Points

Yes. The special.css will just override styling from styles.css in this case - where it specifically applies only.

The purpose is so you can write less code to save time and make it more manageable. My suggestion would be to figure out the similarities between your pages, and make a base style sheet that does that best as possible, and then apply individual css files to those individual html files. It just helps you by not having to write more code, or more redundant code from copying. This makes it more manageable for changes.

Best way to see this is to make a first sheet with some styling, and then make a second sheet that targets styling to show how it overrides the first. The first sheet will be the same with no changes, but the second sheet's styling will change the web page in the browser. Test a few things out and it will make more sense. An example would be changing the background or font colors.

Daniel Bemenderfer
Daniel Bemenderfer
18,861 Points
Daniel Bemenderfer
Daniel Bemenderfer
18,861 Points

You can apply any method you'd like, but yes. You can either make fully styled, page specific style sheets for each html file, or you can have a base css file that specific styling then builds off of. Think of it as a way to not repeat code. You can either have that same code in every single specific style sheet, or you can put the repeated styling into a base css file that you can also apply. It's really just to save you time and headache. Whichever method you prefer. Best thing to do is test out the process.

Just know the last linked style sheet will have precedence over other styles. And in-line styling will override any external, linked stylesheets in the head. I don't advise in-line styling as it can become very unmanageable. Just know it applies last, and therefore wins. You can also use the !important property to force that styling no matter what in the css file. I wouldn't rely on that though.