CodeLair scripts and tutorials; click to return to home page

CSS: The Basics

Cascading Style Sheets (CSS) are a valuable tool for adding consistency to your web pages. You can change the look of your whole website quickly and with the minimum of fuss. This part (1/2) explains the basic syntax for CSS.
Last updated: May 16, 2007

This tutorial will help you get to know CSS and it's capabilities.

 

What are Cascading Style Sheets?

Cascading Style Sheets (CSS) add a whole new dimension to the humble web page. They give the designer total control over what, how and where text and images appear on a web page. They enhance the capabilities of HTML. CSS uses styles to set text appearances, layouts and decoration. A style basically consists of set properties for a function.

For example, if you wanted all the headings on a page to be 14pt Times New Roman, and colored blue, you can set up a style sheet which will tell the browser to change the properties of that particular heading every time it appears on the page. And if you later want to change the headings to a different color or size, you simply change the rule in the style sheet and every heading will be changed. It's as simple as that!

CSS does not require any new programming software - you can write it just using plain old NotePad or WordPad. You will however, need a basic knowledge of HTML - you don't need to be an expert, but you should know most of the basic tags. If you are not sure, please see my HTML tutorial on this site.

 

CSS syntax

CSS rules can be placed in one of three places:

  • Inline - with the HTML tag in the document.
  • In the head - as predefined rules in the head of a page.
  • In an external document - as predefined rules in another file, which can be linked to from all of your web pages.

There are four types of CSS rules: Selectors, Classes, Class selectors, and ID selectors. These will be explained in more detail shortly.

Here is the basic syntax for a CSS rule:

NAME {property: value;}

Where NAME is either the selector, class, class selector, or ID selector. The CSS rules are placed inside curly brackets {}. The property name is followed by a colon, then the value(s) for that property. The rule is finished with a semicolon.

 

The style tag

CSS is defined using the <style> tag. I will start using an example of CSS in the document head:

<head>
<style type="text/css">

This specifies the style type. The rules go next:

#RULE1 {font: 10pt Arial; color: red;}
#RULE2 {font: 16pt Arial; color: blue;}

Do not worry about the actual rules for now, just learn the syntax. This will all make sense later.

</style>
</head>

Finally, close the tags.

Earlier, I mentioned Selectors and Classes. These are the names given to the rules you type into the style sheet. You need these to call up the rules again at the right point in the web page. As I said, there are four types, which I will explain now in more detail.

 

Selectors

These are in essence HTML tags. In the basic syntax I showed you above, the HTML tag replaces NAME. For example, if you wanted to apply a particular style to every paragraph, you would replace NAME with P, the letter used to define a paragraph in HTML.

<head>
<style type="text/css">

P {font: 10pt Arial; color: red;}

</style>
</head>

This rule will set every paragraph to 10pt Arial, with a red color. This will work for virtually any HTML tag. You can also set several tags to the same properties if you like - separate each with a comma, as below:

H1,H2,H3,H4,H5 {font: 10pt Arial; color: red;}

You can even be more specific and nest tags inside each other:

<head>
<style type="text/css">

P B {color: red;}

</style>
</head>

This rule will now only work if the<B> tag is used inside the <P> tag. for example, if you type this in the body:

<body>

<B>Bold text</B>
<P>Here is some more <B>Bold text</B>, also colored red.</P>

</body>

The first "Bold text" will be bold, but set at the default color. The second "Bold text" will be bold and red because it is nested inside the <P> tag, as stated in our rule.

 

Classes

A class is a name given to a rule. It is used to define exactly where in the web page the style is applied. The syntax is as follows:

<head>
<style type="text/css">

.classname {color: red;}

</style>
</head>

The class name must be preceded by a period (full stop), and you can give the class any name you like, as long as it is one word (i.e. no spaces). To use this style in the document, you call up the class name in the HTML tag:

<B class="classname">Bold text</B>

Note that using this will also apply the effects of the HTML tag, i.e. the text will be bold and red in the above example.

 

Class selectors

As you might imagine, this is a combination of the previous two CSS rules.

<head>
<style type="text/css">

I.classname {color: red;}

</style>
</head>

<body>
<I class="classname">Italic red text</B>
</body>

This is called a dependent class because it can only be used with a particular HTML tag. In practice this isn't very useful, as using a class will do exactly the same job. The only reason you might want to use this is if you want to give the same class name to two different rules, applied to two different HTML tags, e.g. P.name and H1.name.

 

ID selectors

This is probably the most useful CSS rule type. An ID selector allows you to apply a rule wherever you like in the web page. It does not rely on other HTML tags - it has two HTML tags of its own. Here is an example:

<head>
<style type="text/css">

#ID1 {width: 500px;}
.class1 {font: bold; color: green;}

</style>
</head>

This is the basic syntax for ID selectors. To add them into the document, you can use either the <SPAN> tag, or the <DIV> tag. What's the difference? The <SPAN> tag is an inline tag, whereas the <DIV> places a line break before and after it, much like the <P> tag does in ordinary HTML.

<body>
<SPAN ID="id1">The width of this area is 500 pixels.</SPAN>

You can also use these tags with classes:

<DIV class="class1">Bold and green text.</DIV>
</body>

 

Inline CSS rules

You can define CSS rules inline using the style tag. The rules stay the same, but are put in quotes as follows:

<body>
<P style="font: bold; color: #000000;">Text</P>
</body>

This may seem pretty pointless, as you could define these properties using ordinary HTML, but it can be useful when using more complex rules, such as positioning.

 

Linking to an external style sheet

Another very useful feature of CSS is the ability to link to an external style sheet. You type your rules in a text document, and you can link to it from every page on your site. This is very good when you want to change a rule for your whole site, for example, you want to change the default font. You change the definition in your external style sheet, and the rule is applied to all pages linking to that style sheet. Here's how you do it:

1. Open up NotePad, and type all your CSS rules. You do not need to use the style tag, just type the rules:

P B {color: red;}
H1,H2,H3,H4,H5 {font: 10pt Arial; color: red;}
#ID1 {width: 500px;}
.class1 {font: bold; color: green;}

2. Save this file, either as a text file or CSS file. To do the latter, simply type the filename followed by '.css' (without quotes) in the filename box and click save. It doesn't make any difference if the file is '.txt' or '.css', using '.css' can help prevent confusion later. Always save it as a name you will remember. A name such as 'navigation' is much better  '001qts'.

3. To link to this file in the web page, type the following into the head:

<LINK REL=stylesheet TYPE="text/css" HREF="filename.css">

...where "filename.css" is the filename of the stylesheet. Your styles will then be imported automatically! You can repeat this tag for numerous stylesheets.

 

CSS rules

Click here to move onto the next page, which lists and explains the actual CSS rules you can use.