The specificity or order of css rules is calculated on the concatenation of the count of each selectors type. It is a weight that is applied to the corresponding matching expression.

In case of specificity equality, the latest declaration found in the CSS is applied to the element.  We are starting from the lowest ranking to the highest.

Universal selectors – (*)

CSS universal selectors select any type of elements in an HTML page. It matches a single element. An asterisk (*) is used to denote a CSS universal selector and is used to style all the elements of an HTML page. An asterisk can also be followed by an selector when you are wanting to set a style for all of the elements within an element of an HTML page.

At its most basic, the Universal Selector looks like this: 
* {
  margin: 0;
  padding: 0;
} 
This code sets the padding and margins on all elements to zero.

Universal selector with another selector: 
body * {
  margin: 0;
  padding: 0;
} 
This code sets the padding and margins of all elements within body to zero.

Example: 
em{
  color: purple;
} 
This rule will select any <em> element on the page and color it blue.

A pseudo-class is used to define a special state of an element.

• Style an element when a user mouses over it
• Style visited and unvisited links differently

/* unvisited link */
a:link {
    color: blue;
}

Inline style are styles applied directly into the HTML code by adding the style attribute along with any CSS properties.

!important

When an !important rule is used on a style declaration, it overrides any other declaration made in the CSS including inline styles from the mark up. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise.