Daily Knowledge Drop
The CSS all property can be used to reset all properties on an element to their initial values.
Not directly related to .NET/C#, but still relevent to any .NET developer doing any kind of web development.
Valid values
Before we see the all property in action, le't have a look at all its possible values:
- initial: Specifies that all the element's properties should be changed to their initial values.
- inherit: Specifies that all the element's properties should be changed to their inherited values.
- unset: Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not.
- revert: Resulting values depend on the stylesheet origin where this property is located.
- revert-layer: Specifies that all the element's properties should roll back the cascade to a previous cascade layer, if one exists.
Example
Base
The below examples will use this HTML and CSS snippet:
<!DOCTYPE html>
<html>
<head>
<style>
article {
color: red;
text-decoration: underline;
font-size: 24pt;
}
h1 {
color: green;
font-size: 14pt;
line-height: 2em;
background-color: aqua;
}
.title {}
</style>
</head>
<article>
<h1 class="title">AlwaysDeveloping.net</p>
<h1>always learning | always growing</p>
</article>
</html>
The above results in this well designed, elegant HTML page:
The issue
The "issue" with this setup that, as h1 element with the title class automatically inherits all the properties from h1, so to generally stop this inheritence, I've been manually overwriting each inherited property.
For example, if we just want the title class element to have a yellow background, but none of the other properties inherited from h1, then the following is required:
<style>
article {
color: red;
text-decoration: underline;
font-size: 24pt;
}
h1 {
color: green;
font-size: 14pt;
line-height: 2em;
background-color: aqua;
}
.title {
color: red;
font-size: 24pt;
background-color: yellow;
}
</style>
Each property that is inherited from h1 needs to be set back to the article value.
This results in the HTML looking as we want it, as follows:
However, the all property can simplify this for us! Next we'll have a look at how this property effects the HTML output.
initial
First up, the all property with a value of initial - this sets the properties back to their initial values.
<style>
article {
color: red;
text-decoration: underline;
font-size: 24pt;
}
h1 {
color: green;
font-size: 14pt;
line-height: 2em;
background-color: aqua;
}
.title {
all: initial;
background-color: yellow;
}
</style>
Here, we set all: initial and then set the background color to yellow. The result is as follows:
The properties of article are not (all) respected - the element reverts back to its initial values and then subsequent defined properties (background of yellow) are applied.
inherit
Next up, the all property with a value of inherit - this sets the properties back to their inherited values.
<style>
article {
color: red;
text-decoration: underline;
font-size: 24pt;
}
h1 {
color: green;
font-size: 14pt;
line-height: 2em;
background-color: aqua;
}
.title {
all: inherit;
background-color: yellow;
}
</style>
As with the previous example, here we set all: inherit and then set the background color to yellow. The result is as follows:
The properties of title revert back to the inherited values from article - this is the same outcome as when each property was manually overwritten, just with less manual work!
For completeness we'll have a quick look at the other all property values as well.
unset
Next up, the all property with a value of unset - this sets the properties back to either their respective value, either initial or inherited.
<style>
article {
color: red;
text-decoration: underline;
font-size: 24pt;
}
h1 {
color: green;
font-size: 14pt;
line-height: 2em;
background-color: aqua;
}
.title {
all: unset;
background-color: yellow;
}
</style>
At first glance it might seem like the output is the same as all: inherit, but the padding and width of the elements have been reset (or unset) in this instance.
revert and revert-layer
Lastly is the all property with a value of revert or revert-layer. These have been grouped together for this example as they produce the exact same result.
<style>
article {
color: red;
text-decoration: underline;
font-size: 24pt;
}
h1 {
color: green;
font-size: 14pt;
line-height: 2em;
background-color: aqua;
}
.title {
all: revert;
background-color: yellow;
}
</style>
Notes
Having recently moved this blog to Statiq, which included customizing the theme - I wish I had learnt about this property sooner.
I don't often do website styling, but if (when) I do in future, I'll be sure to keep this property in mind.
References
Daily Drop 106: 29-06-2022
At the start of 2022 I set myself the goal of learning one new coding related piece of knowledge a day.
It could be anything - some.NET / C# functionality I wasn't aware of, a design practice, a cool new coding technique, or just something I find interesting. It could be something I knew at one point but had forgotten, or something completely new, which I may or may never actually use.
The Daily Drop is a record of these pieces of knowledge - writing about and summarizing them helps re-enforce the information for myself, as well as potentially helps others learn something new as well.