Is there a specific order for CSS properties?

Question

For example, if I write:

background-color: black;
color: white;

or

color: white;
background-color: black;

Is there any difference between the two and should I care about order?

Answer 1

No. You can write them in any order. In the case of duplicates within the same selector, the last rule wins.

p {
  color:blue;
  color:red;
  color:green; /* Green wins */
}

When dealing with multiple selectors, rules that come later will override earlier rules, unless the earlier selector is more specific.

For example, this code will turn all your paragraphs green:

p { color:red; }
/* ... */
p { color:green; }

While this code will turn all your paragraphs red, because the first selector is more specific.

body p { color:red; }
/* ... */
p { color:green; }

While the order of rules within a selector may not matter, I would take care to write them in a predictable order (position rules before sizing rules before colouring rules, for example) simply to make your CSS consistent and slightly more pleasant to maintain.

Answer 2

In your example there is no difference, however ordering can matter but only in rare instances.

For example, it can sometimes be common to do:

display: block;
display: inline-block;

The parser will always interpret from top to bottom when the styles are in the same rule. In this case inline-block overwrites block because the property is the same name.

However:

ul li{
  font-size: 14px;
}

ul{
  font-size: 12px;
}

In this case, even though the 12px comes after the 14px in the rules, the text in list item elements will be 14px because of the higher precedence of the selector ul li over ul

Answer 3

Some style guides recommend alphabetizing CSS styles. This helps avoid bugs spawning from duplicate property definitions.

Answer 4

background: none no-repeat 0 0 #ccc;
background-color: #eee;

background-color will be #eee ... should take care of such kind of situations ... for other case there's the order does not matter.

for complex properties having a set of values and their simple sub-properties - you should prceed carefully: margin, padding, background ... and etc.

Answer 5

Only time order matters is with overrides with an element with html parent/child nodes or multiple classes such as below. Or as Meagar said if you have multiple properties of the same type describing the same class. The last one will dominate. So the text color will be white or #fff.

.classname
{
  color:#000;
}

.classnameTwo
{
  color:#fff;
 }

Sample html.

<div class="classname classnameTwo">Color text </div>

Answer 6

The order of declarations matters to the extent that the declarations affect the same property. By the cascade rules, the latter specified wins, other things being equal.

Thus, in the example, the order has no impact, since the declarations affect distinct properties. But e.g. in the declarations

 font: 100% Calibri; font-weight: bold;

the order is significant, since both declarations set font-weight (to different values). Similarly, in

 background: white; backround-image: url(bg.png);

the order is significant; if the order is reversed, there will be no background image, since the background shorthand sets all background properties, including background-image: none in this case.

(This summarizes and expand my answer to a duplicate of this question.)