Since CSS is meant to separate styling from the structure of a web page, what better way to keep CSS away from the HTML code, than to put it in its own file? As it turns out, you can do just that with any text-editing software like we do with our HTML, except of course, we save it with a .css file extension.
An external CSS file is created with the same formatting as an internal style sheet. Each CSS styling rule is comprised of a selector and its declaration block. The declaration block is designated by the opening and closing curly braces { and }, which contain the selector's declarations—its property and value pairings.
When external CSS files are used, you can apply an established set of rules to any of your HTML files that you choose. And any edits made to the CSS file will then cascade to every web page that is referencing the file, making sweeping changes even easier. This also drastically cuts down on the amount of code needed on each page if they're all going to be sharing many of the same rules, anyway.
Throughout this lesson, we'll discuss how to connect an external CSS file to an HTML file, how to organize your CSS files, and cautionary measures to take when writing CSS rules that will be shared by multiple web pages.
