Order of Applying CSS

In which order are CSS styles applied?

Styles are applied according to which styles are most specific to the element, and then in textual order for rules that have equal specificity. More here in the spec. Because a:link is more specific than ul li a, that style wins regardless of placement.

So tell me, how must I correct my style to achieve the a tag inside the li to be rendered blue and not red?

Make the blue rule at least as specific as the red rule. In this case, you can do that by adding :link to it:

ul li a:link
{
  color:blue;
}

What is the order of precedence for CSS?

There are several rules ( applied in this order ) :

1. inline css ( html style attribute ) overrides css rules in style tag and css file
2. a more specific selector takes precedence over a less specific one
3. rules that appear later in the code override earlier rules if both have the same specificity.
4. A css rule with !important always takes precedence.

In your case its rule 3 that applies.

Specificity for single selectors from highest to lowest:

• ids (example: #main selects <div id="main">)
• classes (ex.: .myclass), attribute selectors (ex.: [href=^https:]) and pseudo-classes (ex.: :hover)
• elements (ex.: div) and pseudo-elements (ex.: ::before)

To compare the specificity of two combined selectors, compare the number of occurences of single selectors of each of the specificity groups above.

Example: compare #nav ul li a:hover to #nav ul li.active a::after

• count the number of id selectors: there is one for each (#nav)
• count the number of class selectors: there is one for each (:hover and .active)
• count the number of element selectors: there are 3 (ul li a) for the first and 4 for the second (ul li a ::after), thus the second combined selector is more specific.

A good article about css selector specificity.

CSS files applying order

CSS code does not replace other CSS code, and the order of parsing style sheets is not relevant. There is really no order of application, since all applicable style sheets are taken into account. When several style sheets assign a value to a property of an element, then the conflict is resolved according to cascade rules. The order is then:

1. user agent declarations (browser default style)

2. user normal declarations

3. author (page) normal declarations

4. author (page) important declarations

5. user important declarations

So author (page) !important declarations trump everything but user !important declarations. In Css 1, the order was different, but this was changed in CSS 2 and browsers live by the current rules: the user always has the last word, if he wishes to exercise his rights.

Order of prioritization when using multiple contradictory css files

Quick Answer:

If both pieces of CSS have the same specificity (for example, they're both body{), then whichever gets called LAST will override the previous one.

BUT, if something has higher specificity (a more specific selector), it will be used regardless of the order.

---

Example 1:

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    .name { color: blue; }
    .name { color: red; }
</style>

The above example will make the color red. Both selectors are the same, and therefore also have the same specificity. And because CSS reads top-to-bottom, we first tell it to be blue, but then we override that by telling it "nevermind, make it red".

---

Example 2:

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    #container .name { background-color: blue; }
    .name { background-color: red; }
</style>

The above example will make the background color blue, even though blue was first because the selector is more "specific".

---

Exception (the use of !important):

The inclusion of !important will override both specificity and order, but in my opinion, should only be used if you're trying to mess with a third party code in which you don't have access to change it any other way.

---

External CSS:

Overwrite rules work the same on external CSS files. Just imagine putting them first-to-last, top-to-bottom. The selectors called in the first file(s) will get overwritten by same-specificity-selectors in any subsequent files. But specificity will still trump order within the same file or in multiple files.

---

How to test:

In Chrome, Firefox, and modern versions of IE (probably Safari too), you can right click on something and click "Inspect Element". This will show you the HTML as well as any applied CSS. As you scroll down the CSS (usually on the right), you'll see things that are crossed out - that means they're either incorrect CSS or have been overwritten. To test, you can modify the CSS selectors (either in your own code or right there in the developer tools box) to make them more specific and see if that makes then un-crossed out...etc. Play around w/ that tool - it's VERY helpful.

Not sure how "specific" something is?
Try some of the many online CSS specificity tools:

• https://polypane.app/css-specificity-calculator
• https://specificity.keegan.st/
• https://www.codecaptain.io/tools/css-specificity-calculator

Precedence order of execution of CSS styles

Let's say YOUR website is a house;

HTML in your house is going to be all the walls, columns, and more. By themselves they look ugly.

CSS comes in place to put the style on them like painting, designs and more.

YOU first build the house(HTML), then you paint it(CSS). But with time you realize you need to add a new room to you house(HTML), the builder(JS) adds the new room, and put the CSS in place which gets applied to the new elements.

Every time the builder(JS) add a new part to the house(HTML), the designer(CSS) will styled it.

Now in practice:

you should load your CSS at the top (head tag) so all styles are ready once needed. In the others hand the JS, should be loaded at the end before the closing tag of the body.

Order of (S)CSS rules in an Angular application

Angular is bundling part of the component style with the component itself. That's also the case with material components.

If you look at the head of your application, you will notice multiple style tags. Each one corresponding to a component, as well as a first one usually the theming css.

For you, that means that the override style you including in the theming css file, will be including first. Then the button is imported by your app, and with it the corresponding css.

Css properties have an order priority, the latest value for each property is the one actually apply by the browser.

You have a couple options to solve this.

!important

Brutal but efficient, will apply the style regardless of priorities.

.mat-raised-button {
  line-height: 50px !important;
}

Better selectors

You can add your own class to the buttons and use said class to have a more precise selector, giving you priority.

<button class="my-button" md-raised-button>Basic</button>

.my-button.mat-raised-button {
  line-height: 50px;
}

Style encapsulation

By moving the style override inside your component, Angular style encapsulation will kick in and make sure that your own style gets priority by adding an attribute selector

/* app.component.css */
.mat-raised-button {
  line-height: 50px;
}

Should the order of CSS files in a HTML page matter?

Short answer: Yes.

This is actually a subject I taught just last week, and I'll tell you a brief version of a one-hour class I told my students:

• Bootstrap first to establish the framework
• Follow with any supporting stylesheet (Owl.css, plugins.css, etc)
• Next is your custom stylesheet. This is to override all of the above.
• Lastly, the responsive stylesheet. This one will override all of the above systematically and programatically according to the media queries conditions being satisfied in the browser.

Doing this type of architecture will reduce the amount of (important!) drastically.

In what order does the browser process css?

The specific order in which the browser processes CSS is:

1: Inline -then-

2: Style Tags -then-

3: 1st CSS File defined in HTML (From top to bottom) -then-

4: 2nd CSS File defined in HTML -And so on-

So if you had a tag in all four the one applied would be the Inline style

Yet all this can be overridden by using !important when defining the property

---

Related Topics