CSS is based on rules. Rule sets look like this:
h1 {
color: orange;
font-style: italic;
}
p {
font-family: san serif;
font-style: normal;
}
#navbar {
background-color: yellow;
padding: 80px;
}
.intro {
font-family: arial;
background-color: grey;
color: dark grey;
}
The first rule applies to all <h1> tags on each page where your HTML document links to your stylesheet, and changes the font style and display of those headings.
The lines within the curly braces (i.e. { }) are called selectors, and they change the formatting of the elements in the HTML document. Each selector ends in a semicolon (;).
Note the different syntax being used for the different rule sets. The bottom two are specific kinds of rule sets called classes and ids. In general, classes and ids allow for more specific styling - more on these soon!
Copy and paste the CSS above into your style.css file and re-save the file. Then open or refresh your index.html file in your browser and see what happens.
The formatting of the text on your page should change accordingly. Your <h1> should be orange and italic, for example.