Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

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

CSS Web Development Front End Technology

A user rating scorecard displays star ratings with progress bars showing the distribution of ratings. This creates an interactive visual representation of user feedback, commonly seen on e-commerce and review websites.

Syntax

/* Basic structure for rating scorecard */
.rating-container {
    display: flex;
    flex-direction: column;
}

.progress-bar {
    width: percentage;
    height: fixed-height;
    background-color: color;
}

Setting Up Font Awesome Icons

First, include the Font Awesome CDN to access star icons −

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Example: Complete User Rating Scorecard

The following example creates a complete user rating scorecard with star display and progress bars −

<!DOCTYPE html>
<html>
<head>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        * {
            box-sizing: border-box;
        }
        
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            margin: 30px;
            max-width: 800px;
            padding: 20px;
            background-color: #f9f9f9;
        }
        
        .rating-header {
            font-size: 25px;
            margin-right: 25px;
            font-weight: bold;
        }
        
        .fa {
            font-size: 25px;
            color: #ddd;
            margin-right: 5px;
        }
        
        .rated {
            color: #ffd700;
        }
        
        .rating-summary {
            margin: 20px 0;
            font-size: 16px;
            color: #666;
        }
        
        .rating-row {
            display: flex;
            align-items: center;
            margin: 8px 0;
        }
        
        .star-label {
            width: 80px;
            font-weight: bold;
            font-size: 14px;
        }
        
        .progress-container {
            flex: 1;
            background-color: #e0e0e0;
            border-radius: 10px;
            height: 18px;
            margin: 0 15px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            border-radius: 10px;
            transition: width 0.3s ease;
        }
        
        .rating-count {
            width: 50px;
            text-align: right;
            font-weight: bold;
            font-size: 14px;
        }
        
        .bar-5 { 
            width: 60%; 
            background-color: #4CAF50; 
        }
        
        .bar-4 { 
            width: 45%; 
            background-color: #8BC34A; 
        }
        
        .bar-3 { 
            width: 15%; 
            background-color: #FFC107; 
        }
        
        .bar-2 { 
            width: 25%; 
            background-color: #FF9800; 
        }
        
        .bar-1 { 
            width: 10%; 
            background-color: #F44336; 
        }
        
        .scorecard {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="scorecard">
        <div class="rating-header">User Rating</div>
        
        <div>
            <span class="fa fa-star rated"></span>
            <span class="fa fa-star rated"></span>
            <span class="fa fa-star rated"></span>
            <span class="fa fa-star rated"></span>
            <span class="fa fa-star"></span>
        </div>
        
        <p class="rating-summary">4.2 average based on 292 reviews</p>
        
        <div class="rating-breakdown">
            <div class="rating-row">
                <div class="star-label">5 star</div>
                <div class="progress-container">
                    <div class="progress-bar bar-5"></div>
                </div>
                <div class="rating-count">175</div>
            </div>
            
            <div class="rating-row">
                <div class="star-label">4 star</div>
                <div class="progress-container">
                    <div class="progress-bar bar-4"></div>
                </div>
                <div class="rating-count">132</div>
            </div>
            
            <div class="rating-row">
                <div class="star-label">3 star</div>
                <div class="progress-container">
                    <div class="progress-bar bar-3"></div>
                </div>
                <div class="rating-count">45</div>
            </div>
            
            <div class="rating-row">
                <div class="star-label">2 star</div>
                <div class="progress-container">
                    <div class="progress-bar bar-2"></div>
                </div>
                <div class="rating-count">72</div>
            </div>
            
            <div class="rating-row">
                <div class="star-label">1 star</div>
                <div class="progress-container">
                    <div class="progress-bar bar-1"></div>
                </div>
                <div class="rating-count">30</div>
            </div>
        </div>
    </div>
</body>
</html>

A white scorecard with rounded corners appears, showing "User Rating" header, 4 out of 5 gold stars, "4.2 average based on 292 reviews" text, and 5 horizontal progress bars representing rating distributions with different colors (green for 5-star, orange for 1-star).

Key Components

The rating scorecard consists of three main elements −

  • Star Display: Visual representation using Font Awesome stars with .rated class for filled stars
  • Progress Bars: Horizontal bars showing rating distribution with different widths and colors
  • Rating Counts: Numerical values showing how many users gave each rating

Conclusion

CSS user rating scorecards combine star icons with progress bars to create engaging visual feedback displays. Use flexbox for modern layouts and Font Awesome for consistent star styling across different browsers.

Updated on: 2026-03-15T14:49:53+05:30

864 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements