The width and height properties can be applied to any different element on your website to change its size. The value that you enter for the height and width can either be in pixels (px) or as a percentage (%).

The difference between these is that when you use pixels, the size is fixed for all different sizes of screen whereas when you use %, the size of the components then adjusts for different screen sizes. For example, if you had an image on your website set at a height of 1000px and then looked at your website on a computer, then the picture would look a good size. But what if someone looked at your website using their phone or tablet? Then the image would be very large because a phone screen is much smaller than a laptop. Both px and % can be used and as you get more advanced in web design, you will choose the one that is best suited to the website you are making.

In this example, have a look at the use of px and % on each of the images in CSS. Open it Repl.it and try dragging the edge of the screen and see how each of the different images move. Notice how the image with only px values stays at a set size and the image with all % values changes as the screen shifts. The image that has a mix of px and % values only changes its width as the screen size changes but its height remains fixed.