This tutorial is for very beginners and people who are brand new to CSS, and it covers two of the most useful and common CSS properties: width and height. In CSS, you use the width and height properties to define (as you can probably guess) the width and height of any element. When we say any element, we really do mean any. You can define something as large as the width and height of the body of your entire HTML file, or something as small as a tiny little button.
The syntax for the width and height properties is very easy to understand. Both properties only take a few different types of values. There’s auto, the default value, then there’s the [length] value, where you can define the length using the units of measurement of your choice (px, em, rem, cm, in…whatever your heart desires), and finally, there’s the % value, where you can define the width or height of an object as a percentage of its parent element — this last one is very common and helpful when it comes to responsive and mobile-friendly design.
One of the most common elements that the width and height properties are applied to is the div element. By default, div elements don’t have a fixed width or height, so they’re only as big as the content within them. This is true of all HTML elements, but it can become a problem with divs, because developers create empty divs very often to represent squares or rectangles. If you want empty divs to look like shapes, you have to give them a width and a height. To see what that looks like, check out the code snippet below:
div{
width: 300px;
height: 300px;
}
The div in the example above is now in the shape of a square, because the width is equal to the height. To make a rectangle is just as easy, just be sure that the width and height don’t have equal values. Take the code below as an example of this:
div{
width: 400px;
height: 250px;
}