Definition: Specificity is what browsers use to determine which CSS rule applies when multiple rules affect the same element.
Role in CSS: It establishes a hierarchy for CSS selectors resolving conflicts when multiple styles compete.
How it works: When conflicting styles apply to the same element, the rule with the highest specificity "wins." It's calculated on the components of a selector (IDs, classes, element types).
A selector with an ID (#header) has higher specificity than one with just a class (.menu).
#header color: blue; - Higher specificity
.menu color: red; - Lower specificity
Definition: Precedence refers to the order in which CSS rules are applied when they have the same specificity.
Role in CSS: It determines which styles take effect when multiple rules have equal weight.
How it works: When two rules have the same specificity, the rule that appears later in the CSS (closer to the code) takes precedence.
The latter overrides the former when specificity is equal.
color: blue;
color: red; - This rule wins due to precedence
Definition: Inheritance is where a CSS property is passed from parent elements to their children.
Role in CSS: It allows for reducing the need to explicitly set properties on every element.
How it works: Some properties (like font-family, color) inherit their values from parent elements, while others (like margin, padding) do not.
Text properties typically inherit from parent elements.
body {
font-family: sans-serif;
}
All text inside the body will inherit the Arial font
Definition: A CSS property is an attribute that defines a specific aspect of an element's style.
Role in CSS: Properties allow control over visual aspects like color, size, and position.
How it works: Each property has a name (like "color" or "font-size") and accepts specific values to determine how elements should appear.
Common CSS properties include color, margin, padding, and font-size.
h1 {
color: darkblue;
font-size: 24px;
margin: 10px;
}
Definition: A CSS value is the setting assigned to a property that defines how that property should be rendered.
Role in CSS: Values determine the specific appearance or behavior specified by a property.
How it works: Each property accepts specific types of values that control how the element is styled - these can be colors, lengths, percentages, or keywords.
Different types of values used in CSS.
color: red; - Keyword value
font-size: 16px; - Length value
width: 50%; - Percentage value
margin: 10px 20px; - Multiple values
Definition: A CSS selector is a pattern that identifies which HTML elements should be styled by a CSS rule.
Role in CSS: Selectors target specific elements on a webpage so styles can be applied to them.
How it works: Selectors can target elements by type (element name), class, ID, attributes, or their relationship to other elements.
Different types of selectors.
p { } - Type selector
.highlight { } - Class selector
#main-header { } - ID selector
p.highlight { } - Combined selector