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
Darwin Pérez
2,351 PointsCreating my first website: How many CSS files?
Hello everybody, hope everything is ok in your lives.
I am creating my first website and I am not sure if is it okay to have one css file for each html page?
And I have noticed that the Header and Footer is going to be the same in all pages, is that okay if I just copy and paste the same code in each css file or is there any nother way I can make this up? I know that making less request to the server is the best option.
Thanks in advance.
4 Answers
Kevin Korte
28,149 PointsThe fewer the better. If you can get away with one CSS file, that is great. I would say I average 2-3 CSS files per page.
Keep in mind with CSS, it's cascading style sheets, meaning that if I have 3 style sheets linked on a page, make sure you understand how the styles cascade down, or you may get some unexpected results.
Each web page doesn't need it's own stylesheet. You can call that same style sheet from every header on every page, and have all of your styles for the entire site in one CSS file. This is were relative web paths will be great for you.
And that otherwise, yes, you can copy and past your header and footer code from page to page, you may just need to update the links you have in those blocks of code to match the page location. Keep in mind you don't want to be copy and pasting header and footer code for long, there are better ways to include those chunks of code.
Probably not on your first site, but eyes on the horizon, you'll want to have your header and footer files eventually separate from the main page of the site, and include, or call in these files as the browser request them.
Randy explains how to do this in his PHP series. But I wouldn't worry about that for today!
James Barnett
39,199 PointsHow many CSS files
Break out your CSS by function, so you can end up with 1 or 2 per page on your site. However in the end you should compile them into just one to cut down on HTTP requests.
I'll give you an example on my 5 page portfolio site I have 8 CSS files that I wrote myself plus one for a reset and one for syntax highlighting, for a total of 10 CSS files. I compile them all together using this On-the-fly CSS Compression Script in PHP
jeremywhiteford3
13,297 PointsHi James,
In that article it states that the best part of the script is that it doesn't pre-process the files. Can you fill me in to why that's good? I use sass and am a huge fan; I have it set up to compile and compress my css and have the gzip and caching set up at the server level. Is there a reason you choose that compression script over a pre-processor?
James Barnett
39,199 PointsIn that article it states that the best part of the script is that it doesn't pre-process the files. Can you fill me in to why that's good?
Basically because, it's a set it and forget it kinda thing, anytime you update a CSS file, there are no additional steps such as running a pre-processor script.
jeremywhiteford3
13,297 PointsAhh... I have my sass files set to watch so it generates the new css on save. If I do a project where I won't bother using a pre-processor I'll definitely use that script. Looks handy. Thanks for answering my question.
Kevin Korte
28,149 PointsNo prob. That's the good stuff when you start getting into a language like that. Sounds like you're on the right track.
Cheers from Washington State!
Ram Ada
360 PointsI would suggest 2-3 files like stated earlier. One for header/footer and elements for all pages. Another file just for elements unique to that page. Make sure that the second css file is rendering elements after the first css file. This is useful for overriding the first css if needed.
Darwin Pérez
2,351 PointsDarwin Pérez
2,351 PointsKevin, thanks for your help! :)
I know that when you use php you can call each part as the browser request them, but for now I am only html/css hehe Looking forward to learn php def.
Greetings from El Salvador amigo!
jeremywhiteford3
13,297 Pointsjeremywhiteford3
13,297 PointsKevin what are your 2-3 on average? Personally I like to use only one and have it compressed when I put the sites live.
I use sass compiled from many organized files and have a media query included for print as one of them. On occasion we've had clients needing to print from older versions of IE where I've needed to include a separate css request; but most of the time I'm able to get away with a single one.
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsI'm not to the stage where I use SASS or something similar. I've played with it a bit, but it's not where I've spent much time.
Usually I have a reset/framework minified CSS file, than my normal CSS file, and if needed a CSS file I load conditionally.
An example loading a CSS file if there is a certain GET variable. I'm actually using this method in WP to override some styling from some WP functions until I can find a better solution. In this case it loads a CSS file if the search get variable is present to reset what showing as the active link in the WP generated code.
jeremywhiteford3
13,297 Pointsjeremywhiteford3
13,297 PointsOk I think I get it. Have you looked at a normalize.css instead of a reset?
http://necolas.github.io/normalize.css/
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsI should have clarified. My reset is normalize.css. I put that and a stripped down version of bootstrap together as my one file to not edit or touch, than my css file, and finally my search.css file that loads only on a search result page because WP still outputs a current-menu-item class on my menu I don't want, so I use CSS to set that class to be the same as the other menu items without that class, only on the search results page.
Bootstrap overrides normalize, my style overrides bootstrap, and my search.css file overrides my style.css file.
James Barnett
39,199 PointsJames Barnett
39,199 Points+1 That's a great explanation of using multiple CSS files.