Like the HTML Basics section, we need to first understand the structure of CSS and some of the jargon before we look at an actual file.
Now that you understand tags and attributes you will likely pick up the idea behind CSS very quickly. The key is to realise that your style sheet defines a collection of “rules” that any HTML page it connects to must obey. Here is an example of a CSS rule:
In order to properly understand a CSS rule there are two major concepts you need to be familiar with:
A “selector” is the term used for which HTML element your rule can or will apply to. So in our above example the selector is “body“. There are many different ways to create a selector (Type, Class, ID and many more) but these are not dealt with in this tutorial.
A “property” is the term used for which HTML attribute your CSS rule will apply to. So in that example above the property is “background-color“.
You’ve probably already figured out what the CSS rule we’ve been looking at is supposed to do…it states that the background colour of any HTML page it’s attached to is to be black. That’s what CSS is all about. Creating rules for your HTML page to follow.
So now that we have some more jargon under our belt let’s take a closer look at the “style.css” file.