2. CSS rules
So finally the moment we have all been waiting for: let's make things pretty (well not just yet).
Before we get crazy with adding styles and colours, I wanted to cover some of the CSS basics to help you better understand the different terminology you will notice to do with CSS.
This is a rule:
- This rule starts with h1, which is a selector.
- The part inside the curly braces is the declaration.
- color is a property.
- red is a value.
- color: red; is a property-value pair.
We will refer to those definitions throughout this course, so feel free to jump back here any time to refresh your memory.
When the browser reads a CSS file, it finds each selector and works out if it applies to any elements in the HTML. If it does, it uses the properties within the matching rule.
A style sheet consists of a list of rules. Each rule consists of one or more selectors. Selectors allow you to SELECT all elements that match:
- a certain tag name e.g. <h1>
- a certain element inside another element e.g. all <li> within a <ul>
In the next section we will have a look at how we can create these rules and apply them to our HTML.