Using Style Sheets

Specificity

The next step in determining style precedence is specificity. This basically has to do with the number of elements and attributes in a rule's selector. The procedure involves counting three items:

1. The number of ID attributes in the selector.
2. The number of other attributes in the selector.
3. The number of tag names in the selector.

These three values are then concatenated in order to give a weight. Some examples are shown below.

#blurb { ...}         /* ID = 1, Attributes = 0, Tags = 0 : 100 */
.message.big { ... }  /* ID = 0, Attributes = 2, Tags = 0 :  20 */
div.message { ... }   /* ID = 0, Attributes = 1, Tags = 1 :  11 */
.message { ... }      /* ID = 0, Attributes = 1, Tags = 0 :  10 */
div { ... }           /* ID = 0, Attributes = 0, Tags = 1 :   1 */
* { ... }             /* ID = 0, Attributes = 0, Tags = 0 :   0 */

Note that a higher ID count always beats any number of attributes, and in turn a higher attribute count always beats any number of tags. So a rule selector with an ID would weigh more than one with twelve class attributes but no ID.

Order

The last step in determining precedence is the order of the style rules. The last rule defined overrides any previous, conflicting rules. For example, given these two rules

p { color: red; background: yellow }
p { color: green }

paragraphs would appear in green text. They would also have a yellow background however, because the first rule is not completely negated. Its value for the color property is overridden by the second rule but its background-color is not in conflict, so it still applies.

Pop Quiz

Take a look at the following code:

p.red   { color: red }
p.green { color: green }
p.blue  { color: blue }

...

<p class="red green blue">Sample text.</p>
<p class="green blue red">Sample text.</p>
<p class="blue red green">Sample text.</p>

Given what you've learned about CSS, what color is the text of each paragraph?

Show Answer

Inline Styles

Style properties defined inline, i.e., within an HTML tag's STYLE attribute, are given the same weight that an ID selector would have. In terms of order, they are treated as though they occur after all other rules.

In other words, inline styles take precedence over anything but a conflicting declaration in a user style sheet.

Properties and Values

Let's take a closer look at style declarations, that is, the definition of a style property and value in a rule. Remember that declarations are always in the form

property : value

It's a good idea to always add a semicolon to the end of a declaration. Although it's not required when the declaration is the only one in a block, it can save you from headaches later on if you should update the style sheet.

property : value;

CSS is case-insensitive when it comes to property names and keyword values. But case can be significant in certain value types, like font names.

Properties

There is a fixed set of style properties you can use. Not all browsers support all the standard properties. Some even allow their own, proprietary properties. In any case, a browser should ignore any property name it doesn't recognize. So it's generally safe to use any property name as long as the syntax is correct.

Property names are identifiers in CSS, generally consisting of letters, digits and the hyphen character ("-"). While a few other characters are allowed, you won't often see them. The convention is to use meaningful names like border and to hyphenate names consisting of multiple words, like background-color.

Any good reference will give you the full set of property names you can style. For individual browsers, try the vendor's web site for a list of supported properties or one of the many compatibility charts available online.

Although properties vary in nature and purpose, all share a common set of aspects,

• Which elements they apply to.
• A default value.
• Whether or not they are inherited.
• A set of permissible values.

Again, these can be found in any good reference. For this article, we'll just look at some general principles.

Shorthand Properties

Many properties relate to a particular aspect of some object on a page. For example, a border has several "parameters." These include its thickness, its color and so on. There are individual properties for each of these. Shorthand properties allow you to combine several related properties into an single declaration. For example,

  border-color: #000080;
  border-style: inset;
  border-width: 2px;

can be expressed as

  border: 2px inset #000080;

The border property expects three (optional) values - width, style and color - separated by spaces. Like individual properties, shorthand properties have their own set of permissible values. The difference being that they accept several values rather than just one. Again, check a reference to see what values and syntax a specific shorthand property expects or requires.

Property Overlap

Shorthand properties can overlap other properties. For example, border-width is a shorthand for border-top-width, border-right-width, etc. Any of these also overlap the width portion of the border property.

In such cases, the order of the rules and declarations determines the value used. So given this rule:

blockquote {
  border-top-width: 4px;
  border-right-width: 4px;
  border-bottom-width: 4px;
  border-left-width: 4px;
  border-width: 2px 3px 3px 2px;
  border: 1px solid black;
}

The border width on BLOCKQUOTE elements would be one pixel on all four sides.

Prev | Next