Is There a Specific Order for CSS Properties

What is the order of precedence for CSS?

There are several rules ( applied in this order ) :

inline css ( html style attribute ) overrides css rules in style tag and css file
a more specific selector takes precedence over a less specific one
rules that appear later in the code override earlier rules if both have the same specificity.
A css rule with !important always takes precedence.

In your case its rule 3 that applies.

Specificity for single selectors from highest to lowest:

ids (example: #main selects <div id="main">)
classes (ex.: .myclass), attribute selectors (ex.: [href=^https:]) and pseudo-classes (ex.: :hover)
elements (ex.: div) and pseudo-elements (ex.: ::before)

To compare the specificity of two combined selectors, compare the number of occurences of single selectors of each of the specificity groups above.

Example: compare #nav ul li a:hover to #nav ul li.active a::after

count the number of id selectors: there is one for each (#nav)
count the number of class selectors: there is one for each (:hover and .active)
count the number of element selectors: there are 3 (ul li a) for the first and 4 for the second (ul li a ::after), thus the second combined selector is more specific.

A good article about css selector specificity.

Is there a specific order for CSS properties?

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.

What order should you put CSS properties in?

Though there is no standard around it.
And probably that's how a declarative DSL should be.

The following links might give you an idea on how you can form a standard for your domain

Conventional Order of CSS properties
CSS Lisible
CSS Comb
Order Your CSS Properties

How important is CSS property order?

Apparently the order does not have any direct impact on the result.
The subject has been mentioned here: http://css-tricks.com/new-poll-how-order-css-properties/

It does have an impact according to here: http://css-tricks.com/ordering-css3-properties/

And here is another trend: http://perishablepress.com/obsessive-css-code-formatting-patterns-and-trends/

Final verdict: Arrange the way you judge best, it will work.

does the order of styles matter?

If the rules are equal in specificity (in this case they are), individual rules get overridden in the order they're defined in the CSS, so in your example red wins because it comes later in the CSS definitions. The same rule applies in other cases as well, for example:

<div class="red green">

Which of these wins?

.green { color: green; }
.red { color: red; }

.red wins here, it doesn't matter the order in the class attribute, all that matters is the order the styles are defined in the CSS itself.

Conventional Order of CSS properties

There is no widely adopted convention. There is no difference between either example, so you should choose the convention you prefer. If you must really satisfy the hobgoblins, choose alphabetical or the order it affects the box model.

Order of prioritization when using multiple contradictory css files

Quick Answer:

If both pieces of CSS have the same specificity (for example, they're both body{), then whichever gets called LAST will override the previous one.

BUT, if something has higher specificity (a more specific selector), it will be used regardless of the order.

Example 1:

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    .name { color: blue; }
    .name { color: red; }
</style>

The above example will make the color red. Both selectors are the same, and therefore also have the same specificity. And because CSS reads top-to-bottom, we first tell it to be blue, but then we override that by telling it "nevermind, make it red".

Example 2:

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    #container .name { background-color: blue; }
    .name { background-color: red; }
</style>

The above example will make the background color blue, even though blue was first because the selector is more "specific".

Exception (the use of !important):

The inclusion of !important will override both specificity and order, but in my opinion, should only be used if you're trying to mess with a third party code in which you don't have access to change it any other way.

External CSS:

Overwrite rules work the same on external CSS files. Just imagine putting them first-to-last, top-to-bottom. The selectors called in the first file(s) will get overwritten by same-specificity-selectors in any subsequent files. But specificity will still trump order within the same file or in multiple files.

How to test:

In Chrome, Firefox, and modern versions of IE (probably Safari too), you can right click on something and click "Inspect Element". This will show you the HTML as well as any applied CSS. As you scroll down the CSS (usually on the right), you'll see things that are crossed out - that means they're either incorrect CSS or have been overwritten. To test, you can modify the CSS selectors (either in your own code or right there in the developer tools box) to make them more specific and see if that makes then un-crossed out...etc. Play around w/ that tool - it's VERY helpful.

Not sure how "specific" something is?
Try some of the many online CSS specificity tools:

https://polypane.app/css-specificity-calculator
https://specificity.keegan.st/
https://www.codecaptain.io/tools/css-specificity-calculator

Specificity order of CSS tag selectors with equal specificity

Specificity matters when two or more selectors are matching the same element – not the case here.

e.g.:
in the example below the more specific selector div#id.class won't win against h1 because they are referring to two distinct elements, so the color of h1 is determined by the first rule

h1{    color: blue;}
   div#id.class {    color: red;}

<html><head></head><body>    <div id="id" class="class">        <h1>This is the title</h1>    </div></body></html>

Is the order or sequence of rules in CSS significant?

Order does matter. If the specificity is equal, the rule declared later wins out. See Cascading Order in the spec:

...Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

How to specify the order of CSS classes?

The order in which the attributes are overwritten is not determined by the order the classes are defined in the class attribute, but instead where they appear in the CSS.

.myClass1 {color:red;}.myClass2 {color:green;}

<div class="myClass2 myClass1">Text goes here</div>