Percentage (%) Unit in 2 minutes!

Heyy friends! Amena this side! Today we're gonna be learning the Percentage unit in CSS...

Percentage! 💠

• In short form, It's not complicated it's just like a relationship between you and your parents...

Without any further do let's jump into the example! 👇

HTML code:

<!-- We've made 1 div and inside it we have another one, there are IDs too! -->

<div id="parents">
    <div id="child"></div>
</div>

• For now, we don't have any output...Coz these are empty DIVs, we are gonna apply the styles to explain to you guys!

CSS Code:

#parents{
    width: 100px;
    height: 100px;
    background-color:cornflowerblue;
}

• It's just halfway done and here's the OUTPUT:

• We have a normal square with some color inside it!

Other DIV of CSS code:

#parents{
    width: 100px;
    height: 100px;
    background-color:cornflowerblue;
}

#child{
    width: 50%;
    height: 50px;
    background-color: lightblue;
}

• The Output will be 👇

DO NOT WORRY ABOUT IT! 💥

EXPLANATION:

• HTML Code Explanation! 👇

• We have made two DIVs and we have given them 2 unique IDs, one for parents and the other for child to target and style them!

👇

👇

• CSS code Explanation! 👇

• Firstly, I have targeted the #parents div and inside it, I have made a simple SQUARE with the same WIDTH & HEIGHT and added some background color.

• Now, we have targeted our #child DIV...Inside it, we have set the WIDTH for 50%...Now the fun part arrives and what is % unit?

👇

👇

• Basically, Inside this #parents div we have set the width to 100px and what is the 50% of 100? Of course 50.

• Similarly, 100px of 50% = 50px...🎉

• So, the WIDTH and HEIGHT turned into half of the square and it made a mini square inside it!

Hopefully, you are cleared with PERCENT UNIT! Yayy! Congrats!

If you have any doubts mention them in the comments below and I will solve it for sure!

That is it for today guys! And I'll see you all in my next article till then take care and bye! ❤