MOCKSTACKS
EN
Questions And Answers

More Tutorials









CSS specificity

Cascading and specificity are used together to determine the final value of a CSS styling property. They also define the mechanisms for resolving conflicts in CSS rule sets.


CSS Loading order

Styles are read from the following sources, in this order:

1. User Agent stylesheet (The styles supplied by the browser vendor)

2. User stylesheet (The additional styling a user has set on his/her browser)

3. Author stylesheet (Author here means the creator of the webpage/website) Maybe one or more .css files In the <style> element of the HTML document

4. Inline styles (In the style attribute on an HTML element)


How are conflicts resolved?

When only one CSS rule set is trying to set a style for an element, then there is no conflict, and that rule set is used.

When multiple rule sets are found with conflicting settings, first the Specificty rules, and then the Cascading rules are used to determine what style to use.

Example

.mystyle { color: blue; }

div { color: red; } 


Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid dolore omnis nesciunt est magnam assumenda libero, vero dolorem, obcaecati eos placeat temporibus enim. Velit non aliquid recusandae reprehenderit unde voluptatem atque natus repellendus tempore?

First the specificity rules are applied, and the one with the highest specificity "wins".




Conclusion

In this page (written and validated by ) you learned about CSS specificity . What's Next? If you are interested in completing CSS tutorial, your next topic will be learning about: CSS Colors.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.