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.

This entry was posted on Tuesday, August 5th, 2008 at 5:52 pm, contains 580 words, and is filed under JavaScript & CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed. The views and opinions in this blog post are those of its author.