Intro

We’re now ready to write our first bit of CSS code.

For now, I want you to type out everything I’m typing, and then I’ll explain it.

Steps

Open preview

First, click on the Live Preview button in the corner to open up the preview. The button only appears when you’re in an HTML file, so you’ll have to open it while looking at your HTML file.

Then click on the tab for the CSS file.

Write CSS

In your CSS file, type the letter p, then a space, and then an opening curly brace.

This will automatically generate a closing curly brace as well.

Then press Enter. This will create a new line and move the closing curly brace to a separate line as well.

On line 2, type color, then a colon, a space, and then the word red.

Lastly, put a semicolon at the end of the line.

If you check the preview, you should see the paragraph text turned red, which is what we want.

Next, let’s break down the code we wrote.

Selector

The first thing we wrote is the selector. The selector tells the computer which element or elements to change.

The selector in this case is the letter p, which tells the computer to target all of the paragraph elements on the page. In this example, we only have one paragraph element, but if there were more paragraph elements, they would also turn red.

Notice that you don’t write the letter p in angle brackets, unlike in HTML.

Curly Braces

The next thing we wrote is a pair of curly braces. The opening curly brace always goes on the same line as the selector. The closing curly brace always goes on its own line at the end.

Property and value

In between the curly braces, we wrote a property and a value.

The property is the text before the colon, and it tells the computer which feature we want to change on the elements we’re targeting. In this case, we’re changing the color property.

The property is always followed by a colon. The value is the text after the colon, and it tells the computer how we want to change the property.

In this case, we’re setting the color property to red.

Declaration and rule

The property and value together are called a declaration. A declaration is always indented one level and always ends in a semicolon. Technically, your code will still work if you don’t indent it, but indentation makes your code easier to read and is considered a best practice.

A lot of times you have more than one declaration inside the curly braces, but right now we only have one.

The whole block of code we wrote is called a rule.

End

If you understand what all of these terms mean, you know about half of everything you need to know to understand CSS. Seriously.

The reason why is because a CSS file is just a stack of rules, one right after the other.

The next part is learning about the different types of selectors, properties, and values you can use in CSS, as well as a few other concepts. We’ll explore these in the rest of the course.