Inheritance 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:

color
font-family
font-size
line-height
text-align
visibility

<body>
  <div>
    <p>This is some text inside a paragraph.</p>
  </div>
</body>

body {
  font-family: Arial, sans-serif;
  color: blue;
}

Since font-family and color are inherited properties, the text inside the <p> element will inherit the font family and color from the body element (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:

margin
padding
border
width
height
display

<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 color property 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 color to 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 the color from its parent (div) but uses its own background color and does not inherit the margin or padding.

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).

Inheritance in CSS