[css] How CSS Works? and what is Specificity?

This is so extremely important because getting started with CSS is actually very easy but really knowing what's going on behind scenes is completely different, and it's really not as easy as getting started.

 

 

 

 

---

 

[Specificity]

1. inline styles

2. IDs

3. classes, pseudo-classes, attribute

4. Elements, pseudo-elements

(Inline, IDs, Classes, Elements)

 

• CSS declarations marked with !important have the highest priority.
• but only use !important is as a last resource. It's better to use correct Specificites - maintainable code!
• Inline styles will always have the priority over style in external stylesheets.
• A selector that contains 1 IDs is more specific than one with 1000 classes.
• A selector that contains 1 classes is more specific than one with 1000 Elements.
• The universal selector * has no specificity value (0,0,0,0) which means that all other selectors have a precedence over it.
• Rely more on specificity than on the order of selectors.
• But rely on order when using 3rd-party stylesheets - always put your stylesheet last.