In this article I’ll go through 10 CSS properties that accomplish very specific, practical tasks, that are often overlooked.
I know what you’re thinking: Nobody’s forgotten about the
overflow property. It’s used all the time on
<div> elements when you want them to scroll. That is certainly the most well-known use of the
overflow property, but I personally find that this property comes in quite handy when you want to give “auto height”, or natural vertical expansion, to a block level element that you don’t want to float.
This problem usually occurs in Firefox; the element is essentially “collapsed” – unless you float it. But floating often brings about other layout issues, and using float in this manner goes against the purpose of the float property.
overflow: hidden to allow a block level element (usually a
<div> that does not have a set height) to expand vertically with the content it contains, even when it contains floated elements.
visibility: hidden is easily confused with
display: none, but the difference between them is very important. 99% of the time, when you want to hide an element on your page, you’ll use
display: none. Using
display: none will ensure that the space occupied by the “invisible” element disappears along with the element itself. But there are some rare instances when you don’t want this to happen. Instead, you want the space that the element occupies to remain exactly the same (possibly because it’s being replaced by another element that was previously invisible). So in this case, the correct CSS would be
display: none affects the flow of the document;
visibility: hidden doesn’t.
Any time you want to keep an inline element from breaking onto a second line, simply apply
While this property comes in handy for short anchor text and span elements, it should be used with caution, since it can potentially cause an element to become larger in width than the element that contains it.
text-transform property is used quite often, and is highly recommended for controlling the case of text. It offers values of capitalize (also called “title case”), uppercase, and lowercase. But only the
font-variant property allows us to set text to “small-caps”.
In almost 10 years of web development, I think I’ve used letter-spacing twice, but it provides a very simple, yet practical, effect, and it does exactly what it says – it adjusts the space between letters. The only thing to keep in mind is that the space set by
letter-spacing is not absolute space, but rather, it is relative to the space that already exists by default. So, the
letter-spacing property legally accepts negative values. Therefore, using
letter-spacing: -1px will decrease the space between elements by 1 pixel. And
letter-spacing: 3px will increase any already existing space.
z-index is one of a few CSS properties that has caused the most head-scratching in the web development world. You would think that, since it sets the stacking order of the element to which it’s applied, then it should be quite simple: If you set the
z-index to a high value, it will stack the element on top of everything; if you set it to a low value, it will stack the element below everything.
But, unfortunately, it’s not that simple. First, the element that has a
z-index value must have its
position property set to either relative, absolute, or fixed. In addition, in order to cause the specified element to actually override the page’s default stacking order (which is the order in which the elements appear in the XHTML), the other elements must also have a specified
z-index and a specified
position of one of the three values mentioned above.
z-index only works on positioned elements, and only restacks in relation to other positioned and z-indexed elements.
z-index is probably not a “forgotten” property – but it’s most certainly a constantly abandoned one.
Tables are not dead. They have their place in standards-compliant, accessible web pages, and they should still be used – just not for layouts. When they are used, they most often have a visible border, so be sure to use
border-collapse: collapse to make sure the borders aren’t doubled.
If you want to see this one in action, visit the css Zen Garden. I haven’t used this property much lately, but it always serves a practical purpose when it is needed.
background-attachment allows you to force a background image to be “fixed” in relation to the viewport, preventing it from scrolling with the rest of the document. With some creativity, you can make some neat effects. Here is one of my favourite examples.
You would think the only reason this property was created was to allow text to be pushed completely off the page when using image replacement techniques on titles or navigation bars. That is definitely the most common reason for using
text-indent. But don’t forget it’s actual purpose: To indent the first line of text in a paragraph, similar to what you see in print media.
Although these are different properties, and could easily be numbers 10 and 11 on this list, I’m putting them together because what is “forgotten” about them is exactly the same: They replace something that you could just as easily accomplish via markup.
font-weight property is set to “bold” and
font-style is set to “italic”. But why not just use
<em>? Well, it depends on what you’re using them for.
Basically, if you want the “bold” or “italic” text to be emphasized for keyword optimization, then you should apply the change via markup, so search engines will see the marked up words and give them more weight. On the other hand, if you want to add visual emphasis to specific words or phrases for the reader’s sake, but don’t want search engines to give more weight to those words, then use
font-weight: bold or
font-style: italic instead.