Learning CSS Part 7 : The Order of the Priority Selector CSS (Cascading)


In CSS, a tag can have more than one of the CSS code. In the tutorial to know order of priority CSS Selector this we will discuss the order or priority of the CSS code that will be used by HTML tags, or known by the term Cascading.

Understanding Cascading of CSS

CSS stands for Cascading Style Sheet, which cascade in English can mean a small waterfall tumbling from the top down. In CSS, the intent of this cascading is a style can be overwritten or override the style suits the order, or we call it as the priority of the CSS.

Regarding the word “priority” to the CSS code, I will be divided into 2 parts, this article will only discuss about the priority or the order of the CSS code if viewed from the “source” code. We will test the priorities of external style sheets, internal style sheets, and inline CSS style. In the next tutorial we will discuss about the CSS priority as seen from kespesifikannya.

The Cascading effect based on the source of the CSS code

Suppose we have a tag header <h2> and then want to create CSS code using external style sheets to modify the header tag to blue. But at the same time we also make internel style sheet to transform it into a red color, then color is what will appear in the browser?

To test it, let us try it directly, the first step, create a CSS file that will be imported, e.g. priority.css CSS code, type the following:</h2>

Then as the sample HTML, I use priority. html, save both files in the same folder :

Note that before the tag <style>, my “calling” file priority.css first. Then in the tag <h2> the second I added the attribute “color: green” on tag <h2>.

If we run the HTML code above, the color of the text in the second tag<h2>the creature will be red and blue, and no blue creature.

See the Pen Cascading of CSS by webspoints (@webspoints) on CodePen.

From the simple example above, the tag <h2> actually the “subject” or “modified” by 3 the same CSS property simultaneously, i.e. the third selector to change the color of the text of the tag<h2>However, there is only one code that will “win“.

In the matter of the ‘ piercing each other‘ this, CSS has its own priority rules. If there are overlapping CSS property ‘ clash ‘, then the order of precedence is as follows (from the most powerful) :

  1. Inline style, that is directly attached to the style tag.
  2. Internal style, i.e. a style declared at the beginning of the page (tag <style>)
  3. External style, i.e. a style declared in a css file, and called through a tag <link> or @import

Then if you see again the above HTML code, text “Is what I? … 1″ is red because the internal style color: red more got higher priority than external style color: blue.

While the text “Is what I? … 2 “are green because the inline style color: green gets more priority than external style color: blue or internal style color: red.

In addition to the priority between “sources” CSS code, the process of cascading priorities or CSS also continues for the CSS code in the same file. This will be in the next tutorial we discussed in order of priority CSS Selector (Specificity).


Please enter your comment!
Please enter your name here