A Closer Look at CSS

Anatomy of a CSS Rule

Awesome job! Now main.css is linked to index.html. Before we start writing our own CSS, let's take a look at how CSS code works.

The diagram to the right shows the anatomy of a CSS rule:

  1. rule: a list of CSS instructions for how to style a specific HTML element or group of HTML elements.

  2. selector: specifies exactly which HTML elements to style. Here h1 is the selector.

  3. properties and values: located inside the { } brackets, properties and values specify what aspect of the selector to style. In the diagram's example, the color property is set to red, which will display all h1 elements in red.

Click Next to continue.

Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.