Add CSS to HTML

The final - and preferred! - way you can add CSS to HTML is by using a link element in the head of your document. This is called external CSS. Like the style element, it allows you to change the styling of all elements on the page at once. But the benefit is that instead of trying to manage your CSS in the HTML of the page, now, you can write it in a separate file. CSS gets long fast, so it's a lot easier to manage this way. Plus, you can always link a different stylesheet and change your content on the fly!

At this point, we are going to switch to Glitch as our demo editor. Right now, you are viewing the preview of our files. Glitch allows you to preview files just like you would developing on your computer, in a code editor. To the bottom, notice the "View Source" button. Use this button to see what the source files for this webpage look like. When you click "Remix on Glitch", you will be able to edit them.

Practice

1. Click the "View Source" button in the lower left to toggle to the file view. Notice you now see two files: index.html, and style.css.
2. Click the "View App" button in the lower left (same place) to toggle back to the preview view.
3. Go back to the code view, and click the "Remix to Edit" button in the upper right.
4. Change the background of this page to blue.