What is the order of priority for my stylesheet elements

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.

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.

Type selectors will select any HTML element on a page that matches the selector:

  color: purple;

This rule will select any <em> element on the page and color it blue.


For example, it can be used to:

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;

Example of ID selector in HTML code:
<span id="important">Here's a span with some text.</span>
<span>Here's another.</span>

Class selectors are used to select any HTML element that has a id attribute matching the the id selector.

If you want to target a specific section of text in your document you would place it within in the inline element<span> and add an ID so it can be styled in your CSS.

The CSS example could be:
#important {
  font-size: 110%;
  font-weight: bold;

Example of inline style applied to the paragraph: 
<p style=”text-align: center;”>

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


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.

Adwords (1)

Branding (13)

CMS (3)

CSS (6)

Graphic Design (6)

Javascript (1)

PHP (3)

SEO (5)

tech support (5)

Web Design (10)

Web Development (10)

Wordpress (17)

Wordpress plugins (3)