Our First Styles

Let’s write our first line of CSS!

Fork the template on CodePen.

You should see four boxes (divs) like the below:

Navigate to the CSS editor in CodePen and look for the line that says Your CSS here. We’ll be adding all of our CSS below this line.

We’ll start by changing the colour of page.

Add the following css:

/* Your CSS here */

body {
  background-color: orange;
}

The page should turn orange!

Nice work! Your first line of CSS!

Feel free to take a peek at the CSS we wrote for you. This CSS it what arranges the divs in a grid and gives them borders. In a few steps time, you’ll be able to create this too!