Introduction

This tutorial will show you how to create a pure CSS based 5 star rating system front end. To create this you need to know basic HTML and CSS.

What’ ll it do?

Its just the front-end. So it doesnt actually deal with the rating process. It’ ll provide some eye candy for the user by highlighting stars according to the rating user selects.

Basic Mechanism

I’ ll post the codes and explain what each statement does on the go.

HTML

<ul>
<li><a href=” class=’one’>1</a></li>
<li><a href=” class=’two’>2</a></li>
<li><a href=” class=’three’>3</a></li>
<li><a href=” class=’four’>4</a></li>
<li><a href=” class=’five’>5</a></li>
</ul>
If you know some HTML. You might have understood that
the rating system consists of an unordered list with five sub lists, anchors and classes, each to identify individual rating stars.

The idea behind the rating system is to use background and hover property of CSS to dynamically change the background image of list as the user hovers mouse over the links. If you dont understand this, dont worry. Everything will become clearer once we cover the CSS part.

CSS


#rter{position:relative;background:url(http://tekungfu.files.wordpress.com/2009/08/starem.png?w=16) repeat-x;height:16px;width:80px;margin:0px;padding:0px;overflow:hidden;}

#rter li{float:left:margin:0px;padding:0px;}

#rter li a{height:14px;width:16px;z-index:20;position:absolute;text-indent:100px;}

#rter li a:hover{background:url(http://tekungfu.files.wordpress.com/2009/08/starf.png?w=16) repeat -x;z-index:1;left:0px;}

#rter li a.one:hover{width:16px;}

#rter a.two{left:16px;}

#rter a.two:hover{width:32px;}

#rter a.three{left:32px;}

#rter a.three:hover{width:48px;}

#rter a.four{left:48px;}

#rter a.four:hover{width:64px;}

#rter a.five{left:64px;}

#rter a.five:hover{width:80px;}

I dont know about you, but this CSS looks puzzling to me, and I wrote it :p, wow. Its easy. Dont give up yet. This part covers the CSS properties for the rating system. The “rter” is the id for parent unordered list. Classes one,two,three,four and five each state rules for each stars. We must set z-index for the sub li s as a bigger number because. We want the parent ul to overlap them. Dont forget to set the overflow as default because the text hides the text by pushing them sideways. If you dont hide that overflow, itll show the text 1,2,3,4,5. Thats not good.

You might wonder why I used 16px and 80px for the height and width of image. Thats because, the background image we are using has 16X16 dimension. I used 80 px for width because the parent ordered list represents the unrated empty stars, or the state when user hasnt hovered the mouse over any stars yet.Heres the empty star So all 5 stars are empty and show an empty star. 5*16=80. We use repeat-x so that the image repeats itself and creates that effect.

Now for the other 5 classes. When the user hovers mouse over an anchor a it sets CSS rules so that it brings the particular a to the front(using z-index:1),sets background as a full star (using background:url()) and increases its width so that it shows the number of stars its supposed to, 4 stars for 4, 3 for 3 etc by repeating the background image.