Open In App

How to Create 5 Star Skills Rating Bar using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will create a 5 Star Rating Bar using CSS and HTML. A 5-star rating bar is used to collect user opinions or feedback. Users can give a rating out of 5 as per their satisfaction. We will create the layout or design of the rating bar.

Approach:

  • For the Star Icons, we are using Font-Awesome Icon Library.
  • Create the layout using HTML.
  • For stylings use CSS properties.

CSS library: To use Font Awesome Icons, we have to add the library in the HTML file using the link tag.

<link href=”https://pro.fontawesome.com/releases/v5.10.0/css/all.css” rel=”stylesheet”/>

By adding the link, we can access the icons provided by this library. You can get the link for your own project on the Font-Awesome website or you can use the same link as we have mentioned above.

 Syntax: To use Star Icon, use the following syntax.

<i class="fas fa-star"></i>

Note: Please refer to CSS Icons article for a better understanding.

Example: We have created a 5 Star Rating Bar using the above approach. We have added a class clicked in the icon tag. This class is used to change the colour of the star. We have added the CSS properties in the style tag.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Rating Bar</title>
    <link href=
        rel="stylesheet" />
          
    <style>
        .rating {
            font-size: 40px;
        }
  
        .clicked {
            color: rgb(135, 187, 32);
        }
    </style>
</head>
  
<body>
    <h1>5 Star Rating Bar</h1>
    <div class="rating">
        <i class="fa fa-star clicked"></i>
        <i class="fa fa-star clicked"></i>
        <i class="fa fa-star clicked"></i>
        <i class="fa fa-star clicked"></i>
        <i class="fa fa-star"></i>
    </div>
</body>
  
</html>


Output: 

5 Star Rating Bar using CSS



Last Updated : 22 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads