CSS specificity hierarchy
CSS specificity hierarchy listed from highest to lowest priority: Inline Styles : These are styles applied directly to an element using the style attribute. Example: <div style="color: red;"> ID Selectors : These are styles applied using the ID of an element, which is unique within a page. Example: #header { color: blue; } Class Selectors, Attribute Selectors, and Pseudo-classes : These include styles applied using class names, attributes, and pseudo-classes. Examples: Class: .main { color: green; } Attribute: [type="text"] { color: yellow; } Pseudo-class: :hover { color: purple; } Element Selectors and Pseudo-elements : These are styles applied directly to HTML elements and pseudo-elements. Examples: Element: p { color: black; } Pseudo-element: ::after { content: ""; } Universal Selector and Inherited Styles : These styles have the lowest specificity and include the universal selector * and inherited styles from parent elements. Examples: Univer