Lesson 1: Basics of CSS

Making Things Look Good

CSS (Cascading Style Sheets) is the language we use to style a website. If a website were a house, CSS would be the paint, the carpets, and the furniture.

The CSS Rule

CSS works by selecting an element on your page and applying rules to it. A rule consists of a property (what you want to change) and a value (what you are changing it to).

h1 {
  color: #ffc72c; /* This makes the text gold */
  font-size: 24px; /* This changes the size */
}

In the example above, h1 is the selector. We are telling the browser to find all the large headings and make them gold!

Test Your Knowledge!

Challenge 1: The Missing Punctuation

This CSS rule is supposed to make paragraph text red, but the website is crashing! A very important piece of punctuation is missing. What is it?

p {
  color: red
}
Click here to reveal the answer
It is missing a semicolon (;) at the end of the rule!

p {
  color: red;
}

Challenge 2: Paint the Background

Write the CSS code to change the background color of the entire website's body to black (#1a1a1a).

Click here to reveal the answer
body {
  background-color: #1a1a1a;
}