CSS Rule Structure

CSS works by associating rules with HTML elements. In the example below, you would expect that the rule set on the left, would translate into the output in the right:

A CSS rule contains two parts:

• A selector (h1, in the example).
• A declaration, which comprises the property (color) and respective value (red), separated by a colon(:).

Selectors, which can come in multiple forms, as we'll see, indicate to which element, or elements, the rule applies to. Declarations indicate how the element(s) should be styled.

There are several different properties that could be used when we're writing our css rules. Some will be mentioned and explored in this chapter, while others you'll have to self-explore as you get familiarised with CSS. We'll be pointing you towards a couple of interesting and amazing resources, which you should save for future reference.

---

Practice:

Exercise - CSS Rule Structure

This one is pretty simple. In this codepen, you'll find a section with an h1 and h2 elements. The goal is for you to write some CSS that:

1. Changes the colour of h1 to #FFD400.
2. Changes the font-weight of the h2 to 100.

Take your time to get familiar with the platform. And feel free to add more HTML elements and CSS properties to test it out.