CSS Basic Properties!

Let's start adding style.

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:

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.

our_page.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Hobbies</title>
  5. <meta name="description" content="Let's demonstrate some CSS">
  6. <meta name="keywords" content="html tutorial css linked">
  7. <link href="style.css" rel="stylesheet">
  8. </head>
  9. <body>
  10. <h1>Hobbies</h1>
  11. <p>On the weekend I got all my watches and attached them together into a belt.</p>
  12. <p>It turned out to be a waist of time.</p>
  13. </body>
  14. </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 comples. We'll look at this later.

style.css

  1. h1 {
  2. font-family: Times New Roman;
  3. }
  4. p {
  5. font-family: Verdana;
  6. }
Our Funky HTML Page

Hobbies

On the weekend I got all my watches and attached them together into a belt.

It turned out to be a waist of time.

Font Size

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

style.css

  1. h1 {
  2. font-size: 30px;
  3. }
  4. p {
  5. font-size: 16px;
  6. }
Our Funky HTML Page

Hobbies

On the weekend I got all my watches and attached them together into a belt.

It turned out to be a waist of time.

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.

style.css

  1. h1 {
  2. font-weight: normal;
  3. }
  4. p {
  5. font-weight: bold;
  6. }
Our Funky HTML Page

Hobbies

On the weekend I got all my watches and attached them together into a belt.

It turned out to be a waist of time.

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.

style.css

  1. h1 {
  2. color: #9ACA42;
  3. }
  4. p {
  5. color: #357180;
  6. }
Our Funky HTML Page

Hobbies

On the weekend I got all my watches and attached them together into a belt.

It turned out to be a waist of time.

Background Colour

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

style.css

  1. h1 {
  2. background-color: #9ACA42;
  3. }
  4. p {
  5. background-color: #A0D2DC;
  6. }
Our Funky HTML Page

Hobbies

On the weekend I got all my watches and attached them together into a belt.

It turned out to be a waist of time.

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

If you want to learn more about picking good colour schemes head on over and check out our Graphic Design Tutorial section on Colour.

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.

style.css

  1. h1 {
  2. padding: 5px;
  3. background-color: #9ACA42;
  4. }
  5. p {
  6. padding: 5px 10px 8px 30px;
  7. background-color: #A0D2DC;
  8. }
Our Funky HTML Page

Hobbies

On the weekend I got all my watches and attached them together into a belt.

It turned out to be a waist of time.

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.

style.css

  1. h1 {
  2. margin: 10px;
  3. background-color: #9ACA42;
  4. }
  5. p {
  6. margin: 5px 10px 8px 30px;
  7. background-color: #A0D2DC;
  8. }
Our Funky HTML Page

Hobbies

On the weekend I got all my watches and attached them together into a belt.

It turned out to be a waist of time.

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).

style.css

  1. h1 {
  2. border: 2px solid #E9B82B;
  3. }
  4. p {
  5. border: 1px dashed #4D8353;
  6. }
Our Funky HTML Page

Hobbies

On the weekend I got all my watches and attached them together into a belt.

It turned out to be a waist of time.

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.

style.css

  1. h1 {
  2. font-family: Arial;
  3. font-size: 24px;
  4. font-weight: normal;
  5. color: #efefef;
  6. background-color: #9ACA42;
  7. margin: 2px 0px 20px 0px;
  8. padding: 5px;
  9. border-bottom: 2px solid #4D8353;
  10. }
  11. p {
  12. margin: 10px 0px 10px 30px;
  13. color: #357180;
  14. font-size: 16px;
  15. }
Our Funky HTML Page

Hobbies

On the weekend I got all my watches and attached them together into a belt.

It turned out to be a waist of time.

Summary

font-family
Set the font for the given item.
font-size
Set the font for the given item.
font-weight
Set the weight for the font (eg, bold or normal).
color
Set the font colour for the given item.
background-color
Set the background colour for the given item.
padding
Set a padding around the given item.
margin
Set a margin around the given item.
border
Set a border around the given item.
Full list of properties
It's silly to try and remember all the properties available to you. Insteach use the specification as a reference. ( http://www.w3.org/TR/2008/REC-CSS1-20080411/ )

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.