How to use CSS to display star ratings

[Saman]

Everyone on the ‘net is familiar with rating stars. These are like star like images that indicate the rating of an item. The more stars, the better. Typically we find a scale of 0 to 5 stars, and most often these are in increments of half-stars of even full-stars only.

In this tutorial we’ll discuss how we can use CSS to display the stars in a very elegant manner. It even allows to show any rating very clearly, so you’d be able to distinguish a rating of 3.8 from a rating of 4.2!

Using the 5 star rating system
Look at this example:

star1.PNG (627 Bytes) Viewed 4001 times

How it works
The stars are constructed out of only two images.
bright star:

star_x_orange.gif (206 Bytes) Viewed 4001 times

faint star:

star_x_grey.gif (144 Bytes) Viewed 4001 times

The html for these stars is very simple – one DIV inside another:

Code: Select all

<div class="rating_bar">
  <div style="width:51%"></div>
</div> 

The style attribute for the inner DIV is what determines how many stars are displayed. A rating of 100% corresponds to 5 full stars. A rating of 40% corresponds to 2 stars, a rating of 42% corresponds to a little more than 2 stars, and so on.

The class on the outer DIV allows us to apply CSS. The CSS used is as follows:

Code: Select all

.rating_bar {
  width: 55px;
  background: url(/img/star_x_grey.gif) 0 0 repeat-x;
}

.rating_bar div {
  height: 12px;
  background: url(/img/star_x_orange.gif) 0 0 repeat-x;
} 

The first rule-set applies to the outer DIV. It defines the width for the entire set of stars. The width determines how many stars will be visible. In our case, we have stars that are 11 pixels wide and we want 5 of them – hence 55 pixels wide. The faint star image is set as the background image.

The second rule-set applies to the inner DIV. The height needs to be the height of your star image. The bright star image is set as the background image.

This all combines to create our example:

star1.PNG (627 Bytes) Viewed 4001 times

You can think of it as two layered boxes. The lower one is filled with the faint stars and takes up the entire width. The upper one contains the bright stars and it’s width is what conveys the bar’s meaning. Here is the same thing again, but with coloured borders to reveal the edges of the boxes:

star2.PNG (665 Bytes) Viewed 4001 times

Pretty simple, huh!

Extending the system to create rating bars
You could use this system with many kinds of images. Another good image to use is a coloured bar.

Use these bars,

rating_bar_blue.gif (824 Bytes) Viewed 4001 times

rating_bar_bg.gif (95 Bytes) Viewed 4001 times

to create this one.

bar1.PNG (332 Bytes) Viewed 4001 times

An advantage of this method over the stars is that the entire bar can be any width. It doesn’t have to be the exact width of five stars or anything.

An even fancier bar
You can add a rounded end to the bar itself:

bar2.PNG (451 Bytes) Viewed 4001 times

To do this, you need an extra image:

rating_bar_tip.gif (289 Bytes) Viewed 4001 times

…and an extra inner DIV:

Code: Select all

<div class="rating_bar">
  <div style="width:52%">
    <div></div>
  </div>
</div> 

…and some extra CSS:

Code: Select all

.rating_bar div div {
  background: url(/img/rating_bar_tip.gif) right 0 no-repeat;
} 

This seems complicated, why would I want to do this?
There are a couple of alternatives to this system. You could display one IMG element for each star and calculate how many bright and faint stars you need. This means that you have more HTML (more for your visitors to download). It also restricts you to displaying full or perhaps half-stars.

Another method is to create a whole lot of different images – one for each possible combination of stars. This would result in less HTML, but more images for your visitors to download. And you are restricted to as many permutations as you can be bothered creating.

But I don’t want two-fifths of a star
You may decide that you only want to display whole stars (or half stars). This is easy to accomplish by first rounding the percentage width of the bar. If you only want to display whole stars, then round the percentage to the nearest 20%. This method still has advantages over the alternatives because it results in less HTML.