8 Less Common CSS Properties You May Find Interesting

pencil

We're all familiar with the most common CSS properties that we use daily, such as width, height, margin and border. And for most projects, the ones we use all the time are just fine. Of course, there are also those ones that you discover through your IDE's autocomplete feature, which can have some pretty interesting results. Some are immediately obvious to what they do, and some are not.

  • word-spacing

    This property is for those times when your font's default word spacing just isn't what you want it to be. Use this to add more space between words, or to move them closer together, or even have them overlapping each other! A similar property, letter-spacing is generally seen more often.

  • azimuth

    I'm sure you've heard of this property before, though most people seem to have no idea what it is for. Probably because the name starts with "a", so it always shows up at the top of every IDE's autocomplete list.

    Basically the azimuth property specifies the location of the sound when the content is being read aloud. For example, you can specify an angle in degrees (deg), or you can use predefined values such as "center" or "left-side". This property is meant to be used with aural stylesheets.

  • clip

    This CSS property specifies which portion of an absolutely positioned box should be visible. You can specify the value using rect, which will "clip" the box to the shape of the rectangle using the specified coordinates.

  • cursor

    This one has a lot of potential for abuse. However, when used wisely, this CSS property can greatly improve various types of user interfaces. For example, if a certain box is meant to be dragged by the user, you could add this style to the handle: cursor: move

  • empty-cells

    Of course, empty cells are a common occurrence when using tables. With this CSS property you can set the value to either show or hide, to specify whether you want empty table cells to be visible or not.

  • direction

    This CSS property specifies the direction of the text in the content. It can be set to either ltr for the default direction for English, or to rtl to have text going from right to left.

  • outline

    This one is kind of similar to border. However the difference between the two is that with outline, the outline is drawn outside of the border, and does not have any effect on the box's size or position.

  • orphans

    The orphans CSS property only applies to paged media. What it does is specify the minimum number of lines inside the element that must be left at the bottom of a page. This This can be helpful to prevent extra lines from screwing up an entire layout.

What other less common CSS properties do you know of? And do you actually use any of them?

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

2 Comments

  1. nice and impressive posting .
    thanks

  2. May 18, 2011

    I didn't know about the azimuth property. Is that something that can be used for panning?