Previous Lecture Complete and continue  

  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.
The ; after the property-value pair separates it from other property-value pairs in the same rule, for example:

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.