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.
- 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.