Introducing CSS—the Language of Web Design - Beginning CSS3 - page 7

• Declaration block: This begins with a left curly brace and ends with a right curly brace.
You put your style declarations between these braces. Each declaration consists of a
property followed by a colon ( : ) and value, and ends with a semicolon ( ; ).

• Property: This is one of the properties defined in the CSS specification. Most have intuitive
names. The property in Figure 1-4 affects the left margin of the element being styled.
Property names are not case-sensitive, but they are normally written entirely in lowercase.

• Value: This is the value you want to apply to the property. Some properties have a fixed list
of values that you can choose from. Others let you specify the value yourself. The example
in Figure 1-4 sets the value of the left margin to 40 pixels.

The declaration block in Figure 1-4 contains only one property/value pair, but you can define any number of
properties in the same declaration block.

■ Strictly speaking, you can leave out the semicolon after the last declaration in a block or if the block con-
tains only one property/value pair. but you should get into the habit of always using a semicolon because you might
forget to insert it when later adding extra declarations to the same block. A missing semicolon in the middle of a
block is a common cause of CSS failing to work as expected.

Tip

Using Browser-specific Prefixes for CSS3 Properties
At the time it was introduced, IE 6 was considered an excellent browser, but it had some terrible bugs that
continued to frustrate designers more than 10 years after its release. To avoid a similar situation with CSS3,
browser makers have decided to prefix the names of new or experimental properties with the browser-specific
identifiers listed in Table 1-1 .

Table 1-1. The Main Browser-specific Prefixes for CSS3 Properties

Prefix Browsers

-moz-

Firefox

-ms-

Internet Explorer

-o-

Opera

-webkit-

Google Chrome, Safari

For example, when creating a CSS gradient, you need to use three browser-specific prefixes in addition to the
standard property like this:

div {
background-image: -moz-linear-gradient(#C24704, #FFEB79);
background-image: -o-linear-gradient(#C24704, #FFEB79);
background-image: -webkit-linear-gradient(#C24704, #FFEB79);
background-image: linear-gradient(#C24704, #FFEB79);
}