12 Little-Known CSS Facts

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.

The 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:

See the Pen CtwFG by SitePoint (@SitePoint) on CodePen.

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
  • The hr element

Interestingly, the 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%

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s