Inheritance in CSS
dheeraj korangaInheritance is a fundamental concept in CSS where certain properties of a parent element are automatically passed down(or "inherited") to its child elements. However, not all CSS properties are inherited by default. Inheritance is mostly applied to text-related properties (like font styles) but not to properties like layout, dimensions, or positioning.
1. Inherited Properties
Some CSS properties are inherited by default. These are typically properties related to text and appearance.
Examples of Inherited Properties:
colorfont-familyfont-sizeline-heighttext-alignvisibility
<body>
<div>
<p>This is some text inside a paragraph.</p>
</div>
</body>
body {
font-family: Arial, sans-serif;
color: blue;
}
- Since
font-familyandcolorare inherited properties, the text inside the<p>element will inherit the font family and color from thebodyelement (Arial and blue).
2. Non-Inherited Properties
Some CSS properties do not inherit by default. These are typically related to box model, layout, positioning, and visual formatting.
Examples of Non-Inherited Properties:
marginpaddingborderwidthheightdisplay
<body>
<div>
<p>This is a paragraph inside a div.</p>
</div>
</body>
body {
margin: 20px;
background: black;
}
div {
width: 200px;
height: 100px;
background-color: yellow;
}
3. The inherit Keyword
You can explicitly make a property inherit its value from its parent using the inherit keyword. This is useful when a property is non-inherited by default, but you want to force inheritance.
body {
color: blue;
}
p {
color: inherit; /* Forces the paragraph to inherit the color from its parent */
}
- The paragraph’s
colorproperty is forced to inherit the blue color from its parent, even if the browser default would otherwise be used.
4. The initial Keyword
The initial keyword can be used to reset a property to its default value as defined by the CSS specification. This is not the same as inheritance — it resets the property to what it would be without any specific styling.
body {
color: blue;
}
p {
color: initial; /* Forces the paragraph to inherit the color from its parent */
}
- This will reset the paragraph’s
colorto the default value, typically black in most browsers.
5. The unset Keyword
The unset keyword is a combination of inherit and initial. It behaves like inherit for inherited properties and like initial for non-inherited properties. It’s a more general way to reset styles.
p {
color: unset;
/* Inherited if applicable, otherwise set to the initial value */
}
Practical Example: Inherited vs Non-Inherited Properties
<div>
<p>This paragraph inherits the color from its parent but has its own background.</p>
</div>
/* Parent element styles */
div {
font-size: 18px; /* Inherited by children */
color: green; /* Inherited by children */
margin: 10px; /* Not inherited */
padding: 10px; /* Not inherited */
}
/* Child element */
p {
background-color: yellow; /* inherited */
color: inherit; /* Force color inheritance */
}
- The
<p>element inherits thecolorfrom its parent (div) but uses its own background color and does not inherit themarginorpadding.
ASSESSMENT C.2
Apply the following rule on the below HTML
<!DOCTYPEhtml>
<html lang="en">
<head>
<metacharset="UTF-8"/>
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
<metaname="viewport"content="width=device-width,initial-scale=1.0"/>
<title>CSSAssignment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="mainTopic">CSSPractice</h1>
<h3>Let's learn about selector.</h3>
<!--Paragraph1-->
<p class="para">There are multiple selectors in css.</p>
<!--Paragraph2-->
<p class="para">Some of them include class selector, id selecto retc.</p>
<!--Paragraph3-->
<p class="para">And we can also combine these too.</p>
<div>
<h5>Did you like the practice set?</h5>
<input type="checkbox"id="yes"/>
<label for="yes">Yes</label>
<br>
<button>Learn next!</button>
</div>
</body>
</html>
PART A (Selectors)
Qs1. Give the h1 header a unique id - "main Topic" & set its color to blue using the id selector.
Qs2. Align all the text on the page to the center using a universal selector.
Qs3. Change the font style of all heading tags on the page to 'Georgia'.
Qs4. Set the color of all the paragraphs to white & background color to cornflower blue (Without using the element selector - 'p')
Qs5. Select all buttons inside the div and change their background color to purple & text color to azure.
Qs6. Change the button background color to yellow & text color to blue when we hov over it.
Qs7. Change the color of every odd-numbered paragraph to yell(Paragraphs 1 & 3)
Qs8. Change the color of the first letter of the h1 heading to red.
Qs9. Set the text color of the checkbox label to dark green when the checkbox is ticked.
#mainTopic{
color: blue;
}
*{
text-align: center;
}
h1, h3{
font-family: Georgia, 'Times New Roman', Times, serif;
}
.para{
color: white;
background: cornflowerblue;
}
div button{
background-color: purple;
color: azure;
}
button:hover{
background-color: yellow;
color: blue;
}
p:nth-of-type(2n-1){
background-color: yellow;
color: black;
}
h1::first-letter{
color: red;
}
input[type="checkbox"]:checked + label{
color: darkgreen;
font-weight: bolder;
}
Qs10. Order these rules according to their specificity, from least specific to most specific. :
- h1
- #mainContent
- main
- div .main
id class element
h1 0 0 1 = 1
#mainContent 1 0 0 = 100
.main 0 1 0 = 10
div .main 0 1 1 = 11
Order of Specificity (from least to most specific):
h1(Specificity: 0,0,0,1).main(Specificity: 0,0,1,0)div.main(Specificity: 0,0,1,1)#mainContent(Specificity: 0,1,0,0)
So, the most specific rule is #mainContent (ID selector), and the least specific is h1 (element selector).
Subscribe to my newsletter
Read articles from dheeraj koranga directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by