How to create a \"user rating\" scorecard with CSS?

To create a user rating scorecard, first set the exact icon for a star. That would be done using the Font Awesome icons. The individual ratings are displayed as progress bars.

Set the Icon for Star Rating

The icon for the star rating is set using Font Awesome Icons. We have added the following CDN path for the Font Awesome icons in the beginning to use it on our web page ?

For rated, use the fa fa-star rated ?

The above rated class is styled to make the star look appealing ?

.rated {
   color: rgb(255, 0, 0);
   border: 2px solid yellow;
}

For non-rated, use only fa fa-star ?

The Star Rating Header

The star rating header is the following ?

User Rating

It is styled like this ?

.rateHeader {
   font-size: 25px;
   margin-right: 25px;
}

Set div for Progress bar

Different progress bars are created for 1star, 2 star, 3star, 4star, and 5star ratings ?

   

      
5 star
   
   

      

         

      
   
   

      
120
   
   

      
4 star
   
   

      

         

      
   
   

      
110
   
   

      
3 star
   
   

      

         

      
   
   

      
30
   
   

      
2 star
   
   

      

         

      
   
   

      
20
   
   

      
1 star
   
   

      

         

      
   
   

      
12
   

Style the Progress bar

The progress bar is placed on the left with the float property with the left value ?

.progressBar {
   margin-top: 10px;
   float: left;
   width: 70%;
}

Style the Progress bar Container

The container div in the progress bar is styled like this ?

.progressContainer {
   width: 100%;
   background-color: #f1f1f1;
   text-align: center;
   color: white;
   border-radius: 10px;
}

Style the Individual Bars

The individual bars are also styled with the width, height, and the background-color property ?

.bar-5 {
   width: 70%;
   height: 18px;
   background-color: rgb(76, 175, 162);
}
.bar-4 {
   width: 50%;
   height: 18px;
   background-color: rgb(243, 222, 33);
}
.bar-3 {
   width: 20%;
   height: 18px;
   background-color: #12d400;
}
.bar-2 {
   width: 65%;
   height: 18px;
   background-color: #ff0055;
}
.bar-1 {
   width: 40%;
   height: 18px;
   background-color: #a836f4;
}

Example

To create a "user rating" scorecard with CSS, the code is as follows ?

   
   


   User Rating
   
   
   
   
   
   
3.9 average based on 200 foodies.
   

      

         
5 star
      
      

         

            

         
      
      

         
120
      
      

         
4 star
      
      

         

            

         
      
      

         
110
      
      

         
3 star
      
      

         

            

         
      
      

         
30
      
      

         
2 star
      
      

         

            

         
      
      

         
20
      
      

         
1 star
      
      

         

            

         
      
      

         
12