Loading...

It is best to keep your CSS files separate and in one place.

It may not seem like much use on small projects that use very few files, but it is best to get in the practice of organizing your website's directory. As projects grow more complex, and the file count goes up, it will become progressively more annoying to keep track of them if they're all lumped together in one folder. You should already be in the practice of keeping images and documents in their own separate category folders away from your HTML files, and should now do the same thing for your CSS files.

example of a directory with files and folders

On simpler projects, you will possibly only work with one master CSS file, in which case, keeping it in its own special folder won't make a huge difference. However, if you know a project will become rather complex, there is a chance you will want additional CSS files to keep your styling rules better organized. Also, you may have web pages with special features that get their own special styling rules. If these don't commonly occur on most pages, you may want to keep them in another file (named something like "features.css") that are only linked when actually needed. This can help cut down on clutter in your main stylesheet. Referencing more than one stylesheet is just a matter of including multiple <link> tags. Just be aware that as your number of stylesheets increases, so do the odds of you accidentally creating rule conflicts between the different CSS files.

<head>
<link rel="stylesheet" type="text/css" href="myfile.css">
<link rel="stylesheet" type="text/css" href="style2.css">
<link rel="stylesheet" type="text/css" href="features.css">
<head>

It's also worth noting that if you continue to pursue studies in web design, there's a high likelihood you will eventually collaborate with others on a project. Keeping directories that categorize what's inside will make it much more intuitive for other users to navigate your files. Not to mention that this practice makes it easier for you to reference and track external files as you work on your own projects.