Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a simple "star rating" look with CSS?
Creating a star rating system with CSS allows you to display visual feedback for user ratings using star icons. You can use Font Awesome icons or Unicode symbols to create attractive, customizable star ratings.
Syntax
.star {
font-size: size;
color: color;
}
.rated {
color: rating-color;
}
Method 1: Using Font Awesome Icons
This approach uses Font Awesome's star icons with custom CSS styling −
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 30px;
}
.fa {
font-size: 30px;
color: #ccc;
transition: color 0.3s;
}
.rated {
color: #ffd700;
}
.rating {
margin: 20px 0;
}
</style>
</head>
<body>
<h2>4 out of 5 Stars</h2>
<div class="rating">
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star"></span>
</div>
</body>
</html>
A heading "4 out of 5 Stars" appears, followed by five star icons where the first four are golden yellow (rated) and the last one is light gray (unrated).
Method 2: Using Unicode Star Symbols
This method uses Unicode star symbols without external dependencies −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 30px;
}
.star-rating {
font-size: 35px;
color: #ddd;
margin: 20px 0;
}
.star-rating .filled {
color: #ff6b35;
}
</style>
</head>
<body>
<h2>3.5 Star Rating</h2>
<div class="star-rating">
<span class="filled">?</span>
<span class="filled">?</span>
<span class="filled">?</span>
<span class="filled">?</span>
<span>?</span>
</div>
</body>
</html>
A heading "3.5 Star Rating" appears with five star symbols where three are filled with orange color, one is half-filled (outline star in orange), and one is gray outline only.
Method 3: Interactive Hover Effect
This creates an interactive star rating with hover effects −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 30px;
}
.interactive-rating {
font-size: 40px;
margin: 20px 0;
}
.interactive-rating span {
color: #ccc;
cursor: pointer;
transition: color 0.2s;
}
.interactive-rating span:hover,
.interactive-rating span:hover ~ span {
color: #4CAF50;
}
</style>
</head>
<body>
<h2>Hover Over Stars</h2>
<div class="interactive-rating">
<span>?</span>
<span>?</span>
<span>?</span>
<span>?</span>
<span>?</span>
</div>
</body>
</html>
A heading "Hover Over Stars" with five gray star symbols that turn green when hovered over. The hover effect shows the rating from left to the hovered star.
Conclusion
CSS star ratings can be created using Font Awesome icons or Unicode symbols. Add transitions and hover effects to make them interactive and visually appealing for user feedback systems.
Updated on: 2026-03-15T14:49:22+05:30
396 Views
Advertisements