What's an External Style Sheet?

External CSS Definition and How to Link to One

When a web browser loads up a web page, the way it appears is determined by information from a cascading style sheet. There are three ways for an HTML file to use a style sheet: externally, internally, and in-line.

Internal and in-line style sheets are stored within the HTML file itself. They're easy to work with in the moment but because they aren't stored in a central location, it's impossible to easily make changes to the styling across the whole website at once; you have to instead go back into each entry and change it manually.

However, with an external style sheet, the instructions for rendering the page are stored in a single file, which makes it really easy to edit the styling across an entire website or multiple elements. The file uses the .CSS file extension, and a link to the location of that file is included in the HTML document so that the web browser knows where to look for the styling instructions.

One or more documents can link to the same CSS file, and a website might have many unique CSS files for styling different pages, tables, images, etc.

How to Link to an External Style Sheet

Every web page that wants to use a particular external style sheet needs to link to the CSS file from within the <head> section, much like this:

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

In this example, the only thing that needs changed to make it apply to your own document, is the styles.css text.

This is the location of your CSS file.

If the file is actually called styles.css and is located in the exact same folder as the document that's linking to it, then it can remain exactly as it reads above. However, chances are your CSS file is titled something else, in which case you can just change the name from "styles" to whatever yours is.

If the CSS file is not at the root of this folder but instead in a subfolder, it might read something like this instead:

<head>
<link rel="stylesheet" type="text/css" href="styles\menus\black.css">
</head>

More Information on External CSS Files

The greatest benefit of external style sheets is that they aren't tied to any specific page. If styling is performed internally or in-line, other pages on the website can not point to those styling preferences.

With external styling, however, the same CSS file can be used for literally every single page on the website so that all of them have a uniform look, and editing the whole website's CSS content is extremely easy and centralized.

You can see how that works below...

Internal styling requires the use of <style> tags since they need to be differentiated from <html> tags:

<head>
<style>
body {
    background-color: green;
}

h1 {
    color: blue;
    margin-left: 15px;
} 
</style>
</head>

However, since external style sheets are contained within their own file, they can be created like this, and it means the exact same thing as the above sample:

body {
    background-color: green;
}

h1 {
    color: blue;
    margin-left: 15px;
} 

In these examples, the inline styling only applies to that particular page, evident by the fact that it's contained in that HTML page's header details.

With the second example, the CSS info is self-contained in a CSS file that any page can link to using the code from the How to Link to an External Style Sheet section above.