In this post I am going to show you how to make balls and stars in CSS. Now in this post you will know how to make a balls and stars in HTML and how to style it in CSS. You can make balls and star of many colored in it . We will make six colored balls and star in it.
All you need to know I am going to Creating Balls and Stars in CSS and HTML code and attach a screenshot for visual understanding. I would suggest that you fire up your favorite text editor and web browser and code along with me.
Les’s dive it…..
Ball
In this example, I will show you by making balls in CSS and HTML.
<style>
.balls{
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
}
#red {
background: red;
left: 40%;
#blue {
background: blue;
left: 45%;
}
#black {
background: black;
left: 50%;
}
#orange {
background: orange;
left: 55%;
}
#green {
background: green;
left: 60%;
}
#pink {
background: pink;
left: 65%;
}
</style>
<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>
<div class="balls" id= "black"></div>
<div class="balls" id= "orange"></div>
<div class="balls" id= "green"></div>
<div class="balls" id= "pink"></div>
The above code should look like this Image below in your preferred browser.
![ball in css](https://tubemint.com/wp-content/uploads/2020/09/ball-in-css.png)
Now we will create SOCCER BALL .
In this code we will create another type ball. You have to place this code ⚽ in place of the ball which is seen in this code.
body {
font-size: 20px;
}
⚽
The above code should look like this Image below in your preferred browser.
![SOCCER BALL in css](https://tubemint.com/wp-content/uploads/2020/09/soccer-ball-in-css.jpg)
Now we will create BASEBALL.
In this code we will create BASEBALL ball. You have to place this code ⚾ in place of the ball which is seen in this code.
body {
font-size: 20px;
}
</style>
<body>
<span style='font-size:100px;'>⚾</span>
</body>
</html>
The above code should look like this Image below in your preferred browser.
![baseball in css](https://tubemint.com/wp-content/uploads/2020/09/baseball-in-css.jpg)
Now we will create Stars .
Star 1
In this example, I will show you by making Star in CSS and HTML. You have to place this code &10036; in place of the star which is seen in this code.
<!DOCTYPE html>
<html>
<style>
body {
font-size: 20px;
color: #558957;
}
</style>
<body>
<span style='font-size:100px;'>✴</span>
</body>
</html>
The above code should look like this Image below in your preferred browser.
![star css](https://tubemint.com/wp-content/uploads/2020/09/star-css.jpg)
Star 2
In this example, I will show you by making Star in CSS and HTML. You have to place this code &10029; in place of the star which is seen in this code.
<!DOCTYPE html>
<html>
<style>
body {
font-size: 20px;
color: orange;
}
</style>
<body>
<span style='font-size:100px;'>✭</span>
</body>
</html>
The above code should look like this Image below in your preferred browser.
![star css](https://tubemint.com/wp-content/uploads/2020/09/star-css-1.jpg)
Star 3
IN this code I going show you another star that is slightly different. You have to place this code &10031; in place of the star which is seen in this code.
<!DOCTYPE html>
<html>
<style>
body {
font-size: 20px;
color: red;
}
</style>
<body>
<span style='font-size:100px;'>✯</span>
</body>
</html>
The above code should look like this Image below in your preferred browser.
![star css](https://tubemint.com/wp-content/uploads/2020/09/star-css-2.jpg)
Star 4
IN this code I going show you another star that is slightly different. You have to place this code &10032; in place of the star which is seen in this code.
body {
font-size: 20px;
color: #67FF36;
}
<span style="font-size:100px">✰</span>
The above code should look like this Image below in your preferred browser.
![star css](https://tubemint.com/wp-content/uploads/2020/09/star-css-3.jpg)