If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.
How does specificity play a role in CSS?
Every selector has its place in the specificity hierarchy. There are four categories which define the specificity level of a selector.
IDs - an ID is a unique identifier for the page elements, such as #navbar.
Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hove, :focus etc.
Elements and pseudo-elements - this category includes elements names and pseudo-elements, such as h1, div, :before and :after.
When multiple CSS rules target the same HTML elements, and those CSS rules set some of the same CSS properties, what styles end up being applied to the HTML element? In Other words, which CSS rules take precedence?
CSS precedence is an issue that web designers and developers can spend a long time fighting with. Understanding CSS precedence definitely makes the fight easier.
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:
If you need a certain CSS property to take precedence over all other CSS rules setting the same CSS property for the same HTML elements, you can add the instruction !important after the CSS property when you declare it. The !important instruction has the highest precedence of all precedence factors.
Sometimes the browser cannot determine the CSS rule or property precedence based on the !important instruction. Either because no CSS property declarations contain the !important instruction, or because multiple CSS property declaration contain the !important instruction for the same CSS property. In these cases the browser resorts to using the specificity of the CSS rule selectors to determine what CSS properties take precedence.
In CSS, inheritance controls what happens when no value is specified for a property on an element.
CSS properties can be categorized in two types:
Inherited properties, which by default are set to the computed value of the parent element.
Non-inherited properties, which by default are set to initial value of the property.
A CSS property styles an aspect of an HTML element.
A CSS rule is a grouping of one or more CSS properties which are to be applied to one or more target HTML elements.
A CSS rule consists of a CSS selector and a set of CSS properties. The CSS selector determines what HTML elements to target with the CSS rule. The CSS properties specify what to style of the targeted HTML elements.
More examples include:
Background: #333;
Color: #green;
Margin: 18px;
Padding: 18px;
Every CSS declaration includes a property / value pair. Depending on the property, the value can include a single integer or keyword, to a series of keywords and values with or without units. There are a common set of data types -- values and units -- that CSS properties accept.
Example below: property: value;
div {
color: green;
}
In CSS, selectors are patterns used to select the element(s) you want to style.
Example: P would be selecting from HTML to color the text green.
p {
color: green;
}