CODEWITHSUNDEEP
css
php_nub_qq
php_nub_qq

Reputation: 16055

CSS not overwriting properties correctly

From what I've read css styles overwrite each other depending on the order of inclusion. But I'm experiencing some strange behavior, shown in the picture:

enter image description here

It is clearly visible that default.css is included after base.css which would suppose that styles from default.css will overwrite styles from base.css. However this is not the case, as you see, the style from base.css persists and the style from default.css is being cancelled out. Why is that?

Upvotes: 0

Views: 68

Answers (2)

Becuzz
Becuzz

Reputation: 6857

Your style from default.css has a more specific selector so will overwrite the base.css style. You may want to google how specificity points work in determining how css gets applied.

Upvotes: 1

Donut
Donut

Reputation: 112895

This is because CSS class selectors (e.g., .marginblock in your example) has a higher precedence than CSS type selectors (body in your example).

If your CSS were as follows, you would have the behavior you expect:

In base.css:

.marginblock {
    margin: 0 auto;
}

In default.css:

.marginblock {
    margin: 25px;
}

Here's more detail on the CSS order of precedence:

  1. ID selectors
  2. Attribute selectors
  3. Class selectors
  4. Child selectors
  5. Adjacent sibling selectors
  6. Descendant selectors
  7. Type selectors

More information can be found here.

Upvotes: 2

Related Questions