Introduction

There are hundreds and hundreds of different properties at our disposal to change the look and feel of our web pages. In this section we'll start at the beginning and introduce some of the more basic properties to get you started. From there, future sections will build upon this.

Before we Dive in

I don't believe it would be productive for us to go through every single property available to you. Instead, what I am going to do is introduce you to some of the more frequently used properties to give you a feel for how they work. Once you are comfortable with them, picking up new ones is not that difficult. We'll start with CSS properties at CSS Level 1. CSS Levels 2 and 3 mostly just introduce new properties (some of them are a bit tricky to understand the intricacies of but as your skill with CSS grow they won't be that scary).

The official CSS Level 1 standard may be found here:

• W3C CSS Level 1

If you scroll down a bit on the document you will see they have provided a nice table of contents. Properties start from item 5. Most of the properties are named so that you can easily understand what they do. This makes it easy to find the properties you need. If you click on a property it will give you the full outline of it. This includes:

• Values - what values the property accepts.
• A description - outlining what it does and any interesting aspects of its behaviour.
• Sample code - to give you an idea of how it is implemented.

There are other things that will be listed but these will be the most useful to you.

I wouldn't try to remember all the properties but instead keep this document open when you are writing your code so you can easily refer back to it.

Some sample HTML

In the rest of this section we'll demonstrate CSS properties. We will apply them all to the following HTML.

Text Properties

Here is a small sample of things you can change with text.

Font Family

The font-family property allows us to change the particular font we are using. You may select any font which is installed on the clients computer with this property. Some of the more commonly used fonts include:

• Times New Roman
• Arial
• Verdana

It is possible to specify and include non standard fonts but this is a little more complex. We'll look at this later.

Font Size

Font-size may be specified using a few different types but the easiest to work with is pixels (px).

Font Weight

The font-weight css property allows us to specify how thick the lines of the characters are. It may be one of the following values:

• lighter
• normal
• bold
• bolder

Some font families only have normal and bold weights. In this case if you specify lighter it will default back to normal and if you specify bolder it will default back to bold.

Colour Properties

Colour is a reasonably complex thing to define. There are several ways in which we can do this. We will look at colour in much more detail in a later section. Here we will just work with it in it's simplest form which is with Hexadecimal numbers. A colour is specified by a hash ( # ) followed by 6 hexadeximal numbers. The first 2 are the amount of red, the second 2 the amount of green and the final 2 the amount of blue.

Note also that in CSS we use the American spelling for colour so we drop the u, eg color. If you happen to be American then this won't be a problem but for others it is something to keep in mind.

Colour

The color property allows us to specify the colour of the text.

Background Colour

The background-color property allows us to specify the background colour for the element.

Picking good colours for your content can have a huge impact on how it looks.

Spacing Properties

Spacing is another area which is easy to implement but hard to master. There are a lot of subtle little details to understand once we start creating complex layouts. We'll cover the topic in more detail when we look at the box model in a later section. Don't let this deter you from playing about and experimenting with the properties below, however, in the mean time.

Similar to font-size, they may be specified in a variety of units but we'll stick to just pixels for now to keep it simple.

Padding

padding refers to the space around out content. We've included the background-color property here as well just to make it a bit easier to see what is happening.

We may specify the padding in 3 methods:

• A single value - in which case it will be applied to every side.
• As two values - in which case the first unit specifies the top and bottom padding and the second unit the left and right padding.
• As four values - in which case the first applies to the top, the second to the right, the third to the bottom and the fourth to the left.

Margin

margin is similar to padding in that is affects the spacing around the content. It is a second area outside the padding however. Compare the example below to the one above for padding and note where the background colour ends.

Similar to padding, you may specify a single value, or two or four.

Border

The border is inbetween the padding and margin. I'll outline basic usage here but there are various properties available to control the look of the border with greater detail so I would recommend having a look at the Border Properties in the CSS specification.

The various aspects of the border which you may control are:

• It's width.
• It's colour.
• It's style (none, dotted, dashed, solid, double, groove, ridge, inset, outset).

The finished product

Now let's put all the above properties together and see what effect it has. They may have seemed a little boring when looked at individually but as you'll see in the example below, even with just simple tweaks, we can really make our content shine.

Summary

Activities

I know we haven't looked at many rules yet so for these activities use some of the rules we have seen in the examples. As you change the code in your files you may need to refresh the page to see the changes (rather than just reloading it), this is because the browser will cache the page by default.

• Take your page and link it to an external style sheet.
• Now play about with some of the properties we have introduced above.
• Visit the specification for CSS Level 1 and experiment with some of the other properties you find there.