CSS

CSS is a wonderful tool for creating web sites. CSS stands for Cascading Style Sheets and if it is not used in the HTML of a web page then the code will be much more bloated and will almost certainly take longer to load. CSS takes most design aspects of the HTML code and puts it in a separate file so that all you will have left in the HTML is mostly your content.

The CSS file is referenced from your HTML document in the head of your HTML code with the following code:

<link href="filename.css" rel="stylesheet" type="text/css" />

You have to change the file name to the name of your choice and most people just call it css or stylesheet for simplicity. If you look at the source code for this page you will see that we call our CSS file near the top of the code, we are big believers in CSS and that is why we do not cover the design aspects of HTML as we believe that CSS does a much better job.

There are two main points to cover with CSS; the ability to use CSS for changing the appearance of your content and also the ability to use CSS to control the layout of your web page.

Design

CSS can be used to change the appearance of almost everything on your page. From the font and colour of your text to the colour of your links and the way that they change when the mouse pointer is placed over them there are all kinds of things that you can do with CSS. The basic principle is that you list a specific tag and then rules for how you would like it to behave, for example for changing the colour of your links (the A tag) you would use the following code:

a {

color:#859360;

}

You have to state the colour in the hexadecimal format and you can find this using any graphics software, you can also use simple words such as red or blue but this does not give you the fine control of choosing the exact colour that you require. Adding that simple line of code to your CSS file will change the colour of all of your links on the page and you also use the same CSS file for all of your pages and this shows how useful CSS is, if you did not use it you would have to change each link individually on all of your pages buy using CSS you can just use that one line of code in one file. And then if you would like to change the colour of your links it is a simple matter of changing that one bit of code instead of changing hundreds of links across your whole web site.

To change the appearance of the links when the mouse is placed over them just use the following code:

a:hover {

color:#C4CF99;

}

As you can see you can change specific forms of a tag like here we are changing the links only when the mouse is hovering over the link. This gives allot of control over the appearance of your tags and allows you to create some very cool effects, as well as changing specific tags you can also have rules for the whole page by applying rules to the body tag:

body {

background-color:#ffffff;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#8c8c8c;
margin:4px;
min-width:580px;

}

As you can see there are several rules there and they apply to the whole page (it is the exact code that we use for this page), the color rule changes the colour of the text on the page and the padding and margin tags change the spacing around the edges of the page.

Layout

CSS also controls the layout of your page and this is much better than using tables as with CSS it loads allot faster and the code is also much smaller. You have to think about how you want your page to be laid out and give them a specific name, for example of this page we have the logo at the top, the menu on the left, this content in the middle and the buy links on the right. You encase these in a DIV tag as follows:

<div id="main">content</div>

You have to use the ID part so that the CSS knows what styles to apply to it, you list the page parts in the same way as the other tags that you can change and an example is as follows:

#middle {

position:absolute;
top:180px;
left:152px;
right:160px;
background-color:#ffffff;
min-width:425px;

}

There are several ways of laying a page out and the example above uses absolute positioning which places the content at a specific location on the page. You can also lay out elements of the page in an non-absolute way so that it just appears after the last tag in the code, it is best to use non-absolute when possible as it is more simple but there will always be times that you need to use absolute positioning.

So that is the basics of CSS, it is a very complex subject and if you wish to learn more we suggest you buy one of the books that we link to on this page. You do not need to be an expert in CSS though to make a web site, you just need to know enough so that you understand what is happening. This is because it is far better to use software when creating your web sites and this software often creates allot of the CSS code for you, it is however better to understand the code so that you can make any changes that are necessary that the software does not support.