10. style.css

So here’s a screen capture of the “style.css” file from the tutorial you downloaded:

The style.css file

The source code of "style.css"

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?!?

Okay, hopefully you now have some understanding of CSS. Just remember that any HTML file you attach a style sheet to will take on the rules defined within it…now let’s have a quick look at JavaScript.

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>