Mining the SitePoint CSS Reference

Most of us who know CSS are self taught. The problem with teaching yourself is that you spend most of your time learning only the stuff you’ll need every day, leaving little holes in your knowledge — dim and dusty corners inhabited by obscure facts you rarely use, but may be useful to know.

While editing the SitePoint CSS Reference I came across many valuable nuggets of CSS knowledge; things I only partially understood or was completely unaware of. Here are a few examples.

Terminology: Rule V Declaration

In CSS, the term rule is often misused. Sometimes you’ll see the following referred to as a rule:

padding: 1em;

It is, however, a declaration. Here is a CSS rule:

body {
  padding: 1em;
  background-color: #fff;
}

A declaration specifies a value for a single property. A rule can contain one or more declarations in a block that is preceded by a selector.

Percentage Values for Top or Bottom padding or margin

If you specify a percentage value for top or bottom padding or margin, the percentage value represents a percentage of the width of the containing block and not its height, as you might expect.

Multiple Values for text-decoration

Did you know that the text-decoration property can take multiple space-separated values? For example you can do this:

a:hover, a:focus {
  text-decoration: underline overline;
}

A Length or Percentage Value for vertical-align

When used on inline boxes (not table cells), the vertical-align property can take a length or percentage value. The effect is to raise or lower the position of the inline element in relation to its line box. A percentage value represents a percentage of the element’s line-height.

Percentage Values for background-position

If you have ever wondered why your background image started acting crazy when using percentage values for background-position then you may not have been aware of how percentage values actually work with the property. A percentage value refers to both a position inside the element as well as a position within the image. A background-position set to 50% from the top of an element will place the point in the background image that is 50% of the height of the image at a position that is 50% of the height of the element.

That’s seems normal because it effectively centers the image within the element. But, when you use unusual percentage values like 66%, the position of the image seems to veer, unexpectedly, all over the place. Alex has written an excellent blog post about the background-position property that explains the behavior.

table-layout and Performance

The table-layout property allows you to specify that the fixed layout algorithm should be used by the browser to calculate column and table widths. In the default table layout algorithm column widths are influenced by the contents of the cells, even if you specify a width. You might say that specifying a width in this situation is more like a guideline than an actual rule.

You are able to specify that the fixed layout algorithm should be used by setting table-layout to the value: fixed. Using this algorithm, the browser will ignore the contents of the cells and use the available width specifications to calculate the widths of the table columns, even if the content doesn’t fit. You can read more about it in the Table Formatting topic in the reference.

The benefit of the fixed table layout is better performance, especially for large tables with many columns. If you have a large table, and can safely specify the column widths, using table-layout: fixed; will enable the browser to display the table faster.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • tinyk

    Great post!

  • Sojan80

    Nice one Andrew! I learned a few things I didn’t know….

  • Dorsey

    Thanks for adding these explanations. At the bottom of the Tech Times page is: “If you have uncovered a nugget of obscure CSS knowledge in the SitePoint CSS Reference …” What I don’t get is why there should be any such “nuggets” out there. If CSS is truly a standard, then it should a) be obvious to anyone reading it, b) create the desired results with no side-effects, and c) shouldn’t require a PhD in CSS to successfully apply.

    This is not to bash this article or the other 2 million such articles available online, but the idea that CSS1/2/3 might contain mysteries that are uncovered only after careful experimentation is a testimony to the poorly conceived and written “standard” itself. I’m a big fan of CSS, but continually run into trouble doing things like vertically centering text before or after an icon (the mystery solution is to specify the image size) so that vertical-align declaration will actually work as one might expect. And on and on…

    Who’s with me on this?

  • Anonymous

    The vertical-align trick would be really helpful, except it doesn’t work in IE. You got me all excited thinking this knowledge was valuable, but when I try it in both IE 6 & 7 and nothing happens, it’s practically worthless. Next time browser test and if it doesn’t work in IE, say so.

  • SkippyFiRe

    Not I. The article is just pointing out things you might not use often, or have not used before, or forgot about. I’m sure that every programming language has these little nuggets that people often miss.

    The fact that CSS is quirky, and that you have to test how each browser implements its features is really the fault of the browsers, and not the standard.

  • linux-mike

    Speaking of the Sitepoint CSS Reference, there are comments and errata to it that have not been addressed since January! they still have a yellow note saying “This note has not yet been confirmed for accuracy and relevance.”.

    Isn’t it time somebody revisited the reference, or is it just to go stale like a tree version?

  • http://www.afterlight.net.au AussieJohn

    @Dorsey: I kind of agree with you there, but keep in mind that the problem here isn’t whether CSS is a standard and well defined. The problem is that most people are self taught and as Andrew said:

    The problem with teaching yourself is that you spend most of your time learning only the stuff you’ll need every day, leaving little holes in your knowledge

    This is why there are so many guides out there for these little facts about CSS and probably a few other languages.

    And don’t forget that even though one might know the language itself, we’re working in a market with multiple browsers, that all have their own little quirks – I hate to bring up Internet Explorer 6, but it has to be the perfect example of how standard CSS isn’t implemented in a standard way.

  • Larry

    Hi All,

    Please a little help. This must be a clear float issue but I can not figure it out. Please look at the following webpage. the bottom graphic keeps pushing its way down instead of staying put. Any help would be appreciated.

    http://www.intrepidhouse.com/intrepidtest.htm