what is CSS specificity and the specificity for inline internal and external CSS CSS specificity is a fundamental concept that determines which styles are applied to an element when multiple rules could apply understanding specificity helps developers resolve conflicts between different CSS rules and ensures that the desired styles are consistently applied CSS specific is calculated based on the type of selectors used the highest specificity is attributed to inline Styles which are applied directly to an element through the style attribute following this IID selectors like Main and header have a higher level of specificity next class selectors attribute
selectors and pseudo classes come into play examples include class selectors such as container and button attribute selectors like typee text and pseudo classes such as hover these have a moderate level of specificity type selectors such as div and H1 and pseudo elements like before and after have a lower specificity compared to the previous groups finally the universal selector represented by an asterisk has the lowest specificity of all specificity values are calculated as a four-part value a b c d a inline Styles one or zero B number of ID selectors c number of class selectors attribute
selectors and pseudo classes D number of type selectors pseudo elements and Universal selectors each part of the specificity value carries different weight inline Styles a have the highest weight contributing a value of one to the first part of the specificity value ID selectors B carry the next highest weight with each ID contributing one to the second part of the specificity value class selectors attribute selectors and pseudo classes C carry moderate weight with each contributing one to the third part of the specificity value type selectors and pseudo elements D have the lowest weight with each contributing
one to the fourth part of the specific spe it value the universal selector contributes zero to the specificity calculation and does not affect specificity its inclusion in a selector does not change the specificity value inline CSS has the highest specificity because it is applied directly to the element it overrides any internal or external CSS the specificity value for inline Styles is 1 0 0 0 here is an example using inline styles for a development in this example the text will always be read regardless of any other styles applied via internal or external CSS internal CSS
is defined within a style element in the head section of the HTML document it has lower specificity than inline Styles but can override external Styles the specificity value for internal Styles is determined by the selectors used for example an ID selector within internal CSS has a specificity value of 0 1 0 0 in this example the text will be blue unless an inline style or a more specific external style is applied external CSS is linked via a link element in the head section and is written in separate CSS files it has the lowest specificity but
provides the best maintainability for larger prodct projects the specificity value for external Styles is also determined by the selectors used for example a class selector within external CSS has a specificity value of 00 01 0 in this example the text color is defined in the styles.css file and will be applied unless overridden by internal or inline styles
