CSS CASCADING
The cascade is an algorithm that defines how user agents combine property values originating from different sources.
The cascade lies at the core of CSS, as emphasized by the name: Cascading Style Sheets.
When a selector matches an element, the property value from the origin with the highest precedence gets applied.
CSS SELECTORS
A CSS Selector selects the HTML elements I want to style. We have different categories of CSS Selectors which are:
Simple Selectors
Combinator Selectors
Pseudo-class Selectors
Pseudo-elements Selectors
Attribute Selectors
I am going to be discussing the most common used, which is the Simple Selector.
Simple Selectors select elements based on name, id, class. Let’s look at various simple selectors we have:
The CSS Element Selector
The CSS Id Selector
The CSS Class Selector
The CSS Grouping Selector
The CSS Universal Selector
I’m going to explain each of them briefly
1.The CSS Element Selector:The element selector selects HTML elements based on the element name.
2.The CSS Id Selector:The Id Selector uses the Id attribute of an HTML element to select a specific element. The Id of an element is unique within a page, so the Id selector is used to select one unique element. To select an element with a specific id, write a hash(#) character, followed by the Id of the element.
3.The CSS Class Selector:The CSS Selector selects HTML documents with a specific class attribute. To select elements with a specific class, write a period(.) character, followed by the class name.
4.The CSS Grouping Selector:The Group Selector selects all the HTML elements with the same style definitions. It will be better to group selectors to minimize code. To group selectors, separate each selector with a comma.
5.The CSS Universal Selector: The Universal Selector(*) select all HTML elements on the page.
CSS SPECIFICITY
If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.
Specificity can be therefore be thought of in a lay man language as a rank that determines which style declaration is applied to an element. We have four categories of specificity, which are:
Inline Styles
IDs
Classes, pseudo-classes, attribute selectors
Elements and pseudo-elements.
Conclusion
To learn more about CSS Cascading, CSS Selectors and CSS Specificity you can check out FREECODECAMP website and Youtube videos. You can as well check out W3SCHOOL website.
Top comments (0)