Today we are looking at a CSS property which directly relates to cats.
Is it ‘number of legs’?
No. Of course not, what would that even mean?
Is it ... ‘Furriness’?
It clearly isn’t.
Is it ...
Please don’t guess anything else.
It's Height.
We can use height to describe how tall a person or a building or a cat is and with CSS we can use the ‘height’ property to define how tall a HTML element is when it is shown on our website.
There are lots of CSS properties you can use to customise the text on your website; one of which is ‘font-style’. With ‘font-style’ you can choose to add text in italics, which looks like this:
Great. I’ve got one element that needs to be tall and this one can be short.
Unfortunately it doesn’t work like that. With CSS you can have a lot of control over the height but you have to use the correct units, much like we did with font size , in order for your code to make sense.
Do you have to set the height? We haven’t so far?
When making your website, you may find you don’t need to set the height of any of your HTML elements. But some elements may be too small to see properly or to use and others may be too big that they block other elements.
Like when you say I might get too big to use my cat flap?
Yes, I guess.
Let’s start by looking at the height property in CSS.
height:
To put it simply, the height property in CSS defines how tall a HTML element will be.
Like with font-size, this is set with a number and a unit of measurement. There are several to choose from, but let’s start with pixels.
Pixels are individual parts in your screen. Your screen contains a huge number of pixels and you can say how many pixels tall you want your HTML element to be.
For pictures this might be a couple of hundred pixels, but for icons or text it might be much less.
Let’s look at some examples.
height: 100px;
height: 200px;
height: 350px;
With pixels, the height of the element is fixed and won’t change but between large laptop screens and small phone screens some elements might not quite look right so be careful.
Complete the code below and set the image size using the height property in CSS.
height:px;
You can set the height of a HTML element based on a percentage of the element it sits in.
For instance, if you wanted an image to take up half of the room available, you can set height to 50% like this:
height: 50%;
Let’s say you are styling an image, you can set its height in CSS to more than 100% but the picture may be too big and obscure other elements or the extra part of the image may be hidden. So it is good not to set the height property to more than 100% but to adjust the height of its container instead.
In this case it is like a cat trying to sleep in a box that is too small for it.
#Aria { height: 110%; }
The box below is 300 pixels tall and we can see Aria in the box. Edit the code below it to see what different height percentages look like.
height:%
Another option for setting the height of a HTML element in CSS is to use the view height unit of measurement. With view height the result is based on the height of the screen where the value 100 is equal to the entire height of the screen.
Let’s look at an example:
height: 100vh;
Instead of typing ‘view height’, in CSS you can shorten it to just ‘vh’.
To set the height to half of the height of the screen just change your value in CSS from 100 to 50. Then your code looks like this:
height: 50vh;
So it’s like percentages?
Very much like percentages!
Although instead of basing the height on the size of the container, it’s based on the height of the screen.
Using view height can be really useful but you need to be careful when dealing with different shape screens.
Computer screens are normally much wider than they are tall, but phone screens are much taller than they are wide. So if you set an image to fill a laptop screen using height as 100vh in CSS, on a phone the image would be cropped and you wouldn’t see it all. Look at the example below and notice that on the phone you can’t see the whole image.
Despite this, view height is a useful option if you want to make sure your content takes up a certain portion of the screen.
An alternative to basing the height of your element on the height of your screen is to base it on the width instead.
To do this, instead of ‘vh’ for view height you can use ‘vw’ for view width where setting an element’s height to 100vw means it will be as tall as your screen is wide.
Here’s an example:
#cat-photo {
height: 50vw;
}
In this case, this code would tell your computer to find the width of your screen, half that, and then make the element called ‘cat-photo’ that tall.
It seems weird to set height based on the width of something else.
It does seem odd but if you want to lay on a sofa you need to know that you aren’t too tall for it. Using view width is like that, but in code CSS.
It can be quite handy when styling photos. Earlier, when we looked at view height, you saw that moving from a laptop to a phone may crop your image if you use view height in your CSS.
If you had used view width instead then the image would be scaled along with the size of the screen.
Here is an example:
In this example the following code was used:
height: 80vw;
Which means the height of the picture is set to be 80% of the width of the screen.
Again, the box below is 300 pixels tall. You can change the CSS code below it to see what different view width or view height values look like.
#cat-photo {
height:
}
Next we are going to look at a very similar CSS property: Width.
I know there’s been jokes about being too big for a cat flap but if you say I’m getting too wide for mine, I will take that personally!
I wouldn't dare!
Although, now you mention it....