Determines which identical selectors will have priority or precedence.
Conflicts quite legitimately come up, though,when you have nested selectors. The actual specificity of a group of nested selectors
takes some calculating. the more specific a selector, the more preference it will be given when it comes to conflicting styles.
You can give every ID selector ("#whatever") a value of 100, every class selector (".whatever") a value of 10
and every HTML selector ("whatever") a value of 1. When you add them all up you have a specificity value.
Precedence
Selector that is more important based on it's specificity.
When the browser needs to resolve what styles to apply to a given HTML element, it uses a set of CSS precedence rules.
Given these rules, the browser can determine what styles to apply. The rules are: !important after CSS properties; Specificity of CSS
rule selectors; and, Sequence of declaration. CSS precedence happens at CSS property level. Thus, if two CSS rules target the same HTML
element, and the first CSS rule takes precedence over the second, then all CSS properties specified
in the first CSS rule takes precedence over the CSS properties declared in the second rule. However,
if the second CSS rule contains CSS properties that are not specified in the first CSS rule, then
these are still applied. The CSS rules are combined - not overriding each other.
Inheritance
Elements inherit styles from their parent container. If you set the body tag to use color:
red then the text for all elements inside the body will also be red unless otherwise specified.CSS provides three special values to handle inheritance:
inherit : This value sets the property value applied to a selected element to be the same as that of its parent element.
initial : This value sets the property value applied to a selected element to be the same as the value set for that element in the
browser's default style sheet. If no value is set by the browser's default style sheet and the property is naturally inherited, then the
property value is set to inherit instead.unset : This value resets the property to its natural value, which means that if the property
is naturally inherited it acts like inherit, otherwise it acts like initial.
Property
A CSS property styles an aspect of an HTML element. A CSS property declaration consists of a property name and a property value.
The property name comes first, then a colon, and then the value.(property-name : property-value) descriptors within the brackets before the value such as
"background-color", "color", "font-size", etc. When there are multiple selectors it is written as follows:
selector1, selector2, selector3 {
property1: value1;
property2: value2;
property3: value3;}
Value
given to property following the colon such as "blue", "12pt", "1.5em", etc. Distance---Length: absolute (px, in, pc, pt, cm,
mm, q) and relative (em, ex, ch, rem, vw, vh, vmin, vmax); Numeric--Percentage: %, Number, and Integer; Textual; and, others--
Color: #, rgb, rgba, hsl, hsla, transparent, other keywords
Resolution: dpi, dpcm, dppx
Angle: deg, grad, rad, turn
Time: s, ms
Frequency: Hz, kHz
Ratio
Selector
Selectors are the names given to styles in internal and external style sheets. Examples are div, body, header, etc.
The element selector is the most basic CSS selector. It selects all the HTML elements of the same type.
For instance, all div elements or p elements.
With the element CSS selector you simply write the element name of the elements to apply the CSS rule to.
The class selector is another very commonly used CSS selector. The class selector selects all HTML elements which have the given
CSS class set on them. You set a CSS class on an HTML element by giving the HTML element a class attribute.
The CSS group selector is used to group together multiple selectors into one, big CSS selector. That means, that all elements targeted
by any of the selectors will be affected by the CSS rule.