Brought to you by Style Master CSS editor

properties: introduction

Most tutorials for style sheets concentrate quite heavily on what we are about to look at, Properties, but pay quite a bit less attention to selectors. Why does this tutorial go about things differently? Well in many ways, properties is a straightforward subject. We all have a rather good grasp of text styles and page layout, things that can be done with fonts, backgrounds, borders and so on. But to really take advantage of the control over appearance that style sheets give us, we need to be able to apply the properties as well.

Selectors are vital prerequisites for mastering style. Without a good understanding of them, you'll benefit from the added control over appearance that style sheets give you, but you won't be able to take your web pages to the next level. More importantly, you won't be able to take advantage of the powerful site management capabilities of style sheets. So don't just forget about them in your excitement at giving colored backgrounds to headings.

But now we come to the fun part, making our sites look more sophisticated. This is no doubt what you've been waiting for.

As with the rest of this guide, this part is long on explanation. Throughout this guide we have been looking to help you master style, to get a really strong grip on the underlying concepts, and the uses of them. At this point I'll mention again our self paced CSS course, which aims to give a more practical understanding of how to work with style sheets. You might like to turn there for this practical approach.

I wouldn't worry overly about the finer points of syntax (that is how to write the code to achieve the effects we are about to cover), but concentrate on what can and can't be done with CSS. Why? Well, this is close to a shameless plug, but applications like our own Style Master (you can thank or blame Style Master for bringing you this tutorial) help you get the syntax right, by making it all point and click easy. So you just worry about what you want to do, and don't worry so much about how to do it. And even if you don't want to use an editor to create your style sheets, you'll do well to use this guide as a constant reference, rather than slavishly trying to learn and remember correct style sheet syntax. There are so many properties, with so many potential values, that trying to commit more than a core of them to memory is beyond most web developers (myself among them).

What are properties?

One more time, let me recap how style sheets work. A style sheet is a series of instructions, called statements. Each statement has a selector, which tells a browser which elements on a page are affected by this statement, and a declaration, which tells the browser how to draw these elements. A declaration is a collection of properties.

A property has the following form: a property name followed by a value. The property name is one of several dozen keywords which we will look at shortly.

There are several different types of value. Different properties can take different types of these values. Rather than distracting us from the main purpose of this lesson, properties, by taking a look at each of these different kinds of value, you might like to take a detour, or you might like to continue, and use our section on values as a reference source when needed.

The Cascading Style Sheets recommendation divides properties into a number of categories. I won't follow these categories rigorously, but rather group the properties in similar, but differently named categories. The categories of property I will use here are:

We'll take a look at each of these in turn. Follow the links above to read more on the respective sets of properties. If you're looking for a particular property, you might do well to have a look through our index, which lists and links to all the individual properties we cover in this guide.

You can also find information about some specific properties in the sections on Printing and Generated Content. Some properties are very specific to these aspects of style sheets and are discussed there.

Our explanation follows the CSS1 and CSS2 recommendations quite closely, attempting where possible to translate the shorthand of those documents into more user friendly terms. (Remember that the recommendation is written for experts in the field to help develop tools such as editors and browsers, not as an author's guide). Occasionally, I have quoted the recommendation, but this quotation is, for the sake of legibility, not always in quotation marks. More normally, I have paraphrased the recommendation, expanding on the terse descriptions there.

All respect goes out to the authors of the original CSS1 and CSS2 recommendations. Thanks for making the web a better place.

How to read the property guide

Each property is explained in the following way.

property name

What it does

This part gives a description of what the property does.

Possible values

This part outlines the different kinds of value that the property can take.

Default values

Even where a property is not set on an element, the element usually has a default value for that property. For example, for the font-size of an element, if no font-size property is set, the default value is medium.

This part outlines what default value, if any an element will have for the property.

Is it inherited?

Many, but not all properties are inherited by the children of an element from their parent. So, for example, if you give text properties to the body selector they will be inherited by all the paragraphs, tables and so on which are contained by the <body> element. All properties can be forced to be inherited, where by default they are not inherited, using the inherit value.

Note that because many values are inherited their actual default value will be inherit rather than medium, none etc as defined in the specification.

This part specifies whether the value is automatically inherited by child elements.

Hints and suggestions

This part has notes and tips for using the property, and avoiding any of its pitfalls.

Browser support

Detailed browser support information for all features of CSS can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.

A note on values

For each property, we detail the kinds of values it can take. Extensive explanation of how different values work can be found in our section on values.

next: text style properties

Brought to you by Style Master CSS editor