So here’s a screen capture of the “style.css” file from the tutorial you downloaded:
Once again I’ve taken out any comments and slightly reformatted the code to make explanations easier but rest assured it works the same, it allows us to focus on the content of this style sheet a little easier.
Line #01: “body“
This is the beginning line of a CSS rule. The item in blue (at least in this picture) indicates the selector. It’s important to note that after the name of the selector we have an opening (or left) curly brace. The type and placement of that bracket are important!
Line #02: “background-color“
This line is pretty obvious really, it defines a property of this CSS rule which in this particular case is the background colour. Notice the way the colour has been referred to…this is different to the example on the previous page. For now just note that there are multiple ways to reference a colour!
Line 03: “margin“
This is simply another property of this particular CSS rule. Any rule can have as many properties as you like. This one is defining the margins of this document. Notice they are defined in pixels (px)…like colours, sizes can be defined in a variety of ways.
Line 04: “font-family“
If you want to change the font, then this is the way you do it. There are, once again, lots of ways to do this and these are better explained in the intermediate web design tutorial.
Line 05: “font-size“
Do I honestly need to explain this one? I don’t think so.
Line #06: closing curly brace
This is important! The opening curly brace stated where the properties will start and so the closing curly brace states where they end.
If we wanted to make more CSS rules, we’d simply repeat the above process and paste it under the existing rule…pretty simple huh?!?