DEV Community

Adebiyi Itunuayo
Adebiyi Itunuayo

Posted on

Day 007 on My journey to becoming a CSS Pro with Keith Grant

#webdev #css #tutorial #frontend

Continuing from Day 006.
Alright, so Keith says he's going to touch on Layer, Scope proximity later in the book.
Let's talk about Inheritance and Special values.

Inheritance is simply the default "cascaded value" that descendant elements take from their parent element.
Cascaded value means a declaration that “wins” the cascade, or is more specific after the conflict is resolved.

Inheritance Tree

Inheritance is done in a top-down manner.
Certain properties of the <html> element are inherited by the <body> and its subsequent descendants. Knowing which properties are inherited is important to understanding why certain things happen when resolving issues in the cascade. Check this out to see a comprehensive list of the properties that are inherited by elements from their parents and by their descendants, keep it bookmarked!

Special values:
Keith talks about four special values namely; inherit, initial, unset, revert. These values can be applied to any property.

  • inherit: As the word suggests, when applied to a property enables inheritance of that property from the parent element even if it is not inherited by default, it forces it to be inherited.

For example: The following with no style

<!doctype html>
<html lang=”en-US”>

<head>
    <meta charset="utf-8" />
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <header class="page-header">
        <h1 id="page-title" class="title">Journey to becoming a CSS Pro</h1>
        <nav>
            <ul id="main-nav" class="nav">
                <li><a href="/">Home</a></li>
                <li><a href="/easy">Easy</a></li>
                <li><a href="/intermediate">Intermediate</a></li>
                <li><a href="/pro" class="featured">Pro</a></li>
            </ul>
        </nav>
    </header>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

results in:

Example of the inherit special value

with style:

.page-header {
    color:green;
}
Enter fullscreen mode Exit fullscreen mode

results in:

Example of the inherit special value
Notice:
The <h1>, <ul>, and <li> elements inherit the color property from their parent. However the <a> element doesn't automatically inherit its parent's color. If we want it to take on the parent's color, we use the keyword inherit.

with the keyword:

.page-header {
    color:green;
}

a {
    color: inherit;
}
Enter fullscreen mode Exit fullscreen mode

results in:

Example of the inherit special value

  • initial: This resets the value of a property to its default value (according to spec), not necessarily the browser's default rendering as the user-agent maker can assign different values for usability reasons. Example: For the <a> element; Spec says: color initial value is CanvasText (usually black or a similarly dark color)

User-agents usually style <a> with blue for unvisited and purple for visited in their default stylesheet.

with the initial keyword:

.page-header {
    color:green;
}

a {
    color: initial;
}
Enter fullscreen mode Exit fullscreen mode

it results in:

Example of the initial special value
initial ignores the user-agent style and goes straight back to the specification's style.

  • unset: This is a combination of both inital and inherit, in that when applied:
    • to an inherited property, it sets the value to inherit
    • to a non-inherited property, it sets the value to initial For example: 
.page-header {
    color:green;
}

a {
    color: unset;
}
Enter fullscreen mode Exit fullscreen mode

The color property is a property that can be inherited, hence, setting the value to unset applies the inherit function to it and the element it is applied to takes on the color value of its parent element.
which results in:

Example of the inherit special value
If color were not an inherited property, it would be set to the initial value; the spec style value, whatever value it is.

  • revert: This keyword basically resets a property's cascaded value to what it would have been if no declarations from the current cascade origin were present. If the declaration using revert comes from the author, it drops author-level declaration for that property and falls back to the user-level declaration (if one exists), otherwise the user-agent declaration for that property is used. Example: The following resets the <a> element's color to the user-agent default style of the blue/purple color, depending on whether they've been visited or not. 
.page-header {
    color:green;
}

a {
    color: revert;
}
Enter fullscreen mode Exit fullscreen mode

which results in:

Example of the revert special value

N.B:
Some links appearing the images have been visited, hence the uneven colors.

I believe anyone can become a CSS Pro, and therefore I am.

Top comments (0)