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.
You don't really need to worry too much 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).
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 and different properties can take subsets of these. Rather than distracting us from the main purpose of this lesson, properties, by taking a look at each of these different types 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 CSS specification divides properties into a number of categories. In this guide we don'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:
I started using it as a learning tool, assuming I would go back to editing my CSS in my text editor - but it is just so convenient.
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 specification quite closely, attempting where possible to translate the shorthand of those documents into more user friendly terms. Remember that the specification 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 specification, 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 CSS 1 and CSS 2 specifications. Thanks for making the web a better place.
Each property is explained in the following way.
What it does
Here you'll find an explanation of the effect this property should have when it is applied to an element and the results viewed in a browser that supports the property.
All properties can only take certain particular values or types of value. The acceptable values or types of value for the property will be specified here.
For many properties we mention only the types of value it can take. Extensive explanation of what these different types of value are can be found in our section on values.
Even where a property is not specifically set on an element, the element will often have a default value for that property. For example, for the
font-size of an element, if no
font-size property is set, the font must still have some sort of size, mustn't it? In this case, the default value for
medium. In the specification, default values are referred to as initial values.
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> they will be inherited by all the paragraphs, tables and so on which are contained by the
<body> element. All properties can take the value of
inherit. This means that the selected element must inherit the value for that property from its parent, even if it wouldn't do this by default.
Note that because many values are inherited their actual default value will be
inherit rather than
none etc as defined in the specification.
This part specifies whether the value is automatically inherited by descendant elements.
Hints and suggestions
This part has notes and tips for using the property, and avoiding any of its pitfalls.
This part provides compatibility information for the property, in a wide range of browsers.