Welcome to your website development training center.
Today am gonna go into 2 properties of CSS;
1. The width
2. The height
And also like to review something I just remembered.
Open your text editor and create header h4 anywhere within the body.
Like this 👇
Actually, am gonna give this a cool color scheme.
Let's make the background-color: red; and the text color: white
Like this 👇
Now you can see our text with a red background on a long line (width) and a short height.
This means by default, our height is equals to the height of our text and that's normal but sets the width of the element equals the width of out webpage.
Whenever we resize our website on a PC laptop or bigger devices like iPad and tablets, the width will reduce to the size of the text.
Maybe you want this kind of settings or not, depending on the size of your element and whenever I create a website I always like to specify the width.
So, if you want to change the width because you gonna come across times you just wanna adjust the width.
That's why you need to set the width and the height explicitly.
Let's go ahead and change the width for the element because when you're making a background for your header of something like that, it looks weird to have some extra space in front of it.
We need to type the property width and set it to something like 250px; this figure would fit nicely.
Like this 👇
Now you can see that instead of having the header background spread across the whole webpage, we now have something close to the size of our header, no matter we resize our webpage on any device, the header stays 250px constantly.
That's the method to adjust the width. I normally adjust only the width but you may come across a time where you'd like to adjust the height to 100px; or something. I particularly don't adjust height but that's a quick example of adjusting height below👇
