How to Create 5 Star Skills Rating Bar using CSS ?
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
Share your thoughts in the comments
Please Login to comment...