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)