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
Please Login to comment...