Intro to CSS

After HTML, CSS is the most common programming language on the internet, and can be the most exciting when you delve into the more advanced side of things.

Typically CSS is used to change the look and feel of a website, colours, fonts, sizes, layout, how and where things appear on the page, but as CSS gets bigger and better, you can even use it to animate elements on your webpage!

Let’s write our first line of CSS!

Fork the template on CodePen.

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

Screenshot of a webpage featuring boxes Screenshot of a webpage featuring boxes

We’ll start by changing the colour of page.

Add the following css:

/* Your CSS here */

body {
  background-color: orange;
}
Test

The page should turn orange!

Nice work! Your first line of CSS!

Info

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!