An Introduction To CSS

What is CSS?

CSS stands for Cascading Style Sheets. They are a way for you to style the content of your pages without using HTML tags, or putting the code actually in your webpages. The 'Cascading' part of the name means that you can write one CSS file, and all of the style behaviour you define in that file will 'cascade' to affect all the pages which reference it.

How to use CSS

You can use CSS in three different ways;

CSS throughout your page

Many HTML elements have an attribute style. In this attribute you can write any CSS you want to style that element. For example;

<font style="text-decoration: overline; font-weight: bold;">Overlined and bold</font>

The above code produces; Overlined and bold

You might want to use CSS in this manner if you want to style one element in a different way to others of the same type. Other than that, this way of using CSS is pointless, as the idea is to separate code for styling content from the actual content itself.

CSS in the header of your page

You can insert CSS in the <head> of a page by using the following code;

code - Any CSS code that you want to affect elements on the page it is included in. This way at least keeps all of the styling in one place, making the rest of your code easier to read and change. If you use CSS to style a particular element - for example; <h1> - all instances of that element on the page will have the CSS styling applied to them.

If you're going to keep all your CSS code in one place, you may as well use the third method however;

CSS in a separate style sheet

This is the most complicated way of using CSS, however its benefits are worth it. As well as keeping all code for styling your page completely separate from the content, you can write one CSS file, and reference it from every page you want it to affect, thereby saving you repeating a lot of code on your pages, and also making it less work to update the look of your site.

First you will need to create a .css file. Open up a simple text editor like Notepad, create a new file and enter any CSS code you want, then save it as name.css - the name being of your choosing. Upload it to your server in the same way that you upload your website. It is a good idea to put it either in your root directory or a folder specially for CSS files.

In every page in your site that you want to have the style you've just created, you must include this code in the <head> section;

url - The full or relative address of the .css file on your server.