How do I use css precedence?

hoodedvul

CSS has the following ways to define styles as discussed in previous articles.

Browser Default Styles
External CSS Files
Internal CSS
Inline Styles

What override what when using them? Numbered in order of highest precedence first.

Inline
Internal
External
Browser

An inline style will always take precedence. Example below.

    <p class="opening">
      This is the opening line of text
    </p>

The Cascading order determines how styles are ordered in terms of their location. In addition to this there is CSS Specificity, which determines which styles take precedence.

The precedence in CSS Specificity the order determined by a calculation explained in this article https://www.w3schools.com/css/css_specificity.asp

In order of highest specificity

Element has inline styling greatest specificity assign (1,0,0,0 points)
For each ID value assign 0,1,0,0 points
For each class value or pseudo-class or attribute selector assign 0,0,1,0 points
For each element reference assign 0,0,0,1 point

Important Note.

The !important value always overrides everything.