What is rule order, when defining the weight of a style? Where can it be used on purpose?

When more than one style rule have the same weight, the last rule to be applied to an element wins.

<style>
	p { color: red; }
	p { color: blue; }
	p { color: green; }
</style>
<!-- The color of the paragraph will be green -->

This is specially handy when we want to provide fallback rules for new style rules that might not be supported by all browsers:

h1 {
	/* fallback first */
	border: 25px solid #eee;
	/* newer technique */
	border-image: url(fancyframe.png) 55 fill / 55px / 25px;
}