CSS Introduction

CSS is an abbreviation, it stands for Cascading style sheets.It is used to tell your browser how to display the HTML in your pages.

There are 3 ways to apply CSS to your HTML. These are external, embedded and inline. You can find out more about these options on one of our introduction tutorials here.

It is normally recommended that you use external style-sheets, as it allows you to use one single file to format multiple HTML pages. This is obviously very useful and saves us a lot of work.

Writing CSS code

CSS code is quite simple,intuitive and in most cases easy to learn. A CSS document is made up of a number of individual 'lines' of code. These 'lines' of code are known as rules. There are 2 parts to each rule.

The first part of a rule is known as the selector, the second part consists of one or more declarations.

Just as the rule is made up of two parts, each declaration is also made up of two parts; these being property and value.

If you found any of this confusing take a look at the image to the left. This should clear things up.

Every selector should be followed by an opening curly bracket, and a closing curly bracket. Within these two curly brackets live the declarations. Each of these declarations should end with a semicolon. The semi colon indicates the end of the declaration, and a new declaration can be started if necessary.

Things to remember

1. Selectors are applied to HTML elements such as H1,H2,P, DIV etc as seen above. But they can also be applied to ID's and Classes.
2. To apply CSS to a class you use the following code: #Classname { }
3. To apply CSS to an ID you use the following code: .IDname { }
4. It is useful to write comments in your CSS as you go. This helps to keep things organised and easy to maintain. To place a comment in your CSS use the following code: /* Comment here */. Comments are always ignored by the browser.