Exernalizing CSS
Now that we have been working with CSS for a while, it's time to start taking the correct approach to building CSS for websites. So far, we have been putting all our CSS into the <head> of the document, commonly called an embedded style sheet.
That's fine for one-off designs, which is what we've done so far. But for entire websites, it's quite inefficient, as making a change to say, your body selector, would require opening every HTML page, and then making the change in each.
Far better to externalize your CSS into one file, and reference the file in the <head> of your document.
Syntax for a CSS file
This doesn't look much different from what we put in the <style> tag in the <head>.
Essentially, an external CSS, just has all of the rules written in a .css file.
So, open up Brackets, and start writing selectors and declarations, just as you would in the <style> tag.
A few things to consider
You may want to comment on things in your CSS. The syntax for this looks different than a comment in HTML.
/* Here’s how you comment in CSS */
You may want to start thinking about how to organize your CSS a bit more. There's lots of ways to approach this. You can organize structurally, or you can organize by selector, or you can organize by the layout. For example:
/* General rules body, h1, p, a, etc. first */
/* Header selectors (logo, h1) */
/* Navigation */
/* Sidebar (s)*/
/* Main content area */
/* Footer */
When you have a few styles written, make sure you save the file with a .css extension. (You may also want to build a separate folder for your CSS files, so you can keep them organized.)
Referencing the CSS file in your <head>
Now that you have a .css file, you will need to connect it to your HTML. This is easy enough. Simply use this code in the <head> of your document (note: the pathway will depend on your file structure):
<link rel="stylesheet" href="css/style.css">
Other things you can include in a separate CSS file
You can also import things into a CSS file, including other CSS.
For example, if you wanted to import a Google font, you could do that in the CSS rather than in the <head>. Let's say I wanted to include the Google font, Roboto. Add this to the VERY top of the CSS file (the @import has to be first, before any other selectors.)
@import url('https://fonts.googleapis.com/css?family=Roboto');
The only exception to this is the character set import, which would come before @import of a font or other CSS files:
@charset "UTF-8";