When designing an ad unit that Carbon publishers need to install on their website, I need to make sure the website stylesheet is not overriding the CSS of the ad unit. This is where the cascading nature of CSS shines.
Cascading is an inherent feature that enhances the flexibility of CSS, allowing for orderly and efficient styling. One of the common techniques is to reset all the properties to the initial value before working on the ad unit design.
Let’s say that I’m going to wrap the ad unit in a div element with carbonads as the ID. I will write something like this to reset the CSS of the parent container, which will be inherited by all the children.
#carbonads {
all: revert; // revert all the properties to the initial value set by browsers
}
#carbonads .carbon-wrapper {
// Write the CSS value to style the ad format
}
However, you must not write something like the following because it will also make <style> element visible. It’s better to limit the all shorthand to the parent container where no other properties will be used.
#carbonads * {
all: revert
}
If you wish to to learn more about inheritance in CSS, I recommend checking out this post by Andy Bell that shares more examples.