CSS styles can have heirs
Monday July 30, 2007
One of the trickier aspects of Cascading Style Sheets is inheritance. Inheritance tells the Web browser that the styles of the child element will be the same as the parent element.
Image courtesy J Kyrnin
Inheritance is different from the cascade. Understanding how inheritance works can be critical to understanding a complicated style sheet. Otherwise, you might end up with pages where the styles don't match your expectations. Follow the link below to learn about CSS inheritance and how to use it in your Web designs.
Image courtesy J Kyrnin
Comments
Very cool!
“The word “Big” would still have a yellow background, even though the background-color property is not suppoesd to be inherited. This is because the initial value of a background property is “transparent”. So you’re not seeing the background color on the but rather that color is shining through from the parent.”
Question: If the background-color of the body is black and you wanted “Big” to have a black background instead of yellow, you would…
if the body was black, the h1 was yellow, and you wanted the em to be black, you’d need to set a style on the em to black. You couldn’t inherit the color, because the direct parent of the em is the h1 - yellow.
But if the only style on the body was the black background color, you could add the em to that style:
body, em {background-color: black;}