<h1 id="heading-1-img-tag-to-input-intend-profile-pic">1. IMG TAG TO INPUT INTEND PROFILE PIC</h1>
<p>Use the IMG html tag to input the picture you want to use as a profile picture
it should look similar to this</p>
<p> <img src="img_girl.jpg" />
Don't forget to add a class to it so as to enable you to apply css to it</p>
<h1 id="heading-2apply-css-using-the-class-of-the-image">2.Apply css using the class of the image</h1>
<p>Assuming you already created a class in the img tag, you now need to indent it with css like this</p>
<p>.avatar{
vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}</p>
<h1 id="heading-3-dont-forget-to-add-all-what-you-did-to-a-card-to-make-it-look-similar-to-mine">3. Dont forget to add all what you did to a card to make it look similar to mine</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1648036003373/KV5cVKMQ2.png" alt="profile.png" /></p>
<p>Thanks!!!!!!</p>


# 1. IMG TAG TO INPUT INTEND PROFILE PIC



Use the IMG html tag to input the picture you want to use as a profile picture
it should look similar to this



 <img class="avatar" src="img_girl.jpg" >
Don't forget to add a class to it so as to enable you to apply css to it



# 2.Apply css using the class of the image

Assuming you already created a class in the img tag, you now need to indent it with css like this



.avatar{
vertical-align: middle;
	width: 50px;
	height: 50px;
	border-radius: 50%;
}



# 3. Dont forget to add all what you did to a card to make it look similar to mine




![profile.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1648036003373/KV5cVKMQ2.png)




Thanks!!!!!!

How to create a profile picture with CSS

step-by-step approach to making a profile picture with css

1. IMG TAG TO INPUT INTEND PROFILE PIC

2.Apply css using the class of the image

3. Dont forget to add all what you did to a card to make it look similar to mine