Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Create 5 Star Skills Rating Bar using CSS ?

  • Last Updated : 22 Oct, 2021

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.


Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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=”” 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.


<!DOCTYPE html>
<html lang="en">
    <title>Rating Bar</title>
    <link href=
        rel="stylesheet" />
        .rating {
            font-size: 40px;
        .clicked {
            color: rgb(135, 187, 32);
    <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>


5 Star Rating Bar using CSS

My Personal Notes arrow_drop_up
Recommended Articles
Page :