Cascading Style Sheets Tutorial

Contents

This tutorial will teach you the basics of using CSS, and show you a few basic properties to get you on your way. It is split into several parts, which should always be accessible either from this page, or from the top of any page you are viewing. Below lists the parts along with their title and a brief description of what they cover:

1. The Basics - Introduces you to how to write basic CSS, and how to actually implement it into your HTML pages
2. Applying Styles to Only Certain Objects - Shows you how to apply styles to only objects of your choice, rather than all elements
3. Formatting Text & Other Inline Elements - Teaches you about some basic, common properties, and gives you a chance to really start putting CSS to some good uses
4. Exercise Answers - Gives you the answers to the excersises found at the bottom of the previous sections
5. Frequently Asked Questions - Answers some Frequently Asked Questions about style

Each section will also have a few excersises at the bottom of each page to test your knowledge, and make sure you understand what you have learnt (if not, you need to take another read). The answers for each section are also avaliable, and underneath the excercises should be a link to them.

Definitions

Certain terms will be used throughout this tutorials, which are summerised below:

Units

Units are a way of setting sizes of elements. For instance say we wanted a <div> element that had a height of 250 pixels, we would need to tell the browser what unit to use, so we add the keyword px after 250:

div { height: 250px; }

If we had left the unit out it would have been invalid CSS, and so ignored by any conforming browser. In almost all cases you must provide a unit for object sizes. One execption to this rule is when the length is zero, in which case you can just write 0, but I do not recommend you do that, as it is perfectly acceptable to add a unit, and it keeps you in the habbit of adding them too. So you could (and in my opinion should) write height: 0px; The possible units are avaliable in two varieties:

Relative Units

Relative units are sized relative to the output device's size/UA's settings. For example setting your browser's font-size to larger will make the font larger than if you had set its font size to smaller. The units avaliable are:

em

The font size of one character in the element's font.

ex

The height of the letter x in the element's font.

px

One pixel on the output device (usually a monitor). It is not recommended you use this for things such as font-sizes, as some browsers do not allow for users with visual diabilities (e.g. bad eyesight) to resize the font as the above two units do.

% (percentage)

Percentages make the element a percentage of their parent's size. To use percentages you simply add a percentage sign (%) after the size: 120%

Absolute Units

Absolute units on the other hand should always display at the same size. For instance if you set the browser's text-size to larger it may appear at the same size as though it had not been set to larger, although this is not always the case. Absolute units are generally a bad idea unless you are using them for an output device such as a printer where you may want specific sizes. You should not use absolute sizes for output devices such as monitors as the user may have a disability that requires they have the sizes larger so they can see clearly. It is not fair to stop them viewing your page properly. The units avaliable are:

in

Inches

cm

Centimeters

mm

Millimeters

pt

Points (¹⁄₇₂ of an inch according to CSS level 2 specifications)

pc

Picas - 12 points

Compatibility

When I show you various properties and their possible values I will also use the following images to let you know whether they are compatible with CSS level 1 and/or level 2:

Image/Key	Description
	Indicates that the current property is compatible with CSS level 1. This will almost always be seen with the CSS 2 key (described below).
	Indicates that the current property is compatible with CSS level 2. This may not be seen with CSS 1 key (described above), as some properties were newly added to CSS 2.

|