You are currently viewing Star Rating using HTML And CSS Code

Star Rating using HTML And CSS Code

A star rating is a method of expressing your feelings about something by using stars. A star rating is made up of 5 blank stars (where 0 is for the worst and 5 is for the best). When the user clicks on a star, its color changes to yellow. This is how a star rating works.

How To Create Star Rating Project Using HTML & CSS?

In this project, we will create a star rating website by adding five radio buttons and styling them with CSS to look like stars.

Let’s take a look at our project now.

Star rating html Css
Star rating html Css

 

I hope you must have got an idea about the project.

So,  Let’s Begin Star Rating Project By Adding The Source Codes.  first We Are Using The HTML Code.

Step1: Adding HTML code 

HTML stands for Hyper Text Markup Language, and it provides structure to our website.

ALL HTML documents begin with <!doctype HTML>, which informs the browser that our code adheres to the most recent HTML version.

The HTML document starts with <html> and ends with </html>.

The main tag is <body>, where we will write all of our content that will be displayed on the browser later.

Now we’ll take a look at our HTML code.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Star Rating</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Pure CSS Star Rating</h1>
    <div class="rating">
        <input type="radio" id="star5" name="rating" value="5" /><label for="star5"></label>
        <input type="radio" id="star4" name="rating" value="4" /><label for="star4"></label>
        <input type="radio" id="star3" name="rating" value="3" /><label for="star3"></label>
        <input type="radio" id="star2" name="rating" value="2" /><label for="star2"></label>
        <input type="radio" id="star1" name="rating" value="1" /><label for="star1"></label>
    </div>    
  </body>
</html>
  • First, we will use an H1 tag to create the main heading of our webpage.
  • Now we will create a div
  • Inside the div tag we will 5 input with type as “radio” and we will also id and name of inputs
  • we will also use label to label as our star1,star2 and so on…

Now let’s take look at our output without styling

Star rating html Css
Star rating html Css

So we have added the HTML tags and Their contents, Now it’s time to make it attractive by adding the CSS code.

Step2: CSS code for Star Rating

Cascading Style Sheets is a style sheet language that is used to describe the presentation of a document written in a markup language like HTML or XML.

Now we will look at our CSS code.

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
body {
     background: #f1f1f1;
}
 body h1 {
   font-family: 'Roboto Slab', serif;
     margin: 50px 20px 40px;
     font-size: 50px;
     letter-spacing: 0.5px;
     color: #999;
     text-align: center;
}
 .rating {
     width: 208px;
     height: 40px;
     margin: 0 auto;
     padding: 40px 50px;
     border: 1px solid #ccc;
     background: #f9f9f9;
}
 .rating label {
     float: right;
     position: relative;
     width: 40px;
     height: 40px;
     cursor: pointer;
}
 .rating label:not(:first-of-type) {
     padding-right: 2px;
}
 .rating label:before {
     content: "\2605";
     font-size: 42px;
     color: #ccc;
     line-height: 1;
}
 .rating input {
     display: none;
}
 .rating input:checked ~ label:before, .rating:not(:checked) > label:hover:before, .rating:not(:checked) > label:hover ~ label:before {
     color: #f9df4a;
}

Now that we’ve included our CSS code in our article, let’s go over it step by step.

Step1: First we will import the roboto font and also select body tag to add the background color as “gray”;

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
body {
     background: #f1f1f1;
}

Step2: Now we’ll style our H1 tag with the font-family “Lobster” and margins of 50px at the top, 20px at the bottom, 40px on the left, and 40px on the right. Font size is 50px, font colour is “dark-gray,” and text alignment is “centre.”

 body h1 {
     font-family: 'Lobster', cursive;
     margin: 50px 20px 40px;
     font-size: 50px;
     letter-spacing: 0.5px;
     color: #999;
     text-align: center;
}

Step3: Now using (.rating) class we style our rating icon the container . The width is “208px” and height is  “40px” and margin as auto . We also defined the border as 1px solid light gray with background as smoke white.

 .rating {
     width: 208px;
     height: 40px;
     margin: 0 auto;
     padding: 40px 50px;
     border: 1px solid #ccc;
     background: #f9f9f9;
}
 .rating label {
     float: right;
     position: relative;
     width: 40px;
     height: 40px;
     cursor: pointer;
}

Step4: We will now style our input. First, we’ll change the round radio button to a star by using content equal to (the CSS code for the star icon is \2605). We also specified a font-size of “42 px” and a line-height of 1. Now, we use the “rating” input to set the display to None, which hides the round radio buttons.

 .rating label:before {
     content: "\2605";
     font-size: 42px;
     color: #ccc;
     line-height: 1;
}
 .rating input {
     display: none;
}

Step5: The checked selector will now be used to match checked for all of the same input. This selector aids us in determining the star. When a user clicks on a star, it is checked and its colour changes to yellow.

 .rating input:checked ~ label:before, .rating:not(:checked) > label:hover:before, .rating:not(:checked) > label:hover ~ label:before {
     color: #f9df4a;
}

Now we have completed our css code and below👇here is the output after styling our webpage.

Final Output Of Star Rating Html Css Code

Star rating html Css
Star rating html Css

Now as we compeleted our project now will look at how it is working.

Preview:

Now We have Successfully created our Star Rating Project. You can use this project for your personal webpage and We hope you understood the project , If you any doub’t feel free to comment!!

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @arun
Code by : @Rachel

Leave a Reply