Loading...

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

You may not see the point 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. Now do the same thing for your CSS files.

____

On simpler projects, you may work with only 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 complex, there is a chance you will want additional CSS files to keep your styling rules better organized. Additionally, you may have web pages with special features that get their own special styling rules. 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 the 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="css/myfile.css"/>
  <link rel="stylesheet" type="text/css" href="css/style2.css"/>
  <link rel="stylesheet" type="text/css" href="css/features.css"/>
</head>

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, this practice makes it easier for you to reference and track external files as you work on your own projects.

Question

When is it most appropriate to use an external style sheet verses a style tag?

Style sheets are typically used for all repeat styles that will apply throughout a web site. Special additions or exceptions to general styling rules can be placed in a style tag in your HTML document, if needed.