Making things different sizes with CSS

Making things different sizes with CSS : We now know how to change the colour of our text, add background colours to our HTML elements and position them in different places on the page.

But if we want to make a really interesting web page, we need to know how to change the sizes of our HTML elements. CSS lets us change the size of things really easily. We have to use the width and height CSS properties and set the values to the measurements we want.

Let’s take a look at how we can use these properties to make a square < div > :

<body>
 <div style="background-color: plum; height: 200px; width: 200px;">
 <p>Hello world with yet another upgrade.</p>
 <p>Hello World with height and width in px width = 200 and px height = 200</p>
 </div>
</body>

Sample output of above code:

Hello world with yet another upgrade.

Hello World with height and width in px width = 200 and px height = 200

This time we have set the values of the CSS properties to numbers rather than words. When we use numbers we have to include units.

Types of units:
Pixels (px)
Percentages (%)
Points (pt)

Let’s look at how we can use percentages to change the height and width CSS properties of a < div >:

<body>
 <div style="background-color: palegreen; height: 75%; width: 50%;">
 <p> Hello world. Now we using percentages for height and width.</p>
 <p>We used height=75% and width=50%</p>
 </div>
</body>

Sample output of above code:

Hello world. Now we using percentages for height and width.

We used height=75% and width=50%

When you calculate percentages you are calculating what percentage of the screen you want your element to fill. If you change the size of your browser, the size of the element will also change.

Pixels and points are used in exactly the same way as percentages. With these units, the size of your element will always stay the same, even if you change the size of your browser.

Here we’ve set the height and width CSS properties using values in pixels, and we’ve used the font-size CSS property to change the size of the text to a value in points.

<body>
 <div style="background-color: gold; height: 200px; width: 350px; font-size: 20pt;">
 <p> Hello World. Now using font-size CSS property to change the size of the text to 20pt (points)</p>
 </div>
</body>

Sample output of above code:

Hello World. Now using font-size CSS property to change the size of the text to 20pt (points)

Connected through code, Choose Your Platform!

About the Author: Bernard Aybout

In the land of bytes and bits, a father of three sits, With a heart for tech and coding kits, in IT he never quits. At Magna's door, he took his stance, in Canada's wide expanse, At Karmax Heavy Stamping - Cosma's dance, he gave his career a chance. With a passion deep for teaching code, to the young minds he showed, The path where digital seeds are sowed, in critical thinking mode. But alas, not all was bright and fair, at Magna's lair, oh despair, Harassment, intimidation, a chilling air, made the workplace hard to bear. Management's maze and morale's dip, made our hero's spirit flip, In a demoralizing grip, his well-being began to slip. So he bid adieu to Magna's scene, from the division not so serene, Yet in tech, his interest keen, continues to inspire and convene.