CSS inheritance is a fundamental mechanism where certain CSS properties applied to a parent element are automatically passed down to its child elements. This cascade simplifies styling and promotes efficient code, reducing the need to explicitly style every element. Understanding inheritance is key to effective CSS architecture.
Example 1: Inherited Text Properties
/* Body font-family and color will inherit to all text elements within it */
body {
font-family: 'Arial', sans-serif; /* Sets a default font for the whole document */
color: #333; /* Dark gray text color */
}
div {
/* This div's text will inherit Arial and #333 color from body */
background-color: #f0f0f0;
padding: 15px;
}
p {
/* This paragraph will also inherit font-family and color */
font-size: 16px; /* Only font-size is explicitly set here */
}
Explanation In this example, font-family and color applied to the body element are inherited by the div and p elements. This means you don't need to explicitly set these properties on every text element, saving code and ensuring consistency.
Example 2: Non-Inherited Properties (e.g., border)
/* Border property is not inherited */
.parent-box {
width: 200px;
height: 100px;
border: 2px solid blue; /* This border will not pass to children */
background-color: lightblue;
}
.child-box {
width: 50%; /* This is relative to parent's width */
height: 50%;
background-color: lightgreen;
/* No border property explicitly set, so no border will appear from parent */
}
Explanation Properties like border, margin, and padding are generally not inherited. This allows for precise control over an element's individual box model without affecting its descendants, which is crucial for layout.
Example 3: Using the inherit keyword
/* Explicitly inheriting a property that normally doesn't inherit */
.main-container {
border: 3px dashed purple; /* Parent border */
padding: 20px;
}
.inherited-border-child {
/* Normally border wouldn't inherit, but using 'inherit' forces it */
border: inherit; /* This child will get the purple dashed border */
padding: 10px;
background-color: #eee;
}
Explanation The inherit keyword explicitly forces a property to take on the computed value of its parent element, even if that property is not typically inherited. This offers fine-grained control when you need to override default inheritance behavior.
Example 4: Inheriting from initial vs. inherit
/* Demonstrating the difference between 'initial' and 'inherit' */
.parent-text {
font-size: 24px;
color: darkred;
}
.child-reset-initial {
/* 'initial' sets the property to its default browser value (e.g., black) */
color: initial; /* Resets color to browser's default for text */
}
.child-inherit-color {
/* 'inherit' makes it take the parent's value (darkred) */
color: inherit; /* Explicitly inherits darkred from parent */
}
Explanation initial resets a property to its browser default, while inherit specifically copies the computed value from the parent. This distinction is vital for accurately controlling how styles cascade through your document.
Example 5: Global Application with Inheritance
/* Setting a base font-size and line-height on the root HTML element */
html {
font-size: 16px; /* Base font size for 'rem' units */
line-height: 1.5; /* Default line spacing for all text */
box-sizing: border-box; /* Important for global box model consistency */
}
body {
/* Body will automatically inherit font-size and line-height from html */
margin: 0;
padding: 0;
font-family: 'Verdana', sans-serif; /* This overrides font-family if set on html */
}
article p {
/* Paragraphs in articles will inherit line-height and font-size (unless overridden) */
margin-bottom: 1em;
}
Explanation Setting properties like font-size and line-height on the html or body element leverages inheritance to establish global defaults. This ensures consistent typography across your entire website, making maintenance and responsive adjustments simpler.