First Things First…
CSS needs an HTML file to style so the first thing we will do is make a simple HTML file. Nothing fancy, and the end result won’t be pretty. Type in the following in your code editor. Feel free to use any of the shortcuts available. For example, in VS Code typing a “!” and tab gives us our HTML template to work with.
It should look like this in the browser.
The goal of CSS is to separate the structure of the site from the style of the site. The benefit of this is that we can have different styles for the same HTML file like we saw in the CSS Zen Garden site from the last post. So where do we put our CSS? There are three possibilities. From the worst place to the best they are…
We can place our CSS inside of our HTML tags using the style=”” attribute. For example, <h1 style=”color:red”>. In our CSS demo page, let’s make our <h1> tags red, our <h4> tags green, and our <li> tags blue. We do this with the color property.
…BUT DON’T DO THIS!! This is the worst place to put CSS for two reasons. First, if you wanted to change a property of every tag on a page, like the <li> in our example, you would have to go through and manually change each tag. If there are only a few that wouldn’t be too much of a hassle. But what if there are dozens? Or even a few hundred? This is definitely not practical. Not only that, but it defeats the goal of CSS of separating the style from the structure.
A better place to put our CSS file is in the head section of our HTML file using the <style></style> tags. if you remember the general rule from the previous post, it would look like this:
This works also.
It is a little better than having the CSS inline. All of our CSS is in one place. It IS good for debugging and quick demonstrations, but it doesn’t really separate our structure from the style.
The best place to put CSS is in its own file. Let’s make a demo.css file in our code editor. You can do this by going to File -> New file and saving it as “demo.css”. What you name it isn’t important as long as it ends in “.css”. Next. let’s move our CSS into our new file. Our HTML file should look like it did when we started.
The contents of our demo.css file look like this:
If we refresh the page now, all of our colors are gone!
We need to tell our HTML to use our new CSS file. We do this by linking them together with the <link> tag in the HTML head.
The link tag above has three attributes. Going from the right to the left, the href attribute tells the browser the file that we are linking to. Since we saved our demo.css file to the same directory, we can just type in the name of the file. We can put our CSS file just about anywhere, but if we place it anywhere else than the same directory as our HTML file we must specify the path to the CSS file. See the HTML path post for a refresher. The type attribute tells the browser what kind of file to expect. In this case, a text file that is our CSS. The rel attribute specifies the relationship between the files. Since our demo.css file is a stylesheet, we put rel=”stylesheet”. We only need to specify this relationship if we also use the href attribute.
Now if we refresh our page, we get our colors back
In this post you learned:
- The best place to put your CSS (and where not to put it!)
- You found out how to link your HTML and CSS files together using the <link> tag.
- You used the color property to change the color of the text in different elements.
Next post, we’ll take a closer look at using colors in CSS.