This is correct!
For background-color: initial; you could even use just a {} as the selector because every rule outside of layers are more important than rules inside layers.
Hi @mikoMK,
In the task description the following instructions are given: āā¦write a declaration in a new rule that will reset the background color to white, without using an actual color value and without touching the lightgreen declarationā¦ā, and, as far as I understand, by applying the rule ābackground-color: initial;ā we set the background color to transparent instead of white as the initial value of the property ābackground-colorā is ātransparentā. Hence, the task isnāt completed, is it?
Best,
SweetBoySavage
Hi @SweetBoySavage,
Well, thanks for your note. I could rather use
a {background-color: inherit} or a {background-color: revert}
Both are OK and give the same result. But I was wondering if I use a {background-color: initial} what would be the pitfall then. So, I was missing your point. Thanks for that.
if we write a {background-color: initial}, then it is the same as writing a {background-color: transparent} because ātransparentā is the initial value of the property ābackground-colorā according to the spec.
If no value is applied to a property in the author stylesheet (the styles we as the webpage authors write), the following steps are taken to find a value -
The user defined stylesheet is checked for styles applied to that element.
If nothing is found, the user agent stylesheet is checked.
If nothing is found, the equivalent of unset is applied.
so in our example the ābackground-colorā is set to āunsetā, which again acts like āinitialā since the property isnāt inherited.
However, the task description explicitly states: " ā¦reset the background color to whiteā¦", which, in my perception, should look something like this: a {background-color: white}, and, perhaps, canāt be achieved using only these special values.
Hi @SweetBoySavage,
I get it. But hereās is this case, if we use a {background-color: white} doesnāt this violate the rule given in the task page as follows:
To write a declaration in a new rule that will reset the background color to white, without using an actual color value and without touching the lightgreen declaration
which basically says I canāt use an actual color value (in our example, white is the actual color value). This is what I understood and assessed regarding the task.
Your point about a {background-color: revert} is right also. I finally got it after doing some research and thanks for the link.
So, it seems there is no safer option than a {background-color: inherit} unless we count giving the element a white background without using the actual color value meant to be no color at all (which is transparent at the end).
But the real deal is whether we use inherit, initial or revert the result is pretty same. I checked the devtools for the computed value of the element and the result isrgba (0,0,0,0)for all of them.
In contrast, a {background-color: white} results rgba (255,255,255,0), but its use isnāt allowed as the task page guides.
So, what to do now? Leave your thoughts and sorry for my English. m trying to making it better. Eager to hear you.
Hi @umarFaruq,
I guess there is something messed up as there are inconsistencies among the code provided in the interactive editor, the HTML template and the solution. It seems that the task has been updated recently, but the HTML template and the solution havenāt. Perhaps, this is what the taskās old version looked like.
Hi @SweetBoySavage,
Thanks for your reply and some valuable links. But it seems both the solutions (the older and newer one) made the possible solution as: a {background-color:initial} while they quotes:
In this case I am using inherit to set the background back to be the same as its parent element.
made me more confused.
I didnāt get what it tried to say at the end. Help me with this.
div, div ul, div ul li, #outer#inner ul li a
{
background-color: inherit;
}
, which sets the propertyās ābackground-colorā value for every element inside to āinheritā (it is necessary because "only direct child elements can inherit a CSS property from its parent elementā¦"), then the <body> elementās ābackground-colorā propertyās value ā#fffā, which stands for white color, is inherited by the descendant elements of <body>, including the links. As a result, we have written a declaration in a new rule that resets the background color to white, without using an actual color value.
P.S. In this case the computed value of the targeted elements is rgb(255, 255, 255).
This is how the code looks: Edit fiddle - JSFiddle - Code Playground
From a strictly technical view point @SweetBoySavage is right about the background-color not being white but transparent. I think what the exercise is trying to ask for is that the background should appear white again (no matter if the element, one of the parents or the default browser background are responsible for it).
Maybe the text of the question could be improved.
Thatās indeed true and should be updated. I also think that the question text is confusing in the new because there are really two instructions woven into each other.
āInstruction 1ā (To write a declaration in a new rule that will reset the background color to white, without using an actual color value) and āInstruction 2ā (without touching the lightgreen declaration, use the cascade layer order to make the links rebeccapurple).