CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never knew about.
In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file some of these away for later use.
color Property Isn’t Just for Text
Let’s start with the easier stuff. The color property is used extensively by every CSS developer. Some of you not as experienced with CSS may not realize, however, that it doesn’t define only the color of the text.
Take a look at the demo below:
Notice in the CSS, only one color property is used, on the
body element, setting it to
yellow. As you can see, everything on the page is yellow, including:
- The alt text displayed on a missing image
- The border on the list element
- The bullet (or marker) on the unordered list
- The number marker on the ordered list
hr element, by default does not inherit the value of the color property, but I had to force it to do so by using
border-color: inherit. This is kind of odd behaviour to me.
All of this is verified by the spec:
This property describes the foreground color of an element’s text
content. In addition it is used to provide a potential indirect value
… for any other properties that accept color values.
I can’t think of anything else that would qualify as ‘foreground’, but if you do, let us know in the comments.
Continue reading %12 Little-Known CSS Facts%