Using this snippit of code as an example I shall run you through the syntax of CSS code which will help in understanding how the code works.

#leftsidebar {
position: absolute;
left:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}

Although if you haven’t touched CSS before this will look complicated. I shall run you through each section of the code.

• #leftsidebar {

  This section is referred to as the selector. It is simply the name of the section you are designing and will refer to in the HTML section of the website. The { signifies that we are to start describing the section below which will define the aspects of the section.

  Just to point someting out… with the opening tag of the CSS property ‘#leftsidebar {’ notice the hash ‘#’.

  You can style existing HTML elements by simply removing the hash and naming an element, for example:

  'body{'

  The hash ‘#’ signals that we want to change the style of an ID. Therefore if you had the element:

  <div class="leftsidebar"></div>

  Nothing would happen as we’re using the CLASS attribute, not ID, however if you had:

  <div id="leftsidebar"></div>

  The styles would be applied. To apply styles to an element referenced by ID you’d change the ‘full-stop’ ‘.’ to a hash ‘#’.

  #leftsidebar {

  Note that you can have multiple element in a page with the same class name, but you should ONLY have one element in a page with the same ID name.

• position: absolute;

  This part is two parts that come hand in hand, the property, then the value of the property. Each property will have its own type of value whether it be predetermined like the one above, or in the form of an integer such as a number of pixels. Position: Absolute means that the selector will specify that the position will be determined by left, top, right and bottom properties as the next code suggests.

• left:10px;top:50px;

  This works with the section above. In the easiest terms, this code says that this will be 10 pixels from the left and 50 pixels from the top.

• width:200px;

  This determines the physical size of the item, which says it will be 200 pixels wide and stay fixed at this width. A thing to point out is that because there has been no code to say how high the item will be, it shall adjust in height with the content inside it.

• background:#fff;

  This suggests the background colour of the item. Using Hex code to represent the colours, #fff will mean the background colour will be white.

• border:1px solid #000;

  This will produce a border to the item. Looking at the values you can see that it will be 1 pixel wide, solid and black in colour.

  Then the code is closed with a } to signify that you are finished with that specific selector.

This is a very small section but will be very helpful in understanding how CSS works, I hope it helped.